Comment créer une PWA avec Next.js

Les Progressive Web Apps (PWA) ne sont plus une simple curiosité technique. Elles représentent une évolution majeure dans la manière de concevoir des expériences web, en combinant la portée du web avec les fonctionnalités d'une application native. Si vous utilisez Next.js, vous disposez déjà d'un framework puissant pour construire des applications performantes. L'intégrer avec les capacités d'une PWA est la prochaine étape logique pour offrir une expérience utilisateur exceptionnelle.

Cet article vous guide pas à pas dans la création d'une PWA robuste avec Next.js, en se concentrant sur les meilleures pratiques actuelles et les outils modernes qui simplifient le processus.

Qu'est-ce qu'une PWA ?

Pour faire simple, une Progressive Web App est un site web qui peut se comporter comme une application native. Elle est construite avec des technologies web standards (HTML, CSS, JavaScript) mais offre des fonctionnalités que l'on associe généralement aux applications mobiles.

Les caractéristiques clés d'une PWA sont :

• Installable : L'utilisateur peut l'ajouter à son écran d'accueil, la rendant accessible comme n'importe quelle autre application.
• Fiable : Grâce aux Service Workers, elle peut fonctionner même avec une connexion internet faible ou inexistante.
• Engageante : Elle peut envoyer des notifications push pour réengager les utilisateurs.
• Rapide : Elle met en cache les ressources pour offrir des temps de chargement quasi instantanés après la première visite.
• Sécurisée : Elle est obligatoirement servie via HTTPS pour garantir la sécurité des données.

Pourquoi choisir Next.js pour votre PWA ?

Next.js est un choix naturel pour développer une PWA, et ce pour plusieurs raisons. Son architecture est déjà orientée vers la performance et l'expérience utilisateur, des piliers fondamentaux des PWA.

• Rendu côté serveur (SSR) et génération statique (SSG) : Assure un premier chargement ultra-rapide, essentiel pour retenir l'attention de l'utilisateur.
• Optimisation des performances : Next.js intègre nativement des optimisations (code splitting, optimisation des images) qui contribuent directement à une meilleure expérience PWA.
• Écosystème riche : Bien que la configuration manuelle soit possible, des bibliothèques comme serwist (le successeur moderne de next-pwa) simplifient grandement l'implémentation des Service Workers.
• Expérience de développement fluide : Le routing basé sur le système de fichiers et les rechargements rapides facilitent la création d'interfaces complexes qui se sentent natives.

Les prérequis pour commencer

Avant de plonger dans le code, assurez-vous d'avoir les éléments suivants :

1. Node.js (version 18 ou supérieure) installé sur votre machine.
2. Un projet Next.js existant ou fraîchement créé. Si vous partez de zéro, lancez la commande : npx create-next-app@latest mon-projet-pwa.

Créer votre PWA avec Next.js : le guide pratique

Le processus se décompose en trois étapes fondamentales : la création du fichier manifeste, la mise en place du Service Worker et la configuration des stratégies de cache.

Étape 1 : Le fichier manifest.json

Le fichier manifeste est un simple fichier JSON qui donne au navigateur les informations essentielles sur votre application web : son nom, ses icônes, sa couleur de thème, etc. C'est la carte d'identité de votre PWA.

1. Créez un fichier manifest.json dans le dossier public de votre projet Next.js.
2. Remplissez-le avec les informations de votre application.

