Hello, I was recently working on a Next.js project and attempted to convert it into a PWA using next-pwa. To start off, I created the next.config.js file.
const withPWA = require('next-
pwa');
module.exports = withPWA({
pwa: {
dest: 'public',
}
});
I then proceeded to create the manifest.json file.
{
"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"
}
Additionally, I added the meta data in the _document file located in the pages directory.
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;
However, when I tried to run the commands npm build dev and npm start, my PWA worked perfectly fine in Google Chrome but an error appeared in the console:
Uncaught (in promise) TypeError: Failed to fetchThis error only seemed to occur in Chrome, whereas other browsers did not exhibit this issue. Running the app in development mode with npm run dev, I received 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
Here is the structure of my public folder:
/public
-/fonts
-/images
-favicon.ico
-icon-512x512.png}
-icon.png
-manifest.json
-sw.js
I attempted to follow a similar process as shown in this video tutorial: https://www.youtube.com/watch?v=8enp-acPbRE
If anyone could provide some assistance, that would be greatly appreciated. Thank you!