Para usar workbox en next js podemos seguir los siguientes pasos
npm install next-with-workbox workbox-window//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,
},
})
public/sw.js
public/sw.js.map
public/worker-.js
public/worker-.js.map
//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;ya podemos crear nuestro service worker en el archivo worker.js que debemos crear en la raíz del proyecto
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;
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
