Découvrez comment créer une application Web progressive en quelques minutes avec Next.js

Les applications mobiles sont devenues presque indispensables aux entreprises en raison de leur capacité à fournir aux utilisateurs les services dont ils ont besoin rapidement et facilement. Mais que se passerait-il si je vous disais qu'il est possible d'avoir une expérience de type application mobile sur le Web ? C'est à cela que servent les Progressive Web Apps (PWA).

La demande d’applications mobiles est en hausse, comme le montre l’enquête Top Design Firms . En 2022, près de la moitié (48 %) des petites entreprises disposaient d’applications mobiles, contre un tiers (32 %) en 2021. Cette tendance montre une évolution des besoins des utilisateurs, qui exigent des interactions de type mobile sur toutes les plateformes.

En développant une PWA, les entreprises peuvent fournir directement cette expérience d'application native via le navigateur Web, offrant ainsi aux utilisateurs finaux une application fiable et attrayante sans avoir besoin d'une application mobile distincte.

Que sont les PWA ?

Une application Web progressive est une application qui offre aux utilisateurs un support natif, semblable à celui des appareils mobiles, sans avoir à tenir compte des considérations spécifiques à la plate-forme qui varient d'Android à iOS en passant par les ordinateurs de bureau. Elles sont légères, accessibles sur tous les appareils et se mettent à jour automatiquement lorsqu'elles sont connectées à Internet.

Pourquoi envisager une PWA pour votre entreprise ?

• Ils sont moins chers que le développement d'applications natives
• Ils peuvent être facilement installés sur les écrans d'accueil des utilisateurs sans App Store
• Les PWA proposent des notifications push tout comme les applications mobiles
• Ils offrent des fonctionnalités hors ligne en mettant en cache le contenu
• Ils sont conçus pour fonctionner sur différents appareils

Présentation du nouveau support natif de Next.js pour les PWA

Je recherchais récemment la meilleure solution possible pour faire de mon application NextJs une application Web progressive lorsque je suis tombé sur le commentaire Reddit ci-dessous concernant les récentes mises à jour de Next.js, y compris la prise en charge native des PWA.

Consultez le commentaire ici .

Après avoir examiné la mise à jour, je peux dire qu'il n'a jamais été aussi simple de créer des PWA et je vais le prouver.

Configuration et exigences du projet

• Une compréhension raisonnable de React.
• NodeJs installé sur votre machine.

PS : deux fichiers sont très importants pour que votre application soit reconnue comme PWA : le fichier manifeste et le fichier service worker .

• Fichier manifeste : le manifeste de l'application Web est un fichier qui contient des informations sur notre application qui la rendent essentiellement installable. Ces informations incluent la couleur du thème, les icônes, l'URL de départ, etc.
• Service worker : le service worker est un fichier contenant le script qui s'exécute en arrière-plan de l'application. Il permet des fonctionnalités telles que les notifications push, la mise en cache et la prise en charge hors ligne.

1.) Configuration de l'application

 npx create-next-app@latest my-pwa-app

Ou

 yarn create next-app my-pwa-app

Après avoir exécuté la commande, suivez les instructions correspondant aux spécificités de votre installation, puis accédez au répertoire du projet.

 cd my-pwa-app

Démarrer le serveur de développement

 npm run dev 

2.) Créer le fichier manifeste

Créez un fichier manifest.json ou manifest.ts dans le répertoire 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', }, ], } }

• nom : Nom officiel de l'application. Ce nom apparaît sur l'écran d'accueil et permet aux utilisateurs d'identifier l'application.
• short_name : Le nom court apparaît lorsque le nom est long et qu'il n'y a pas beaucoup d'espace pour l'afficher
• description : Décrit l'application et ce qu'elle fait.
• start_url : Lorsqu'un utilisateur lance l'application, il démarre à partir de l'itinéraire spécifié ici.
• affichage : la propriété d'affichage configure son apparence lors du lancement et peut être n'importe quelle minimal-ui standalone fullscreen ou browser
• background_color : Il est important d'utiliser une couleur d'arrière-plan qui correspond au thème de l'application pour une transition et une expérience utilisateur fluides
• theme_color : Ceci spécifie la couleur des éléments de l'interface utilisateur comme la barre d'outils et la barre d'état du navigateur.
• icônes : le tableau d'icônes contient les propriétés des icônes à utiliser sur différentes plates-formes, en spécifiant la src , size et type . Pour votre PWA, il est important d'avoir au moins des icônes de tailles 192x192 et 512x512 .

Des sites Web comme manifest-generator peuvent être utilisés pour générer rapidement le fichier manifeste et différentes tailles d'icônes

3.) Créez le fichier du service worker.

Le service worker écouterait les événements push et exécuterait la fonction ci-dessous pour les notifications push

 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.) Enregistrer le travailleur de service

Pour enregistrer le service worker, vous devez fournir l'itinéraire où le service worker est créé.

 const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", });

Installer web-push pour gérer les notifications et les abonnements

 npm install web-push --save

Nous devons ensuite récupérer l'abonnement si l'utilisateur en possède un ou abonner l'utilisateur aux événements push. Dans une application réelle, cet abonnement doit être envoyé au serveur pour stockage

 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); } }

Pour générer les clés VAPID, exécutez :

 npx web-push generate-vapid-keys 

Rassembler le tout pour l'interface utilisateur avec une fonction pour tester la notification push

 "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.) Création du point de terminaison

• Dans le répertoire app , créez un nouveau dossier appelé api .
• Dans le dossier api , créez un autre dossier nommé sendNotification .
• Dans le dossier sendNotification , créez un fichier nommé route.ts .

La structure devrait être la suivante

 app/ └── api/ └── sendNotification/ └── route.ts

Dans le fichier route.ts, incluez les lignes de code suivantes

 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 } ); } }

Pour confirmer que l'application est désormais une PWA, l'icône de téléchargement doit apparaître à l'extrême droite de la barre d'URL. Vous devriez également pouvoir voir les informations sur le manifeste Web dans l'onglet des applications.

Conclusion

La récente mise à jour de Next.js avec prise en charge native des PWA a rendu le processus de création d'applications Web progressives très fluide. Avec Next.js, le développement et le déploiement d'une PWA sont désormais un processus simple dans le cadre du développement Web moderne, car les développeurs peuvent désormais créer rapidement des applications avec les fonctionnalités natives attendues par les utilisateurs, le tout à partir d'un navigateur Web.