next offline
1.0.0
Utilisez Workbox avec next.js et
Activez facilement les fonctionnalités hors ligne dans votre application!
$ npm install --save next-offline$ yarn add next-offline Il y a deux choses importantes à configurer, nous avons d'abord besoin next-offline pour envelopper votre prochaine configuration.
Si vous ne l'avez pas encore fait, créez un next.config.js dans votre projet.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
...
}
module . exports = withOffline ( nextConfig )Ensuite, nous devons nous assurer que notre application sert correctement le travailleur des services, cette configuration dépend de la façon dont vous hébergez votre application. Il y a une documentation ci-dessous. Si vous n'utilisez pas maintenant 2.0, l'exemple maintenant 1.0 devrait fonctionner dans la plupart des cas.
Parce que les travailleurs des services sont si puissants, l'API a des restrictions intégrées. Par exemple, les travailleurs de service doivent être servis dans le domaine sur lequel ils sont utilisés - vous ne pouvez pas utiliser un CDN.
Vous voudrez utiliser l'API du serveur personnalisé Next.js. La façon la plus simple de le faire est de créer un server.js qui ressemble à ceci:
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 } ` )
} )
} )Vous pouvez en savoir plus sur les serveurs personnalisés dans les documents suivants.
Si vous n'hébergez pas maintenant, je suivrais probablement l'approche maintenant 1.0 parce que l'API du serveur personnalisé peut permettre de nombreuses fonctionnalités, cela ne fonctionne tout simplement pas bien avec maintenant 2.0? ️
Parce que maintenant 2.0 fonctionne si différent de la version précédente, le service du service. Il existe différentes façons de le faire, mais je recommanderais de consulter cet exemple de maintenant 2 exemples. Les modifications à connaître sont dans le NOW.json et next.config.js.
Par défaut, next-offline enregistrera un travailleur de service avec le script ci-dessous, cela est automatiquement ajouté à votre bundle côté client une fois withOffline est invoquée.
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 à la compilation du temps, vous pouvez prendre le contrôle de l'enregistrement / démêlage dans votre code d'application en utilisant le module next-offline/runtime .
import { register , unregister } from 'next-offline/runtime'
class App extends React . Component {
componentDidMount ( ) {
register ( )
}
componentWillUnmount ( ) {
unregister ( )
}
. .
}Vous pouvez choisir de passer le chemin et la portée des travailleurs du service si nécessaire.
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 ( )
}
. .
} Si vous gérez l'enregistrement par vous-même, passez dontAutoRegisterSw à Next-Offline.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( { dontAutoRegisterSw : true } ) Si vous êtes nouveau dans Workbox, je recommanderais de lire ce guide rapide - tout ce qui est à l'intérieur de workboxOpts sera transmis à workbox-webpack-plugin .
Définissez un objet workboxOpts dans votre next.config.js et il sera transmis à Workbox-webpack-Plugin. Workbox est ce que next-offline utilise sous le capot pour générer le travailleur des services, vous pouvez en savoir plus ici.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
workboxOpts : {
...
}
}
module . exports = withOffline ( nextConfig )En plus des options de boîte de travail, Next-Offline propose certaines options intégrées à des drapeaux pour vous donner un contrôle des grains plus fin sur la façon dont votre agent de service est généré.
| Nom | Taper | Description | Défaut |
|---|---|---|---|
| Générationw | Booléen | Si False, Next-Offline ne générera pas de travailleur de service et essaiera plutôt de modifier le fichier trouvé dans Workboxopts.swsrc à l'aide de Workbox [Inject Plugin] (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin) | vrai |
| netautoregistersw | Booléen | Si cela est vrai, Next-Offline ne poussera pas automatiquement le script d'enregistrement dans le code d'application. Cela est nécessaire si vous utilisez l'inscription d'exécution ou si vous gérez l'enregistrement par vous-même. | FAUX |
| Devswsrc | Chaîne | Path à enregistrer par Next Offline pendant le développement. Par défaut, Next-Offline enregistrera un NOOP pendant le développement | FAUX |
| Générer INDEVMODE | Booléen | Si cela est vrai, le travailleur des services sera également généré en mode développement. Sinon, le travailleur de service défini dans DevSWSRC sera utilisé. | FAUX |
| registrewprefix | Chaîne | Si votre agent de service n'est pas au niveau racine de votre application, cela peut vous aider à préfixer le chemin. Ceci est utile si vous souhaitez votre employé de service sur foobar.com/my/long/path/service-worker.js. Cela affecte la [portée] (https://develovers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope) de votre travailleur de service. | FAUX |
| portée | Chaîne | Ceci est transmis au travailleur de service enregistré automatiquement permettant d'augmenter ou de diminuer ce dont le travailleur a le contrôle. | "/" |
Par défaut, next-offline a la stratégie de mise en cache d'exécution de la couverture suivante. Si vous personnalisez next-offline avec workboxOpts , le comportement par défaut ne sera pas transmis dans workbox-webpack-plugin . Cet article est idéal pour décomposer différentes recettes de cache différentes.
{
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'
}
}
}
}
]
}
} ) Si votre application ne vit pas sur la racine de votre domaine, vous pouvez utiliser registerSwPrefix . Ceci est utile si votre application est sur domain.com/my/custom/path car par défaut, next-offline suppose que votre application est sur domain.com et essaiera d'enregistrer domain.com/service-worker.js. Nous ne pouvons pas prendre en charge l'utilisation assetPrefix car les travailleurs du service doivent être servis sur le domaine racine. Pour une ventilation technique sur cette limitation, consultez le lien suivant: Est-il possible de servir les travailleurs de service à partir d'origine CDN / distant?
Par défaut, next-offline précalera tous les fichiers émises Webpack Suit.js et les fichiers statiques définis par l'utilisateur (à l'intérieur /static ) - essentiellement tout ce qui est également exporté.
Si vous souhaitez en inclure plus ou modifier l'origine de vos fichiers statiques, utilisez les options de boîte de travail données:
workboxOpts: {
modifyURLPrefix : {
'app' : assetPrefix ,
} ,
runtimeCaching : { ... }
} Par défaut, next-offline ajoutera un travailleur de service sans opération en développement. Si vous souhaitez fournir votre propre adoption, son option FilePath à devSwSrc . Ceci est particulièrement utile si vous souhaitez tester les notifications push en développement, par exemple.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( {
devSwSrc : '/path/to/my/dev/service-worker.js'
} ) Vous pouvez désactiver ce comportement en définissant l'option generateInDevMode sur true .
Dans [email protected], nous avons réécrit la fonctionnalité d'exportation pour fonctionner dans plus de cas, plus de manière fiable, avec moins de code grâce à certains des ajouts dans le prochain 7.0.0!
Vous pouvez en savoir plus sur l'exportation sur les documents suivants.
Si vous passez à la dernière version de next-offline je recommande de jeter un coup d'œil à ce qui a été ajouté / modifié à l'intérieur de Workbox dans les versions 5.x avec la version 4.0 qui comprenait les changements de rupture. La prochaine API de Offline n'a pas changé, mais une dépendance de base a!
Questions? Retour? S'il vous plaît laissez-moi savoir
next-offline est un Lerna Monorepo qui utilise des espaces de travail YARN. Après avoir cloné le repo, exécutez ce qui suit
$ yarn bootstrapCela garantira que votre version de développement de Next-Offline est systématique dans les exemples et tests qui devraient vous permettre de modifier rapidement!
WWWWWW||WWWWWW
W W W||W W W
||
( OO )__________
/ |
/o o| MIT
___/||_||__||_|| *
|| || || ||
_||_|| _||_||
(__|__|(__|__|
Copyright © 2017-présent Jack Hanford, [email protected]
L'autorisation est accordée gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le `` logiciel ''), pour traiter le logiciel sans restriction, y compris sans limiter les droits d'utilisation, de copie, de modification, de fusion, de publication, de distribution, de sublince et de vente de copies des conditions suivantes: les conditions suivantes:
L'avis de droit d'auteur ci-dessus et le présent avis d'autorisation sont inclus dans toutes les copies ou des parties substantielles du logiciel.
Le logiciel est fourni «tel quel», sans garantie d'aucune sorte, express ou implicite, y compris, mais sans s'y limiter, les garanties de qualité marchande, d'adéquation à un usage particulier et de non-contrefaçon. En aucun cas, les auteurs ou les détenteurs de droits d'auteur ne seront pas responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action de contrat, de délit ou autre, découlant de, hors du logiciel ou de l'utilisation ou d'autres relations dans le logiciel.
