next pwa
5.6.1
Dieses Plugin wird von Workbox und anderen guten Dingen unterstützt.
Teilen Sie hier Ihr großartiges PWA-Projekt
Merkmale
next-i18next -Beispielblitz.config.js hinzufügen).module.js , wenn experimental.modern next.config.js auf true gesetzt istHINWEIS 1 –
next-pwaVersion 2.0.0+ sollte nur mitnext.js9.1+ funktionieren und statische Dateien sollten nur überpublicVerzeichnis bereitgestellt werden. Dies wird die Dinge einfacher machen.HINWEIS 2 – Wenn beim Erstellen der Fehler
TypeError: Cannot read property **'javascript' of undefined**auftritt, ziehen Sie bitte ein Upgrade auf webpack5 innext.config.jsin Betracht.
Wenn Sie mit
next.jsoderreact.jsnoch nicht vertraut sind, sollten Sie zunächst das Dokument „Lernen Sie Next.js“ oder „Next.js“ lesen. Beginnen Sie dann mit einem einfachen Beispiel oder einem Progressive-Web-App-Beispiel im next.js-Repository.
yarn add next-pwa Aktualisieren oder erstellen Sie next.config.js mit
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
} )
module . exports = withPWA ( {
// next.js config
} ) Nach der Ausführung von next build werden zwei Dateien in Ihrer public generiert: workbox-*.js und sw.js , die automatisch statisch bereitgestellt werden.
Wenn Sie Next.js Version 9 oder neuer verwenden, überspringen Sie die folgenden Optionen und fahren Sie mit Schritt 2 fort.
Wenn Sie Next.js verwenden, das älter als Version 9 ist, müssen Sie unten eine Option auswählen, bevor Sie mit Schritt 2 fortfahren.
Kopieren Sie Dateien auf Ihren statischen Datei-Hosting-Server, sodass sie über die folgenden Pfade zugänglich sind: https://yourdomain.com/sw.js und https://yourdomain.com/workbox-*.js .
Ein Beispiel ist die Verwendung des Firebase-Hosting-Dienstes zum statischen Hosten dieser Dateien. Sie können den Kopierschritt mithilfe von Skripts in Ihrem Bereitstellungsworkflow automatisieren.
Aus Sicherheitsgründen müssen Sie diese Dateien direkt von Ihrer Domain aus hosten. Wenn der Inhalt über eine Umleitung bereitgestellt wird, verweigert der Browser die Ausführung des Service Workers.
Wenn eine HTTP-Anfrage empfangen wird, testen Sie, ob diese Dateien angefordert werden, und geben Sie dann diese statischen Dateien zurück.
Beispiel server.js
const { createServer } = require ( 'http' )
const { join } = require ( 'path' )
const { parse } = require ( 'url' )
const next = require ( 'next' )
const app = next ( { dev : process . env . NODE_ENV !== 'production' } )
const handle = app . getRequestHandler ( )
app . prepare ( ) . then ( ( ) => {
createServer ( ( req , res ) => {
const parsedUrl = parse ( req . url , true )
const { pathname } = parsedUrl
if ( pathname === '/sw.js' || / ^/(workbox|worker|fallback)-w+.js$ / . test ( pathname ) ) {
const filePath = join ( __dirname , '.next' , pathname )
app . serveStatic ( req , res , filePath )
} else {
handle ( req , res , parsedUrl )
}
} ) . listen ( 3000 , ( ) => {
console . log ( `> Ready on http://localhost: ${ 3000 } ` )
} )
} )Das folgende Setup hat nichts mit
next-pwa-Plugin zu tun und Sie haben es wahrscheinlich bereits eingerichtet. Wenn nicht, fahren Sie fort und richten Sie sie ein.
Erstellen Sie eine manifest.json Datei in Ihrem public Ordner:
{
"name" : " PWA App " ,
"short_name" : " App " ,
"icons" : [
{
"src" : " /icons/android-chrome-192x192.png " ,
"sizes" : " 192x192 " ,
"type" : " image/png " ,
"purpose" : " any maskable "
},
{
"src" : " /icons/android-chrome-384x384.png " ,
"sizes" : " 384x384 " ,
"type" : " image/png "
},
{
"src" : " /icons/icon-512x512.png " ,
"sizes" : " 512x512 " ,
"type" : " image/png "
}
],
"theme_color" : " #FFFFFF " ,
"background_color" : " #FFFFFF " ,
"start_url" : " / " ,
"display" : " standalone " ,
"orientation" : " portrait "
} Fügen Sie Folgendes in _document.jsx oder _app.tsx in hinzu:
< meta name =" application-name " content =" PWA App " />
< meta name =" apple-mobile-web-app-capable " content =" yes " />
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " />
< meta name =" apple-mobile-web-app-title " content =" PWA App " />
< meta name =" description " content =" Best PWA App in the world " />
< meta name =" format-detection " content =" telephone=no " />
< meta name =" mobile-web-app-capable " content =" yes " />
< meta name =" msapplication-config " content =" /icons/browserconfig.xml " />
< meta name =" msapplication-TileColor " content =" #2B5797 " />
< meta name =" msapplication-tap-highlight " content =" no " />
< meta name =" theme-color " content =" #000000 " />
< link rel =" apple-touch-icon " href =" /icons/touch-icon-iphone.png " />
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" /icons/touch-icon-ipad.png " />
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" /icons/touch-icon-iphone-retina.png " />
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" /icons/touch-icon-ipad-retina.png " />
< link rel =" icon " type =" image/png " sizes =" 32x32 " href =" /icons/favicon-32x32.png " />
< link rel =" icon " type =" image/png " sizes =" 16x16 " href =" /icons/favicon-16x16.png " />
< link rel =" manifest " href =" /manifest.json " />
< link rel =" mask-icon " href =" /icons/safari-pinned-tab.svg " color =" #5bbad5 " />
< link rel =" shortcut icon " href =" /favicon.ico " />
< link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Roboto:300,400,500 " />
< meta name =" twitter:card " content =" summary " />
< meta name =" twitter:url " content =" https://yourdomain.com " />
< meta name =" twitter:title " content =" PWA App " />
< meta name =" twitter:description " content =" Best PWA App in the world " />
< meta name =" twitter:image " content =" https://yourdomain.com/icons/android-chrome-192x192.png " />
< meta name =" twitter:creator " content =" @DavidWShadow " />
< meta property =" og:type " content =" website " />
< meta property =" og:title " content =" PWA App " />
< meta property =" og:description " content =" Best PWA App in the world " />
< meta property =" og:site_name " content =" PWA App " />
< meta property =" og:url " content =" https://yourdomain.com " />
< meta property =" og:image " content =" https://yourdomain.com/icons/apple-touch-icon.png " />
Tipp: Fügen Sie das
viewportHead-Meta-Tag bei Bedarf in_app.jsund nicht in_document.jsein.
< meta
name = 'viewport'
content = 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/ > Offline-Fallbacks sind nützlich, wenn der Abruf sowohl aus dem Cache als auch aus dem Netzwerk fehlgeschlagen ist und eine vorab zwischengespeicherte Ressource bereitgestellt wird, anstatt einen Fehler vom Browser anzuzeigen.
Um zu beginnen, fügen Sie einfach eine /_offline Seite hinzu, z. B. pages/_offline.js oder pages/_offline.jsx oder pages/_offline.ts oder pages/_offline.tsx . Dann sind Sie startklar! Wenn der Benutzer offline ist, werden alle Seiten, die nicht zwischengespeichert sind, auf „/_offline“ zurückgesetzt.
Verwenden Sie dieses Beispiel, um es in Aktion zu sehen
next-pwa hilft Ihnen, diese Ressourcen beim ersten Laden vorab zwischenzuspeichern und dann einen Fallback-Handler in handlerDidError Plugin in alle runtimeCaching Konfigurationen einzufügen, sodass vorab zwischengespeicherte Ressourcen bereitgestellt werden, wenn der Abruf fehlschlägt.
Sie können auch precacheFallback.fallbackURL in Ihrem runtimeCaching-Konfigurationseintrag einrichten, um ähnliche Funktionen zu implementieren. Der Unterschied besteht darin, dass die obige Methode auf dem Ressourcentyp basiert und diese Methode auf einem übereinstimmenden URL-Muster basiert. Wenn diese Konfiguration im runtimeCaching-Konfigurationseintrag festgelegt ist, wird der ressourcentypbasierte Fallback für dieses bestimmte URL-Muster automatisch deaktiviert, um Konflikte zu vermeiden.
Es gibt Optionen, mit denen Sie das Verhalten dieses Plugins anpassen können, indem Sie pwa Objekt in der nächsten Konfiguration in next.config.js hinzufügen:
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
// disable: process.env.NODE_ENV === 'development',
// register: true,
// scope: '/app',
// sw: 'service-worker.js',
//...
} )
module . exports = withPWA ( {
// next.js config
} )falsedisable: false fest, damit sowohl in dev als auch in prod ein Service-Worker generiert wirddisable: true um PWA vollständig zu deaktivierendev nicht debuggen müssen, können Sie disable: process.env.NODE_ENV === 'development'truefalse , wenn Sie die Registrierung von Servicemitarbeitern selbst durchführen möchten. Dies kann in componentDidMount Ihrer Root-App erfolgen. Sie können die Datei „register.js“ als Beispiel betrachten.basePath in next.config.js oder //app setzen, sodass der Pfad unter /app PWA ist, andere hingegen nicht/sw.jspublic Ordner von der Vorabzwischenspeicherung auszuschließen.['!noprecache/**/*'] – das bedeutet, dass das Standardverhalten alle Dateien in Ihrem public Ordner vorab zwischenspeichert, jedoch Dateien im Ordner /public/noprecache . Sie können Dateien einfach in diesem Ordner ablegen, um sie nicht vorab zwischenzuspeichern, ohne dies zu konfigurieren.['!img/super-large-image.jpg', '!fonts/not-used-fonts.otf'].next/static (oder Ihrem benutzerdefinierten Build) auszuschließen[][/chunks/images/.*$/] – Dateien nicht unter .next/static/chunks/images vorab zwischenspeichern (wird dringend empfohlen, um mit next-optimized-images Plugin zu arbeiten)truetruecacheStartUrl auf true gesetzt ist/login umleitet, wird empfohlen, diese umgeleitete URL für die beste Benutzererfahrung einzurichten.undefineddynamicStartUrlRedirect auf true gesetzt ist/_offline -Seite wie pages/_offline.js und schon sind Sie fertig, es ist keine Konfiguration erforderlichobjectfallbacks.document – Fallback-Route für Dokument (Seite), standardmäßig /_offline wenn Sie diese Seite erstellt habenfallbacks.image – Fallback-Route für das Bild, standardmäßig keinefallbacks.audio – Fallback-Route für Audio, standardmäßig keinefallbacks.video – Fallback-Route für Video, standardmäßig keinefallbacks.font – Fallback-Route für Schriftart, standardmäßig keinenext/link im Frontend zwischen Seiten navigieren. Sehen Sie sich dieses Beispiel an, um einen Kontext dazu zu erhalten, warum dies implementiert wird.false"" – dh Standard ohne Präfix/subdomain , wenn die App auf example.com/subdomain gehostet wirdlocation.reload() aufrufen soll, um die App zu aktualisieren.truenext-pwa nach einer benutzerdefinierten Worker-Implementierung sucht, die dem von Workbox generierten Service Worker hinzugefügt werden soll. Weitere Informationen finden Sie im Beispiel für einen benutzerdefinierten Worker.worker next-pwa verwendet workbox-webpack-plugin , andere Optionen, die auch in pwa -Objekt eingefügt werden könnten, finden Sie IN DER DOKUMENTATION für GenerateSW und InjectManifest. Wenn Sie swSrc angeben, wird das InjectManifest -Plugin verwendet, andernfalls wird GenerateSW zum Generieren des Service-Workers verwendet.
next-pwa verwendet einen Standard-Laufzeit-Cache.js
Es besteht eine große Chance, dass Sie Ihre eigenen Laufzeit-Caching-Regeln anpassen möchten. Sie können gerne die Standarddatei cache.js kopieren und die Regeln nach Ihren Wünschen anpassen. Vergessen Sie nicht, die Konfigurationen in next.config.js in Ihre pwa -Konfiguration einzufügen.
Hier ist das Dokument zum Schreiben von Laufzeit-Caching-Konfigurationen, einschließlich Hintergrundsynchronisierungs- und Broadcast-Update-Funktionen und mehr!
{command: 'doSomething', message: ''} wenn postMessage an den Service-Worker senden. Damit kann der Listener mithilfe von if...else... mehrere verschiedene Aufgaben ausführen.clean application cache um einige unzuverlässige Fehler zu reduzieren.runtimeCaching angeben, z. B. options.cacheableResponse.statuses=[200,302] .sw.js Datei formatieren, um herauszufinden, was wirklich vor sich geht.next-pwa einen Worker-Box-Produktions-Build generiert, indem Sie die Option mode: 'production' in Ihrem pwa -Abschnitt von next.config.js angeben. Allerdings generiert next-pwa automatisch den Worker-Box-Entwicklungs-Build während der Entwicklung (durch Ausführen next ) und den Worker-Box-Produktions-Build während der Produktion (durch Ausführen von next build und next start ). Aus folgendem Grund möchten Sie möglicherweise auch während der Entwicklung Ihrer Web-App den Produktions-Build erzwingen:self.__WB_DISABLE_DEV_LOGS = true in Ihre worker/index.js ein (erstellen Sie eine, wenn Sie noch keine haben).userAgent verwenden, um festzustellen, ob Benutzer Safari/iOS/MacOS oder eine andere Plattform verwenden. Die Bibliothek ua-parser-js ist für diesen Zweck ein guter Freund. MIT
