Trying to make a website + PWA with Next.js + next-pwa. Installed next-pwa, followed the documentation of this package, specifically 'Offline fallbacks' https://github.com/shadowwalker/next-pwa#offline-fallbacks. The website becomes installable as PWA, I can install it on PC and phone, but I can't get to _offline page except by manually typing it in url.
next.config.js:
const withPWA = require('next-pwa');
/** @type {import('next').NextConfig} */
const nextConfig = withPWA({
reactStrictMode: true,
pwa: {
dest: 'public',
register: true,
skipWaiting: true
}
})
module.exports = nextConfig
sw.js is automatically generated by next-pwa in public folder.
it has line to include another file, which is also generated by next-pwa:
importScripts("fallback-development.js");
fallback-development.js contains:
/******/ (() => { // webpackBootstrap
/******/ "use strict";
var __webpack_exports__ = {};
self.fallback = async request => {
// https://developer.mozilla.org/en-US/docs/Web/API/RequestDestination
switch (request.destination) {
case 'document':
if (true) return caches.match("/_offline", {
ignoreSearch: true
});
case 'image':
if (false) {}
case 'audio':
if (false) {}
case 'video':
if (false) {}
case 'font':
if (false) {}
case '':
if (false) {}
default:
return Response.error();
}
};
/******/ })()
;
Also tried production build, then fallback-development.js gets another name, and import in sw.js that name is also gets changed to correct one. In both prod and dev, both locally and with my app deployed to Vercel, I tried to disable network in browser devtools network tab, checked 'disable cache', and checked 'offline' in application-> Service workers.
On PC in browser console log I don't see any errors related to PWA. I see default browser 'no internet' page if I input some page I haven't visited yet on my website directly in url. On phone, since it's a PWA I can't type in a url like in browser, so it goes back and forth between pages that I switch in navbar with next.js link.
How can I show some 'You are offline' as soon as user's device loses internet access ?
