next offline
1.0.0
Use la caja de trabajo con next.js y
¡Habilite fácilmente la funcionalidad fuera de línea en su aplicación!
$ npm install --save next-offline$ yarn add next-offline Hay dos cosas importantes para configurar, primero necesitamos next-offline para envolver su próxima configuración.
Si aún no lo ha hecho, cree un next.config.js en su proyecto.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
...
}
module . exports = withOffline ( nextConfig )A continuación, debemos asegurarnos de que nuestra aplicación esté sirviendo correctamente al trabajador del servicio, esta configuración depende de cómo esté alojando su aplicación. Hay documentación a continuación. Si no está utilizando ahora 2.0, el ejemplo ahora 1.0 debería funcionar en la mayoría de las circunstancias.
Debido a que los trabajadores de servicios son tan poderosos, la API tiene algunas restricciones incorporadas. Por ejemplo, los trabajadores de servicios deben ser atendidos en el dominio en el que se están utilizando: no puede usar un CDN.
Querrá utilizar la API SILT.JS Custom Server. La forma más fácil de hacerlo es crear un server.js que se ve así:
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 } ` )
} )
} )Puede leer más sobre servidores personalizados en los documentos next.js
Si no está alojando ahora, probablemente seguiría el enfoque ahora 1.0 porque la API de servidor personalizado puede habilitar mucha funcionalidad, simplemente no funciona bien con ahora 2.0? ️
Porque ahora 2.0 funciona tan diferente a la versión anterior, también lo hace el servicio al trabajador de servicio. Hay algunas formas diferentes de hacer esto, pero recomendaría revisar esta aplicación de ejemplo ahora2. Los cambios a tener en cuenta están en ahora.json y next.config.js.
De forma predeterminada next-offline registrará un trabajador de servicio con el script a continuación, esto se agrega automáticamente al paquete del lado del cliente una vez que se invoca withOffline .
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 )
} )
} )
} Alternativa al tiempo de compilación, puede tomar el control de registrar/no registrarse en su código de aplicación utilizando el módulo next-offline/runtime .
import { register , unregister } from 'next-offline/runtime'
class App extends React . Component {
componentDidMount ( ) {
register ( )
}
componentWillUnmount ( ) {
unregister ( )
}
. .
}Puede optar por pasar la ruta y el alcance del trabajador de servicio si es necesario.
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 está manejando el registro por su cuenta, pase dontAutoRegisterSw al siguiente.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( { dontAutoRegisterSw : true } ) Si eres nuevo en la caja de trabajo, recomendaría leer esta guía rápida: cualquier cosa dentro de workboxOpts se pasará a workbox-webpack-plugin .
Defina un objeto workboxOpts en su next.config.js y se pasará a Workbox-Webpack-Plugin. Workbox es lo que usa next-offline debajo del capó para generar el trabajador de servicio, puede obtener más información al respecto aquí.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
workboxOpts : {
...
}
}
module . exports = withOffline ( nextConfig )Además de las opciones de caja de trabajo, Next-Offline tiene algunas opciones integradas en las banderas para brindarle un control de granos más fino sobre cómo se genera su trabajador de servicio.
| Nombre | Tipo | Descripción | Por defecto |
|---|---|---|---|
| Genadora | Booleano | Si False, Next-Offline no generará un trabajador de servicio y, en su lugar, intentará modificar el archivo que se encuentra en Workboxopts.swsrc utilizando Workbox [inyecting complemento] (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin) | verdadero |
| Dontautoregistersw | Booleano | Si es verdadero, Next-Offline no presionará automáticamente el script de registro en el código de aplicación. Esto es necesario si está utilizando el registro de tiempo de ejecución o está manejando el registro por su cuenta. | FALSO |
| devswsrc | Cadena | Ruta para estar registrada por Next-Offline durante el desarrollo. Por defecto, el siguiente infline registrará un NOOP durante el desarrollo | FALSO |
| generarindevmode | Booleano | Si es cierto, el trabajador de servicio también se generará en modo de desarrollo. De lo contrario, se utilizará el trabajador de servicio definido en DevSWSRC. | FALSO |
| Registerswprefix | Cadena | Si su trabajador de servicio no está en el nivel raíz de su aplicación, esto puede ayudarlo a prefijar la ruta. Esto es útil si desea su trabajador de servicio en foobar.com/my/long/path/service-worker.js. Esto afecta el [alcance] (https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope) de su trabajador de servicio. | FALSO |
| alcance | Cadena | Esto se pasa al trabajador de servicio registrado automáticamente que permite aumentar o disminuir de lo que el trabajador del servicio tiene control. | "/" |
Por defecto, next-offline tiene la siguiente estrategia de almacenamiento en caché de tiempo de ejecución general. Si personaliza next-offline en workboxOpts , el comportamiento predeterminado no se pasará a workbox-webpack-plugin . Este artículo es excelente para desglosar varias recetas de caché diferentes.
{
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 su aplicación no vive en la raíz de su dominio, puede usar registerSwPrefix . Esto es útil si su aplicación está en Domain.com/my/custom/path porque, por defecto, next-offline supone que su aplicación está en Domain.com e intentará registrar dominio.com/service-worker.js. No podemos apoyar el uso de assetPrefix porque los trabajadores de servicios deben ser atendidos en el dominio de la raíz. Para un desglose técnico sobre esa limitación, consulte el siguiente enlace: ¿Es posible atender a los trabajadores de servicios de CDN/origen remoto?
De forma predeterminada, next-offline precolcará todos los archivos emitidos de Siguiente.JS Webpack y los estáticos definidos por el usuario (dentro /static ), esencialmente todo lo que también se exporta.
Si desea incluir algo más o cambiar el origen de sus archivos estáticos, use las opciones de caja de trabajo dadas:
workboxOpts: {
modifyURLPrefix : {
'app' : assetPrefix ,
} ,
runtimeCaching : { ... }
} Por defecto, next-offline agregará un trabajador de servicio no-op en el desarrollo. Si desea proporcionar su propio Pase su FilePath a la opción devSwSrc . Esto es particularmente útil si desea probar notificaciones de push web en el desarrollo, por ejemplo.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( {
devSwSrc : '/path/to/my/dev/service-worker.js'
} ) Puede deshabilitar este comportamiento estableciendo la opción generateInDevMode en true .
En [email protected] hemos reescrito la funcionalidad de exportación para que funcione en más casos, de manera más confiable, ¡con menos código gracias a algunas de las adiciones en el próximo 7.0.0!
Puede leer más sobre la exportación en los documentos next.js, pero Next Offline solo debe funcionar ™ ️.
Si está actualizando a la última versión de next-offline , recomiendo mirar lo que se ha agregado/cambiado dentro de la caja de trabajo en las versiones 5.x junto con la versión 4.0 que incluyó los cambios de ruptura. La API de la próxima fuera de línea no ha cambiado, ¡pero una dependencia central!
¿Preguntas? ¿Comentario? por favor hágamelo saber
next-offline es un Lerna Monorepo que utiliza espacios de trabajo de hilo. Después de clonar el repositorio, ejecute lo siguiente
$ yarn bootstrap¡Esto asegurará que su versión de desarrollo de Next-Offline estéilizada en los ejemplos y pruebas que deberían permitirle realizar cambios rápidamente!
WWWWWW||WWWWWW
W W W||W W W
||
( OO )__________
/ |
/o o| MIT
___/||_||__||_|| *
|| || || ||
_||_|| _||_||
(__|__|(__|__|
Copyright © 2017-presente Jack Hanford, [email protected]
El permiso se otorga, de forma gratuita, a cualquier persona que obtenga una copia de este software y los archivos de documentación asociados (el 'software'), para tratar el software sin restricción, incluidos los derechos de los derechos de usar, copiar, modificar, fusionar, publicar, distribuir, sublicense y/o vender copias del software, y para permitir que las personas a quienes se les proporciona el software para hacerlo, sujeto a las siguientes condiciones: las siguientes condiciones: las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o porciones sustanciales del software.
El software se proporciona 'tal cual', sin garantía de ningún tipo, expresa o implícita, incluidas, entre otros, las garantías de comerciabilidad, idoneidad para un propósito particular y no infracción. En ningún caso los autores o titulares de derechos de autor serán responsables de cualquier reclamo, daños u otra responsabilidad, ya sea en una acción de contrato, agravio o de otra manera, que surge, de o en relación con el software o el uso u otros tratos en el software.
