3

PWA con Next js utilizando Workbox

Para usar workbox en next js podemos seguir los siguientes pasos

  1. instalar las dependencias
npm install next-with-workbox workbox-window
  1. modificar el archivo next.config.js, este caso tengo instalado el módulo sassOptinons … este puede ser eliminado, pero para darse una idea como se implementaría si tuvieras otros módulos, además aquí mismo se puede manipular los archivos que se generan al realizar un build en next js
//next.config.jsconst path = require('path')
  const withWorkbox = require("next-with-workbox");
  module.exports = withWorkbox( {
    sassOptions: {
      includePaths: [path.join(__dirname, 'src', 'styles')],
    }, workbox: {
      dest: "public",
      swDest: "sw.js",
      swSrc: "worker.js",
      force: true,
    },
  })

  1. al realizar npm run build agrega archivos extras es importante asi que debemos ignorar estos archivos en .gitignore

public/sw.js
public/sw.js.map
public/worker-.js
public/worker-
.js.map

  1. en** pages/_app.js **se configura para que solo en producción se ejecute el services-worker
//pages/_app.js
import React, { useEffect } from "react";
import { Workbox } from "workbox-window";
functionApp({ Component, pageProps }) {
  useEffect(() => {
    if (
      !("serviceWorker"in navigator) ||
      process.env.NODE_ENV !== "production"
    ) {
      console.warn("Progressive Web App support is disabled");return;
    }
const wb = new Workbox("sw.js", { scope: "/" });
    wb.register();
  }, []);return;
}
exportdefault App;
  1. ya podemos crear nuestro service worker en el archivo worker.js que debemos crear en la raíz del proyecto

  2. en la carpeta public revisar que se encuentra el manifest y revisar que en pages/_document.js se encuentre la etiqueta <link rel="“manifest”" href="/manifest.json"> o bien en import Head from “next/head”; agregar la etiqueta anterior.

//public/manifest.json
{
  "short_name": "Platzi Conf Store",
  "name": "A simple Store",
  "icons": [
    {
      "src": "water-tap-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "background_color": "#222",
  "theme_color": "#222",
  "display": "standalone"
}

//pages/_document.js
importReact from'react'
importDocument, { Html, Head, Main, NextScript } from'next/document'

classMyDocumentextendsDocument{
  staticasyncgetInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      "es">

//src/component/headimport React from 'react';
import Head from "next/head";
exportdefault ({ description, keywords, title, children, img, url }) => {
  return (
    <>

        "manifest" href="/manifest.json" />

      {children}

  )
}

//pages/index.jsimport React from 'react';
import Head from 'src/component/Head';
import Home from '../src/containers/Home';

const Principal = () => {
  return (
    <>
      "titulo"
        description="decripcion "
        img="imagen"
      />

  )

};

exportdefault Principal;

  1. ahora podemos implementar todas las estrategias en **worker.js **que es un archivo que se debe crear en la raíz, yo instalé todas las dependencias con npm. Para más funciones
npm install workbox-precaching workbox-routing workbox-strategies
[//worker.js](//worker.js)import { precacheAndRoute,createHandlerBoundToURL } from “workbox-precaching”;import {registerRoute,NavigationRoute} from ‘workbox-routing’;import {NetworkOnly,NetworkFirst,StaleWhileRevalidate} from ‘workbox-strategies’;// Precarga la app
precacheAndRoute(self.__WB_MANIFEST);
registerRoute(
/.(?:js|css|webp|png|svg)$/,
new StaleWhileRevalidate(), ‘GET’
);

registerRoute(
/^https?._/,
new NetworkFirst(),‘GET’
);
registerRoute(
/^http?._/,
new NetworkFirst(),‘GET’
);

tome todo del siguiente enlace

Escribe tu comentario
+ 2