Hi I was working on a Nextjs proyect and i try to convert it to a PWA using next-pwa, first i created the next.config.js
const withPWA = require('next-pwa');
module.exports = withPWA({
pwa: {
dest: 'public',
}
});
then created the manifest.json
{
"name": "PRONTO APP",
"short_name": "PRONTO",
"icons": [
{
"src": "/icon.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#FFFFFF",
"background_color": "#FFFFFF",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}
And I add the meta data in de _document file in pages
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/icon.png" />
<meta name='theme-color' content="#fff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
};
}
export default MyDocument;
But when i run:
npm build dev
npm start
in Google Chrome My PWA works fine but in console i get this error: in other browsers this error doesn't appear
Uncaught (in promise) TypeError: Failed to fetch
And I really dont know why, running the app in dev mod with npm run dev i get the following messages in chrome:
workbox Router is responding to: /
workbox Network request for '/' threw an error. TypeError: Failed to fetch
workbox Using NetworkOnly to respond to '/'
Uncaught (in promise) TypeError: Failed to fetch
This is my public folder structure:
/public
-/fonts
-/images
-favicon.ico
-icon-512x512.png}
-icon.png
-manifest.json
-sw.js
I was trying to do the same thing in this video. https://www.youtube.com/watch?v=8enp-acPbRE
Can Anyone Help me plss
I encountered the same error using Chrome
89and Workbox6.1.1.After updating Chrome to
90(and Workbox to6.1.5), this error is gone.See related thread: https://github.com/GoogleChrome/workbox/issues/2749