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 . 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. Top Design Firms 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. installé sur votre machine. NodeJs PS : deux fichiers sont très importants pour que votre application soit reconnue comme PWA : le et le . fichier manifeste fichier service worker 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. Fichier manifeste : 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. Service worker : 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 ou dans le répertoire . 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', }, ], } } Nom officiel de l'application. Ce nom apparaît sur l'écran d'accueil et permet aux utilisateurs d'identifier l'application. nom : : Le nom court apparaît lorsque le nom est long et qu'il n'y a pas beaucoup d'espace pour l'afficher short_name : Décrit l'application et ce qu'elle fait. description : Lorsqu'un utilisateur lance l'application, il démarre à partir de l'itinéraire spécifié ici. start_url : la propriété d'affichage configure son apparence lors du lancement et peut être n'importe quelle ou affichage minimal-ui standalone fullscreen browser : 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 background_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. theme_color : le tableau d'icônes contient les propriétés des icônes à utiliser sur différentes plates-formes, en spécifiant la , et . Pour votre PWA, il est important d'avoir au moins des icônes de tailles et . icônes src size type 192x192 512x512 Des sites Web comme peuvent être utilisés pour générer rapidement le fichier manifeste et différentes tailles d'icônes manifest-generator 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 pour gérer les notifications et les abonnements web-push 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 , créez un nouveau dossier appelé . app api Dans le dossier , créez un autre dossier nommé . api sendNotification Dans le dossier , créez un fichier nommé . sendNotification 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: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 } ); } } 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.
