next offline
1.0.0
Verwenden Sie Workbox mit Next.js und
Aktivieren Sie die Offline -Funktionalität in Ihrer Anwendung einfach!
$ npm install --save next-offline$ yarn add next-offline Es gibt zwei wichtige Dinge, die eingerichtet werden müssen. Zuerst brauchen wir next-offline um Ihre nächste Konfiguration zu wickeln.
Wenn Sie es noch nicht getan haben, erstellen Sie in Ihrem Projekt einen next.config.js .
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
...
}
module . exports = withOffline ( nextConfig )Als nächstes müssen wir sicherstellen, dass unsere Bewerbung dem Servicemitarbeiter ordnungsgemäß bedient. Diese Setup hängt davon ab, wie Sie Ihre Bewerbung hosten. Nachfolgend finden Sie eine Dokumentation. Wenn Sie jetzt noch nicht 2.0 verwenden, sollte das Beispiel 1.0 in den meisten Umständen funktionieren.
Da Dienstangestellte so leistungsfähig sind, hat die API einige Einschränkungen eingebaut. Zum Beispiel müssen Servicearbeiter auf der Domain serviert werden, auf der sie verwendet werden - Sie können keine CDN verwenden.
Sie möchten die nächste API für benutzerdefinierte Server -Server verwenden. Der einfachste Weg, dies zu tun, besteht darin, einen server.js zu erstellen. Js, der so aussieht:
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
// handle GET request to /service-worker.js
if ( pathname === '/service-worker.js' ) {
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 } ` )
} )
} )Sie können mehr über benutzerdefinierte Server in den nächsten.js -Dokumenten lesen
Wenn Sie jetzt nicht mit hosten
Denn jetzt funktioniert 2.0 so unterschiedlich von der vorherigen Version, auch wenn der Servicemitarbeiter bedient wird. Es gibt verschiedene Möglichkeiten, dies zu tun, aber ich würde empfehlen, diese now2 -Beispiel -App anzusehen. Die Änderungen, die sich bewusst sind, sind in the Now.json und Next.config.js.
next-offline registrieren Sie einen Servicearbeiter mit dem folgenden Skript. Dies wird automatisch zu Ihrem Client-Seitenpaket hinzugefügt, sobald withOffline aufgerufen wird.
if ( 'serviceWorker' in navigator ) {
window . addEventListener ( 'load' , function ( ) {
navigator . serviceWorker . register ( '/service-worker.js' , { scope : '/' } ) . then ( function ( registration ) {
console . log ( 'SW registered: ' , registration )
} ) . catch ( function ( registrationError ) {
console . log ( 'SW registration failed: ' , registrationError )
} )
} )
} Alternative zur Kompilierungszeit können Sie die Kontrolle über die Registrierung/Nichtregistrierung in Ihrem Anwendungscode übernehmen, indem Sie das next-offline/runtime verwenden.
import { register , unregister } from 'next-offline/runtime'
class App extends React . Component {
componentDidMount ( ) {
register ( )
}
componentWillUnmount ( ) {
unregister ( )
}
. .
}Sie können bei Bedarf den Pfad und den Umfang des Service Worker bestehen.
import { register , unregister } from 'next-offline/runtime'
class App extends React . Component {
componentDidMount ( ) {
/**
* Default service worker path is '/service-worker.js'
* Refer https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register for default scope rules
*
*/
register ( '/sub_folder/service-worker.js' , { scope : '/sub_folder' } )
}
componentWillUnmount ( ) {
unregister ( )
}
. .
} Wenn Sie die Registrierung alleine bearbeiten, geben Sie dontAutoRegisterSw an die nächste Offline weiter.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( { dontAutoRegisterSw : true } ) Wenn Sie neu in der Workbox sind, würde ich empfehlen, diese Schnellanleitung zu lesen-alles innerhalb von workboxOpts wird an workbox-webpack-plugin übergeben.
Definieren Sie ein workboxOpts Objekt in Ihrem next.config.js und es wird an Workbox-Webpack-Plugin übergeben. Workbox ist das, was next-offline unter der Haube verwendet wird, um den Servicearbeiter zu generieren. Hier erfahren Sie mehr darüber.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
workboxOpts : {
...
}
}
module . exports = withOffline ( nextConfig )Zusätzlich zu den Workbox-Optionen verfügt die Nächste-Offline-Optionen in Flags, mit denen Sie eine feinere Getreidesteuerung über die Generierung Ihres Servicemitarbeiters erhalten.
| Name | Typ | Beschreibung | Standard |
|---|---|---|---|
| erzeugt | Boolean | Wenn dies falsch ist, generiert Next-Offline keinen Servicearbeiter und versucht stattdessen, die in workboxopts.swsrc gefundene Datei mithilfe von Workboxs [Inject Plugin] (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injanifest_plugin) zu ändern. | WAHR |
| dontautoregistersw | Boolean | Wenn die Nächste nicht automatisch das Registrierungsskript in den Anwendungscode drückt. Dies ist erforderlich, wenn Sie die Laufzeitregistrierung verwenden oder selbst die Registrierung bearbeiten. | FALSCH |
| devswsrc | Saite | Pfad, der während der Entwicklung nach Next-Offline registriert werden soll. Standardmäßig wird in der nächsten Offline eine Noop während der Entwicklung registriert | FALSCH |
| generateIndevMode | Boolean | Wenn der Servicearbeiter wahr ist, wird auch der Servicearbeiter im Entwicklungsmodus generiert. Andernfalls wird der in DevSWSRC definierte Serviceleistung verwendet. | FALSCH |
| RegisterSwprefix | Saite | Wenn Ihr Servicearbeiter nicht auf der Stammebene Ihrer Anwendung liegt, kann dies Ihnen helfen, den Pfad zu präfixen. Dies ist nützlich, wenn Sie Ihren Servicemitarbeiter unter foobar.com/my/long/path/service-worker.js möchten. Dies wirkt sich auf die [Scope] (https://developers.google.com/web/ilt/pwa/inTroduction-to-service-worker#registration_and_scope) aus Ihrem Servicearbeiter aus. | FALSCH |
| Umfang | Saite | Dies wird an den automatisch registrierten Servicemitarbeiter übergeben, wodurch die Kontrolle über die Kontrolle des Servicemittels erhöht oder verringert wird. | "/" |
Standardmäßig hat next-offline die folgende Decken-Laufzeit-Caching-Strategie. Wenn Sie next-offline mit workboxOpts anpassen, wird das Standardverhalten nicht an workbox-webpack-plugin übergeben. Dieser Artikel ist großartig darin, verschiedene Cache -Rezepte abzubauen.
{
runtimeCaching : [
{
urlPattern : / ^https?.* / ,
handler : 'NetworkFirst' ,
options : {
cacheName : 'offlineCache' ,
expiration : {
maxEntries : 200
}
}
}
]
} // next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( {
workboxOpts : {
runtimeCaching : [
{
urlPattern : / .png$ / ,
handler : 'CacheFirst'
} ,
{
urlPattern : / api / ,
handler : 'NetworkFirst' ,
options : {
cacheableResponse : {
statuses : [ 0 , 200 ] ,
headers : {
'x-test' : 'true'
}
}
}
}
]
}
} ) Wenn Ihre Bewerbung nicht auf der Wurzel Ihrer Domain lebt, können Sie registerSwPrefix verwenden. Dies ist hilfreich, wenn Ihre Bewerbung auf domain.com/my/custom/path ist, da standardmäßig next-offline angenommen wird, dass Ihre Bewerbung auf Domain.com ist und versucht, Domain.com/service-worker.js zu registrieren. Wir können die Verwendung assetPrefix nicht unterstützen, da Dienstangestellte auf der Stammdomäne zugestellt werden müssen. Für eine technische Aufschlüsselung dieser Einschränkung finden Sie den folgenden Link: Ist es möglich, Service -Mitarbeitern vor CDN/Remote -Herkunft zu bedienen?
Standardmäßig werden alle next-offline /static
Wenn Sie noch einige einfügen oder den Ursprung Ihrer statischen Dateien ändern möchten, verwenden Sie die angegebenen Workbox -Optionen:
workboxOpts: {
modifyURLPrefix : {
'app' : assetPrefix ,
} ,
runtimeCaching : { ... }
} Standardmäßig wird next-offline einen No-Op-Service-Mitarbeiter in der Entwicklung hinzugefügt. Wenn Sie Ihren eigenen Pass für devSwSrc -Option angeben möchten. Dies ist besonders nützlich, wenn Sie beispielsweise Web -Push -Benachrichtigungen in der Entwicklung testen möchten.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( {
devSwSrc : '/path/to/my/dev/service-worker.js'
} ) Sie können dieses Verhalten deaktivieren, indem Sie die Option " generateInDevMode in true festlegen.
In [email protected] haben wir die Exportfunktionalität in weiteren Fällen umgeschrieben, zuverlässiger, mit weniger Code dank einiger Ergänzungen in der nächsten 7.0.0!
Sie können mehr über den Exportieren bei nächsten.js -Dokumenten lesen, aber das nächste Offline sollte einfach ™ ️ arbeiten.
Wenn Sie auf die neueste Version von next-offline aktualisieren, empfehle ich, in 5.x-Versionen zusammen mit der Release 4.0, die die Breaking-Änderungen beinhaltete, zu sehen, was in der Workbox in 5.x-Versionen hinzugefügt/geändert wurde. Die API von Next Offline hat sich nicht geändert, aber eine Kernabhängigkeit hat es!
Fragen? Rückmeldung? Bitte lassen Sie es mich wissen
next-offline ist ein Lerna Monorepo, der Garnarbeitsbereiche verwendet. Führen Sie nach dem Klonen des Repos Folgendes aus
$ yarn bootstrapDadurch wird sichergestellt, dass Ihre Entwicklungsversion von Next-Offline in den Beispielen und Tests symliziert wird, mit denen Sie schnell Änderungen vornehmen können!
WWWWWW||WWWWWW
W W W||W W W
||
( OO )__________
/ |
/o o| MIT
___/||_||__||_|| *
|| || || ||
_||_|| _||_||
(__|__|(__|__|
Copyright © 2017-Present Jack Hanford, [email protected]
Die Erlaubnis wird hiermit einer Person, die eine Kopie dieser Software und zugehörigen Dokumentationsdateien (die 'Software') erhält, kostenlos erteilt, um die Software ohne Einschränkung zu behandeln, einschließlich der Verwendung der Rechte zur Verwendung, kopieren, modifizieren, verschmolzen, veröffentlichen, veröffentlichen, verteilen, untermessen und/oder Kopien der Software verkaufen, um Personen, die auf die Bedingungen zu versehen sind, zu den Bedingungen, die an die folgenden Bedingungen nachgefragt werden.
Die oben genannte Copyright -Mitteilung und diese Erlaubnisbekanntmachung müssen in alle Kopien oder wesentlichen Teile der Software enthalten sein.
Die Software wird "wie ist" ohne Garantie jeglicher Art, ausdrücklich oder stillschweigend bereitgestellt, einschließlich, aber nicht beschränkt auf die Gewährleistung der Handelsfähigkeit, die Eignung für einen bestimmten Zweck und die Nichtverletzung. In keinem Fall sind die Autoren oder Urheberrechtsinhaber für Ansprüche, Schäden oder andere Haftungen haftbar, sei es in einer Vertragsklage, unerbittlich oder auf andere Weise, die sich aus oder im Zusammenhang mit der Software oder anderen Geschäften in der Software ergeben.