Exemple de fichier manifest.json : { "name": "Mon App Next.js PWA", "short_name": "MonAppPWA", "description": "Une super application construite avec Next.js", "start_url": "/", "display": "standalone", "background_color": "#FFFFFF", "theme_color": "#000000", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

• name : Le nom complet de l'application.
• short_name : Le nom affiché sur l'écran d'accueil.
• start_url : La page qui s'ouvre au lancement de la PWA.
• display : Définit l'apparence de la fenêtre (standalone pour une expérience sans barre de navigation).
• background_color : La couleur de l'écran de démarrage.
• theme_color : La couleur de la barre d'outils.
• icons : Un tableau d'icônes de différentes tailles pour s'adapter à tous les appareils. N'oubliez pas de créer ces icônes et de les placer dans le dossier public/icons.

1. Enfin, liez ce fichier à votre application en ajoutant la ligne suivante dans la section <head> de votre fichier de layout principal (app/layout.tsx ou pages/_document.tsx) : <link rel="manifest" href="/manifest.json" />

Étape 2 : Le Service Worker, le cœur de votre PWA

Le Service Worker est un script qui s'exécute en arrière-plan, séparément de la page web. Il agit comme un proxy entre votre application, le navigateur et le réseau. C'est lui qui permet le fonctionnement hors-ligne, la mise en cache et les notifications push.

Avec les versions récentes de Next.js, l'utilisation de bibliothèques dédiées comme serwist est recommandée pour simplifier la gestion complexe des Service Workers.

1. Installez la bibliothèque : npm install @serwist/next
2. Configurez serwist : Créez un fichier next.config.mjs à la racine de votre projet et ajoutez la configuration serwist.

const withSerwist = require("@serwist/next").default({ swSrc: "app/sw.ts", swDest: "public/sw.js", });

module.exports = withSerwist({ // Votre configuration Next.js existante });

1. Créez votre Service Worker : Créez un fichier sw.ts dans le dossier app. C'est ici que vous définirez les règles de mise en cache et le comportement hors-ligne.

import { defaultCache } from "@serwist/next/worker"; import { Serwist } from "serwist";

const serwist = new Serwist({ precacheEntries: self.__SW_MANIFEST,

runtimCaching: defaultCache, });

serwist.addEventListeners();

Cette configuration de base met en cache automatiquement tous les fichiers générés par Next.js (precacheEntries) et applique une stratégie de cache par défaut pour les autres requêtes (runtimeCaching).

Étape 3 : Gérer le mode hors-ligne avec des stratégies de cache

La vraie puissance du Service Worker réside dans sa capacité à intercepter les requêtes réseau et à décider comment y répondre. Vous pouvez servir des ressources depuis le cache, depuis le réseau, ou un mélange des deux.

Voici les stratégies de cache les plus courantes :

Vous pouvez personnaliser ces stratégies dans votre fichier sw.ts pour différents types de ressources.

Étape 4 : Activer l'installation sur l'écran d'accueil

Une fois que vous avez un manifest.json et un Service Worker actif, les navigateurs modernes proposeront automatiquement à l'utilisateur d'installer votre PWA.

Les critères pour déclencher cette proposition sont :

• Le site est servi en HTTPS.
• Il a un manifest.json valide avec les propriétés requises.
• Il a un Service Worker enregistré qui gère au moins une route (par exemple, la route /).

Tester et déboguer votre PWA

Le meilleur outil pour tester votre PWA est l'onglet Application des outils de développement de Chrome (ou navigateurs basés sur Chromium).

Vous y trouverez des sections pour :

• Manifest : Vérifier que votre fichier manifeste est correctement lu.
• Service Workers : Voir l'état de votre Service Worker, le forcer à se mettre à jour ou le désenregistrer. Vous pouvez aussi simuler le mode hors-ligne en cochant la case "Offline".
• Storage : Inspecter ce qui est stocké dans le cache.

Utilisez également l'outil Lighthouse pour auditer votre PWA. Il vous donnera un score et des recommandations pour améliorer sa fiabilité et ses performances.

Les erreurs fréquentes à éviter

1. Oublier le HTTPS : Toutes les fonctionnalités PWA, à l'exception du développement local sur localhost, exigent une connexion sécurisée.
2. Problèmes de mise à jour du Service Worker : Un Service Worker une fois installé ne se met pas à jour à chaque rechargement de page. Pour forcer la mise à jour pendant le développement, utilisez l'option "Update on reload" dans les outils de développement.
3. Chemins d'icônes incorrects : Assurez-vous que les chemins vers vos icônes dans le manifest.json sont corrects et partent de la racine du dossier public.
4. Ne pas gérer le fallback hors-ligne : Si une ressource n'est ni dans le cache ni accessible via le réseau, votre application peut planter. Prévoyez une page ou un message d'erreur "hors-ligne" élégant.

Construire une PWA avec Next.js transforme votre site web en une application puissante, rapide et engageante. En suivant ces étapes, vous posez des fondations solides pour offrir une expérience utilisateur qui rivalise avec les meilleures applications natives, tout en conservant la simplicité et la portée du web.