Mobiele apps zijn bijna onmisbaar geworden voor bedrijven vanwege hun vermogen om gebruikers snel en eenvoudig de benodigde services te bieden. Maar wat als ik u vertel dat het mogelijk is om een mobiele app-achtige ervaring op het web te hebben? Dit is waar Progressive Web Apps (PWA's) voor zijn. Er is een toenemende vraag naar mobiele apps, zoals blijkt uit het -onderzoek. In 2022 had bijna de helft (48%) van de kleine bedrijven hun eigen mobiele apps, vergeleken met een derde (32%) in 2021. Deze trend laat een verschuiving zien in de behoeften van gebruikers die mobiele interacties op alle platforms vereisen. Top Design Firms Door een PWA te ontwikkelen, kunnen bedrijven deze native-app-ervaring rechtstreeks via de webbrowser aanbieden, waardoor eindgebruikers een betrouwbare en boeiende applicatie krijgen zonder dat er een aparte mobiele applicatie nodig is. Wat zijn PWA's? Een Progressive Web App is een app die gebruikers native support biedt, vergelijkbaar met mobiele apparaten zonder dat ze hoeven te bouwen met platformspecifieke overwegingen die variëren van Android tot IOS tot desktops. Ze zijn lichtgewicht, toegankelijk op alle apparaten en worden automatisch bijgewerkt wanneer ze verbonden zijn met internet. Waarom zou u een PWA voor uw bedrijf overwegen? Ze zijn goedkoper vergeleken met het ontwikkelen van native apps Ze kunnen eenvoudig op het startscherm van gebruikers worden geïnstalleerd zonder dat er een App Store nodig is PWA's bieden pushmeldingen net als mobiele apps Ze bieden offline functionaliteit door inhoud te cachen Ze zijn ontworpen om op verschillende apparaten te werken Overzicht van de nieuwe native ondersteuning van Next.js voor PWA's Ik was onlangs bezig met onderzoek naar de beste manier om van mijn NextJs-app een Progressive Web App te maken, toen ik onderstaande Reddit-opmerking tegenkwam over recente Next.js-updates, waaronder native ondersteuning voor PWA's. Bekijk het commentaar. hier Nadat ik de update heb bekeken, kan ik zeggen dat het nog nooit zo eenvoudig was om PWA's te maken. En ik zal het bewijzen. Projectopzet en vereisten Een redelijk begrip van React. geïnstalleerd op uw machine. NodeJs PS: Twee bestanden zijn erg belangrijk om ervoor te zorgen dat uw app wordt herkend als PWA: het en het . manifestbestand service workerbestand Het web-app-manifest is een bestand dat informatie bevat over onze app die deze in principe installeerbaar maakt. Deze informatie omvat de themakleur, pictogrammen, start-URL, etc. Manifestbestand: De service worker is een bestand met het script dat op de achtergrond van de applicatie draait. Het maakt functies mogelijk zoals pushmeldingen, caching en offline support. Service worker: 1.) De app instellen npx create-next-app@latest my-pwa-app Of yarn create next-app my-pwa-app Nadat u de opdracht hebt uitgevoerd, volgt u de aanwijzingen voor de installatiespecificaties en navigeert u vervolgens naar de projectmap cd my-pwa-app Start de dev-server op npm run dev 2.) Maak het manifestbestand Maak een of bestand in de directory. manifest.json manifest.ts app import type { MetadataRoute } from 'next' export default function manifest(): MetadataRoute.Manifest { return { name: 'Next.js PWA', short_name: 'NextPWA', description: 'A Progressive Web App built with Next.js', start_url: '/', display: 'standalone', background_color: '#ffffff', theme_color: '#000000', icons: [ { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png', }, { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', }, ], } } Officiële naam van de app. Deze naam verschijnt op het startscherm en stelt gebruikers in staat de app te identificeren. naam: : De korte naam verschijnt wanneer de naam lang is en er niet veel ruimte is om weer te geven short_name : Beschrijft de toepassing en wat deze doet. beschrijving : Wanneer een gebruiker de app start, start deze vanaf de hier opgegeven route. start_url : De weergave-eigenschap configureert het uiterlijk bij het starten en kan een van de volgende zijn: of weergave standalone minimal-ui fullscreen browser : Het is belangrijk om een achtergrondkleur te gebruiken die past bij het thema van de app voor een soepele overgang en gebruikerservaring background_color : Hiermee geeft u de kleur op van de UI-elementen, zoals de werkbalk en statusbalk van de browser. theme_color : De pictogrammenarray bevat eigenschappen van de pictogrammen die op verschillende platforms moeten worden gebruikt, met specificatie van de , en . Voor uw PWA is het belangrijk om ten minste pictogrammen met de formaten en te hebben. pictogrammen src size type 192x192 512x512 Websites zoals kunnen worden gebruikt om snel het manifestbestand en verschillende groottes van pictogrammen te genereren manifest-generator 3.) Maak het service worker-bestand. De servicemedewerker zou naar pushgebeurtenissen luisteren en de onderstaande functie voor pushmeldingen uitvoeren self.addEventListener("push", function (event) { if (event.data) { const data = event.data.json(); const options = { body: data.body, icon: data.icon || '/icon.png', badge: "/icons/timer-icon-144.png", vibrate: [100, 50, 100], data: { dateOfArrival: Date.now(), primaryKey: "5", }, }; event.waitUntil(self.registration.showNotification(data.title, options)); } }); self.addEventListener("notificationclick", function (event) { console.log("Notification click received."); event.notification.close(); event.waitUntil(clients.openWindow("<https://your-website.com>")); //This should be the url to your website }); 4.) Registreer de servicemedewerker Om de service worker te registreren, moet u de route opgeven waar de service worker wordt aangemaakt. const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", }); Installeer om meldingen en abonnementen te verwerken web-push npm install web-push --save We moeten dan het abonnement ophalen als de gebruiker er een heeft of de gebruiker abonneren op push-events. In een echte applicatie zou dit abonnement naar de server moeten worden gestuurd voor opslag async function registerServiceWorker() { const registration = await navigator.serviceWorker.register("/sw.js", { scope: "/", updateViaCache: "none", }); const sub = await registration.pushManager.getSubscription(); if (sub) { setSubscription(sub); //This would be sent to a server } else { const pushSubscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY, // Your VAPID public key }); setSubscription(pushSubscription); } } Om de VAPID-sleutels te genereren, voert u het volgende uit: npx web-push generate-vapid-keys Alles samenvoegen voor de gebruikersinterface met een functie om de pushmelding te testen "use client"; import { useEffect, useState } from "react"; const Home = () => { const [subscription, setSubscription] = useState<PushSubscription | null>( null ); useEffect(() => { if ("serviceWorker" in navigator && "PushManager" in window) { registerServiceWorker(); } }, []); async function registerServiceWorker() { const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", }); const sub = await registration.pushManager.getSubscription(); if (sub) { setSubscription(sub); //This would be sent to a server } else { const pushSubscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY, // Your VAPID public key }); setSubscription(pushSubscription); } } //Create a function to test the notification const handleSendNotification = async () => { await fetch("/api/sendNotification", { method: "POST", body: JSON.stringify({ message: "Your timer has completed!", subscription: subscription, // This ideally, should not be included in the body. It should have already been saved on the server }), headers: { "Content-Type": "application/json", }, }); }; return ( <div> <h1>My PWA with Push Notifications</h1> <button onClick={handleSendNotification}>Notify Me!</button> </div> ); }; export default Home; 5.) Het eindpunt maken Maak in de directory een nieuwe map met de naam . app api Maak in de map een andere map met de naam . api sendNotification Maak in de map een bestand met de naam . sendNotification route.ts De structuur zou als volgt moeten zijn app/ └── api/ └── sendNotification/ └── route.ts Neem de volgende coderegels op in het route.ts-bestand import { NextResponse } from "next/server"; import webpush from "web-push"; webpush.setVapidDetails( "mailto:your-email@example.com", // Your email process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!, process.env.VAPID_PRIVATE_KEY! ); export async function POST(req: Request) { const { message, subscription } = await req.json(); if (!subscription) { return NextResponse.json( { error: "No subscription available" }, { status: 400 } ); } try { await webpush.sendNotification( subscription, JSON.stringify({ title: "Notification", body: message }) ); return NextResponse.json({ success: true }); } catch (error) { console.error("Error sending notification:", error); return NextResponse.json( { error: "Failed to send notification" }, { status: 500 } ); } } Om te bevestigen dat de app nu een PWA is, zou het downloadpictogram helemaal rechts in de url-balk moeten verschijnen. U zou ook informatie over het webmanifest moeten kunnen zien in het tabblad toepassingen. Conclusie De recente update van Next.js met native PWA-ondersteuning heeft het proces van het maken van progressieve web-apps heel soepel gemaakt. Met Next.js is het ontwikkelen en implementeren van een PWA nu een eenvoudig proces in een deel van moderne webontwikkeling, omdat ontwikkelaars nu snel applicaties kunnen maken met de native-achtige functies die gebruikers verwachten, allemaal vanuit een webbrowser.
