Descarga next pwa - descarga de código fuente next pwa

Complemento PWA de configuración cero para Next.js

Este complemento funciona con Workbox y otras cosas buenas.

Comparte tu increíble proyecto PWA aquí

Características

0️⃣ Configuración cero para registrar y generar trabajador de servicio
Precaché optimizado y caché en tiempo de ejecución
? Maximizar la puntuación del faro
? Ejemplos fáciles de entender
? ¿Soporte completamente fuera de línea con ejemplo de alternativas?
? Utilice la caja de trabajo y la ventana de la caja de trabajo v6
? Trabajar con cookies listas para usar
Solicitudes de rango predeterminado para audios y videos
☕ No se necesita un servidor personalizado para el ejemplo de Next.js 9+
? Ejemplo de participación voluntaria para manejar eventos del ciclo de vida de PWA
? Trabajador personalizado para ejecutar código adicional con división de código y ejemplo de compatibilidad con mecanografiado
Variables de entorno público disponibles en el trabajador personalizado como de costumbre
? Trabajador del servicio de depuración con confianza en el modo de desarrollo sin almacenamiento en caché
? Internacionalización (también conocida como I18N) con next-i18next
? Configurable mediante las mismas opciones de configuración de la caja de trabajo para GenerateSW e InjectManifest
Haga girar un GitPod y pruebe ejemplos a velocidad de cohete
⚡ Admite blitz.js (simplemente agréguelo a blitz.config.js )
? (Experimental) almacenamiento en caché previo .module.js cuando next.config.js tiene experimental.modern configurado en true

NOTA 1 : la versión 2.0.0+ next-pwa solo debería funcionar con next.js 9.1+, y los archivos estáticos solo deberían entregarse a través del directorio public . Esto simplificará las cosas.
NOTA 2 : si encuentra el error TypeError: Cannot read property **'javascript' of undefined** durante la compilación, considere actualizar a webpack5 en next.config.js .

Instalar

Si es nuevo en next.js o react.js , es posible que desee consultar primero el documento next.js o next.js. Luego comience con un ejemplo simple o un ejemplo de aplicación web progresiva en el repositorio next.js.

yarn add next-pwa

Uso básico

Paso 1: con PWA

Actualice o cree next.config.js con

 const withPWA = require ( 'next-pwa' ) ( {
  dest : 'public'
} )

module . exports = withPWA ( {
  // next.js config
} )

Después de ejecutar next build , esto generará dos archivos en su public : workbox-*.js y sw.js , que se entregarán automáticamente de forma estática.

Si está utilizando Next.js versión 9 o posterior, omita las opciones siguientes y continúe con el Paso 2.

Si está utilizando Next.js anterior a la versión 9, deberá elegir una de las siguientes opciones antes de continuar con el Paso 2.

Opción 1: alojar archivos estáticos

Copie los archivos a su servidor de alojamiento de archivos estáticos, para que sean accesibles desde las siguientes rutas: https://yourdomain.com/sw.js y https://yourdomain.com/workbox-*.js .

Un ejemplo es el uso del servicio de alojamiento Firebase para alojar esos archivos de forma estática. Puede automatizar el paso de copia utilizando scripts en su flujo de trabajo de implementación.

Por razones de seguridad, debes alojar estos archivos directamente desde tu dominio. Si el contenido se entrega mediante una redirección, el navegador se negará a ejecutar el trabajador del servicio.

Opción 2: usar un servidor personalizado

Cuando se reciba una solicitud HTTP, pruebe si se solicitan esos archivos y luego devuelva esos archivos estáticos.

