Leer hoe u in enkele minuten een progressieve web-app bouwt met Next.js

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 Top Design Firms -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.

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 hier het commentaar.

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.
• NodeJs geïnstalleerd op uw machine.

PS: Twee bestanden zijn erg belangrijk om ervoor te zorgen dat uw app wordt herkend als PWA: het manifestbestand en het service workerbestand .

• Manifestbestand: 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.
• Service worker: 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.

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 manifest.json of manifest.ts bestand in de app directory.

 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', }, ], } }

• naam: Officiële naam van de app. Deze naam verschijnt op het startscherm en stelt gebruikers in staat de app te identificeren.
• short_name : De korte naam verschijnt wanneer de naam lang is en er niet veel ruimte is om weer te geven
• beschrijving : Beschrijft de toepassing en wat deze doet.
• start_url : Wanneer een gebruiker de app start, start deze vanaf de hier opgegeven route.
• weergave : De weergave-eigenschap configureert het uiterlijk bij het starten en kan een van de volgende zijn: standalone minimal-ui fullscreen of browser
• background_color : Het is belangrijk om een achtergrondkleur te gebruiken die past bij het thema van de app voor een soepele overgang en gebruikerservaring
• theme_color : Hiermee geeft u de kleur op van de UI-elementen, zoals de werkbalk en statusbalk van de browser.
• pictogrammen : De pictogrammenarray bevat eigenschappen van de pictogrammen die op verschillende platforms moeten worden gebruikt, met specificatie van de src , size en type . Voor uw PWA is het belangrijk om ten minste pictogrammen met de formaten 192x192 en 512x512 te hebben.

Websites zoals manifest-generator kunnen worden gebruikt om snel het manifestbestand en verschillende groottes van pictogrammen te genereren

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 web-push om meldingen en abonnementen te verwerken

 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 app directory een nieuwe map met de naam api .
• Maak in de map api een andere map met de naam sendNotification .
• Maak in de map sendNotification een bestand met de naam 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:[email protected]", // 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.