Configuration PWA · Documentation

Starter ProConfiguration PWA

Configurer la couche PWA-readyLien vers la section

Starter Pro utilise une configuration PWA explicite basée sur les conventions de Next.js App Router.

Commencez avec une fondation PWA propre.

Starter Pro inclut un comportement d'application installable, un mode autonome, des icônes professionnelles, des captures d'écran et un routage hors ligne sans stratégies de cache dangereuses.

PWA overview

Paiement unique — Accès instantané après achat

Principe de base

La couche PWA devrait être facile à auditer, facile à remplacer et sûre pour les produits SaaS avec authentification, facturation et données d’application protégées.

Structure recommandéeLien vers la section

layout.tsx

manifest.ts

favicon.ico

icon.png

apple-icon.png

sw.js

icon-192.png

icon-512.png

maskable-icon-512.png

dashboard-desktop.png

dashboard-mobile.png

Étapes de configurationLien vers la section

Ajouter la configuration PWALien vers la section

lib/pwa/pwa-config.ts

export const pwaConfig = {
  name: "PyColors Starter Pro",
  shortName: "Starter Pro",
  description:
    "Production-ready SaaS starter with auth, billing, dashboard and installable PWA foundations.",
  themeColor: "#0b0b10",
  backgroundColor: "#0b0b10",
  brandColor: "oklch(0.68 0.19 292)",
  display: "standalone",
  orientation: "portrait",
} as const;

Ajouter le manifesteLien vers la section

app/manifest.ts

import type { MetadataRoute } from "next";

import { pwaConfig } from "@/lib/pwa/pwa-config";

export default function manifest(): MetadataRoute.Manifest {
  return {
    id: "/",
    name: pwaConfig.name,
    short_name: pwaConfig.shortName,
    description: pwaConfig.description,
    start_url: "/",
    scope: "/",
    display: "standalone",
    orientation: "portrait",
    theme_color: pwaConfig.themeColor,
    background_color: pwaConfig.backgroundColor,
    categories: ["business", "productivity", "developer"],
    icons: [
      {
        src: "/pwa/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/pwa/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
      {
        src: "/pwa/maskable-icon-512.png",
        sizes: "512x512",
        type: "image/png",
        purpose: "maskable",
      },
    ],
    screenshots: [
      {
        src: "/pwa/dashboard-desktop.png",
        sizes: "1280x720",
        type: "image/png",
        form_factor: "wide",
        label: "Starter Pro dashboard workspace",
      },
      {
        src: "/pwa/dashboard-mobile.png",
        sizes: "390x844",
        type: "image/png",
        form_factor: "narrow",
        label: "Starter Pro mobile dashboard",
      },
    ],
  };
}

Inscrire le travailleur de serviceLien vers la section

components/pwa/pwa-register.tsx

"use client";

import { useEffect } from "react";

export function PwaRegister() {
  useEffect(() => {
    if (!("serviceWorker" in navigator)) {
      return;
    }

    const registerServiceWorker = async () => {
      try {
        await navigator.serviceWorker.register("/sw.js");
      } catch {
        // PWA enhancements must never break the core app.
      }
    };

    void registerServiceWorker();
  }, []);

  return null;
}

Ajouter l'route hors ligneLien vers la section

route.txt

app/offline/page.tsx

Actifs nécessairesLien vers la section

Icônes PWA

`icon-192.png`, `icon-512.png` et `maskable-icon-512.png` surfaces d'installation et présentation du lanceur d'applications.

Icône Apple

`apple-icon.png` devrait être disponible à la racine publique pour la prise en charge de l'écran d'accueil iOS.

Captures d' écran

`dashboard-desktop.png` et `dashboard-mobile.png` améliorent la prévisualisation de l'installation et la perception du produit.

Décisions d'établissementLien vers la section

Recommandé

fondations manuel PWA

Starter Pro commence par un travailleur de service explicite, explicite et une stratégie de secours hors ligne claire.

facile à auditer
facile à personnaliser
coffre-fort pour auth et facturation
Pas de cache agressif par défaut

Plus tard

Bibliothèque PWA avancée

Vous pouvez ajouter une bibliothèque PWA plus avancée plus tard si votre produit a besoin d'un comportement de mise en cache ou hors ligne plus profond.

Stratégies de cache runtime
précache automation
invites de mise à jour
Synchronisation d'arrière-plan

Préférez/évitezLien vers la section

Préférez

garder auth et la facturation en ligne d'abord
utiliser un poids léger public/sw.js
utiliser de vraies captures d'écran de tableau de bord
garder NEXT_PUBLIC_APP_URL configurable
test avec pnpm build && pnpm start

Éviter

hardcoding des URL de production dans le code de démarrage réutilisable
mise en cache de Stripe ou de l'état d'abonnement
Utilisation de screenshots surdimensionnés
testing PWA seulement dans pnpm dev
faire des échecs de service worker briser l'application

Questions courantesLien vers la section

Aperçu de PWAComprendre le produit et le rôle commercial des fondations prêtes pour PWA dans Starter Pro.Liste de vérification PWA en productionValidez l'installabilité, les icônes, les captures d'écran, le service worker, le repli hors ligne et la disponibilité de la version.Variables d'environnementConfigurez `NEXT_PUBLIC_APP_URL`, domaines de production, auth, base de données, email, et variables de facturation.ArchitecturePassez en revue les groupes de routes, les mises en page, les modules de fonctionnalités, les limites des serveurs et la structure des produits.