Ejemplo 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 } ` )
  } )
} )

La siguiente configuración no tiene nada que ver con el complemento next-pwa y probablemente ya los haya configurado. Si no, continúa y configúralos.

Paso 2: Agregar archivo de manifiesto (ejemplo)

Cree un archivo manifest.json en su carpeta public :

{
  "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 "
}

Paso 3: agregar Head Meta (ejemplo)

Agregue lo siguiente en _document.jsx o _app.tsx , en :

 < 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 " />

Consejo: coloque la metaetiqueta del encabezado de viewport en _app.js en lugar de _document.js si la necesita.

 < meta
  name = 'viewport'
  content = 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/ >

Reservas sin conexión

Las alternativas sin conexión son útiles cuando la recuperación falla tanto desde el caché como desde la red, se sirve un recurso almacenado previamente en el caché en lugar de presentar un error desde el navegador.

Para comenzar, simplemente agregue una página /_offline como pages/_offline.js o pages/_offline.jsx o pages/_offline.ts o pages/_offline.tsx . ¡Entonces ya está todo listo! Cuando el usuario está desconectado, todas las páginas que no están almacenadas en caché volverán a '/_offline'.

Utilice este ejemplo para verlo en acción.

next-pwa le ayuda a almacenar en caché esos recursos en la primera carga, luego inyectar un controlador alternativo al complemento handlerDidError en todas las configuraciones runtimeCaching , de modo que los recursos almacenados en caché se entreguen cuando falle la recuperación.

También puede configurar precacheFallback.fallbackURL en su entrada de configuración de runtimeCaching para implementar una funcionalidad similar. La diferencia es que el método anterior se basa en el tipo de recurso, este método se basa en un patrón de URL coincidente. Si esta configuración se establece en la entrada de configuración de runtimeCaching, el respaldo basado en el tipo de recurso se deshabilitará automáticamente para este patrón de URL en particular para evitar conflictos.

Configuración

Hay opciones que puede usar para personalizar el comportamiento de este complemento agregando el objeto pwa en la siguiente configuración en next.config.js :

 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
} )

Opciones disponibles

desactivar: booleano: si se debe desactivar la función pwa en su totalidad
- predeterminado: false
- configure disable: false para que genere un trabajador de servicio tanto en dev como en prod
- establezca disable: true para deshabilitar completamente PWA
- Si no necesita depurar el trabajador del servicio en dev , puede configurar disable: process.env.NODE_ENV === 'development'
registrarse: booleano: si desea permitir que este complemento registre al trabajador del servicio por usted
- predeterminado a true
- establecido en false cuando desee manejar el registro del trabajador del servicio usted mismo, esto se puede hacer en componentDidMount de su aplicación raíz. puedes considerar el registro.js como ejemplo.
alcance: cadena - alcance de la URL para pwa
- predeterminado: basePath en next.config.js o /
- configúrelo en /app para que la ruta en /app sea PWA mientras que otras no lo sean
sw: cadena - nombre del archivo de script del trabajador del servicio
- predeterminado: /sw.js
- establezca otro nombre de archivo si desea personalizar el nombre del archivo de salida
runtimeCaching: estrategias de almacenamiento en caché (matriz o función de devolución de llamada)
- predeterminado: consulte la sección Almacenamiento en caché en tiempo de ejecución para conocer la configuración predeterminada
- acepta una variedad de objetos de entrada de caché, siga la estructura aquí
- Nota: el orden de la matriz es importante. La primera regla que coincide es efectiva. Por lo tanto, SIEMPRE coloque las reglas con un alcance mayor detrás de las reglas con un alcance más pequeño y específico.
publicExcludes: una matriz de cadenas de patrones globales para excluir archivos de la carpeta public del almacenamiento en caché previo.
- predeterminado: ['!noprecache/**/*'] - esto significa que el comportamiento predeterminado almacenará en caché todos los archivos dentro de su carpeta public excepto los archivos dentro de la carpeta /public/noprecache . Simplemente puede colocar archivos dentro de esa carpeta para no almacenarlos en caché sin configurar esto.
- ejemplo: ['!img/super-large-image.jpg', '!fonts/not-used-fonts.otf']
buildExcludes: una serie de patrones o funciones adicionales para excluir archivos del almacenamiento previo en caché en la carpeta .next/static (o su compilación personalizada)
- por defecto: []
- ejemplo: [/chunks/images/.*$/] - No almacene en caché los archivos en .next/static/chunks/images (recomiendo esto para trabajar con el complemento next-optimized-images )
- doc: Matriz de (cadena, RegExp o función()). Uno o más especificadores utilizados para excluir activos del manifiesto de caché previa. Esto se interpreta siguiendo las mismas reglas que la opción de exclusión estándar de Webpack.
cacheStartUrl: si se debe almacenar en caché la URL de inicio
- predeterminado: true
- discusión sobre el caso de uso para no almacenar en caché la URL de inicio
DynamicStartUrl: si su URL de inicio devuelve un documento HTML diferente en un estado diferente (como iniciado sesión o no iniciado), esto debe establecerse en verdadero.
- predeterminado: true
- efectivo cuando cacheStartUrl se establece en true
- Recomendación: configúrelo en falso si su URL de inicio siempre devuelve el mismo documento HTML, entonces la URL de inicio se almacenará en caché previamente, esto ayudará a acelerar la primera carga.
DynamicStartUrlRedirect: si su URL de inicio redirige a otra ruta como /login , se recomienda configurar esta URL redirigida para obtener la mejor experiencia de usuario.
- predeterminado: undefined
- efectivo cuando dynamicStartUrlRedirect se establece en true
respaldos: configura rutas almacenadas en caché previas para el respaldo cuando tanto el caché como la red no están disponibles para servir recursos.
- Si solo necesita una página alternativa sin conexión, simplemente cree una página /_offline como pages/_offline.js y estará listo, no es necesaria ninguna configuración.
- predeterminado: object
  - fallbacks.document : ruta alternativa para el documento (página), por defecto /_offline si creó esa página
  - fallbacks.image : ruta alternativa para la imagen, por defecto ninguna
  - fallbacks.audio : ruta alternativa para audio, por defecto ninguna
  - fallbacks.video : ruta alternativa para vídeo, por defecto ninguna
  - fallbacks.font : ruta alternativa para la fuente, por defecto ninguna
cacheOnFrontEndNav: habilita el caché de ruta adicional cuando navegas entre páginas con next/link en la interfaz. Consulte este ejemplo para conocer el contexto sobre por qué se implementa esto.
- predeterminado: false
- Nota: esto mejora la experiencia del usuario en casos de uso especiales, pero también agrega algunos gastos generales debido a llamadas de red adicionales; le sugiero que considere esto como una compensación.
~~subdomainPrefix: cadena: prefijo de URL para permitir alojar archivos estáticos en un subdominio~~
- ~~predeterminado: "" - es decir, predeterminado sin prefijo~~
- ~~ejemplo: /subdomain si la aplicación está alojada en example.com/subdomain~~
- obsoleto, use basePath en su lugar
reloadOnOnline: cambia el comportamiento de la aplicación cuando el dispositivo detecta que ha vuelto a estar "en línea" y tiene una conexión de red. Indique si la aplicación debe llamar location.reload() para actualizar la aplicación.
- predeterminado: true
customWorkerDir: personaliza el directorio donde next-pwa busca una implementación de trabajador personalizado para agregar al trabajador de servicio generado por workbox. Para obtener más información, consulte el ejemplo del trabajador personalizado.
- predeterminado: worker

Otras opciones

next-pwa usa workbox-webpack-plugin , otras opciones que también podrían incluirse en el objeto pwa se pueden encontrar EN LA DOCUMENTACIÓN para GenerateSW e InjectManifest. Si especifica swSrc , se utilizará el complemento InjectManifest ; de lo contrario, se utilizará GenerateSW para generar el trabajador del servicio.

Almacenamiento en caché en tiempo de ejecución

next-pwa usa un caché.js de tiempo de ejecución predeterminado

Existe una gran posibilidad de que desee personalizar sus propias reglas de almacenamiento en caché en tiempo de ejecución. No dude en copiar el archivo cache.js predeterminado y personalizar las reglas como desee. No olvide inyectar las configuraciones en su configuración pwa en next.config.js .

Aquí está el documento sobre cómo escribir configuraciones de almacenamiento en caché en tiempo de ejecución, incluidas las funciones de sincronización en segundo plano y actualización de transmisión, ¡y más!

Consejos

Patrón de UX común para pedirle al usuario que recargue cuando se instala un nuevo trabajador de servicio
Utilice una convención como {command: 'doSomething', message: ''} objeto cuando postMessage al trabajador del servicio. De modo que en el oyente, podría realizar múltiples tareas diferentes usando if...else... .
Cuando esté depurando el trabajador del servicio, clean application cache para reducir algunos errores poco frecuentes.
Si está redirigiendo al usuario a otra ruta, tenga en cuenta que, de forma predeterminada, el cuadro de trabajo solo almacena en caché la respuesta con estado HTTP 200; si realmente desea almacenar en caché la página redirigida para la ruta, puede especificarlo en runtimeCaching como options.cacheableResponse.statuses=[200,302] .
Al depurar problemas, es posible que desee formatear el archivo sw.js generado para descubrir qué está pasando realmente.
Fuerce next-pwa a generar la compilación de producción de la caja de trabajo especificando la opción mode: 'production' en la sección pwa de next.config.js . Aunque next-pwa genera automáticamente la compilación de desarrollo de la caja de trabajo durante el desarrollo (ejecutando next ) y la compilación de producción de la caja de trabajo durante la producción (ejecutando next build y next start ). Es posible que aún quieras forzar la compilación en producción incluso durante el desarrollo de tu aplicación web por el siguiente motivo:
1. Reducir el ruido de la tala debido al aumento de la producción no incluye la tala.
2. Mejore un poco el rendimiento debido a que la compilación de producción está optimizada y minimizada.
Si solo desea deshabilitar el registro del cuadro de trabajo mientras se mantiene el desarrollo durante el desarrollo, simplemente coloque self.__WB_DISABLE_DEV_LOGS = true en su worker/index.js (cree uno si no tiene uno).
Es común que los desarrolladores tengan que usar la cadena userAgent para determinar si los usuarios están usando Safari/iOS/MacOS o alguna otra plataforma, la biblioteca ua-parser-js es una buena amiga para ese propósito.