PWA “The start_url did respond, but not via a service worker.” — NextJS-PWA

Question

I've been using next-pwa (npm link) to automate the service-worker setup stuff for setting up a PWA in NextJS. For the most part, everything has been going fine. However, I cannot for the life of me figure out how to solve the one error (shown below) still appearing in the lighthouse audit. I've read a good amount of posts and tried to implement several different solutions but so far no dice.

---

---

Here is the sw.js that is automatically created by NextJS .

// sw.js
if (!self.define) {
  const e = e => {
      'require' !== e && (e += '.js');
      let n = Promise.resolve();
      return (
        i[e] ||
          (n = new Promise(async n => {
            if ('document' in self) {
              const i = document.createElement('script');
              (i.src = e), document.head.appendChild(i), (i.onload = n);
            } else importScripts(e), n();
          })),
        n.then(() => {
          if (!i[e]) throw new Error(`Module ${e} didn’t register its module`);
          return i[e];
        })
      );
    },
    n = (n, i) => {
      Promise.all(n.map(e)).then(e => i(1 === e.length ? e[0] : e));
    },
    i = { require: Promise.resolve(n) };
  self.define = (n, s, c) => {
    i[n] ||
      (i[n] = Promise.resolve().then(() => {
        let i = {};
        const r = { uri: location.origin + n.slice(1) };
        return Promise.all(
          s.map(n => {
            switch (n) {
              case 'exports':
                return i;
              case 'module':
                return r;
              default:
                return e(n);
            }
          })
        ).then(e => {
          const n = c(...e);
          return i.default || (i.default = n), i;
        });
      }));
  };
}
define('./sw.js', ['./workbox-1ca495a9'], function(e) {
  'use strict';
  importScripts(),
    self.skipWaiting(),
    e.clientsClaim(),
    e.precacheAndRoute(
      [
        {
          url: '/_next/static/Bf0fOQ5vTfsmLElkL5uPJ/_buildManifest.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/Bf0fOQ5vTfsmLElkL5uPJ/_ssgManifest.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/224-5da05219d75f4eb1a9e2.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/580-2d0b17ccc09c231c1f63.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/597-27159eb1f0ff7f4322bb.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/framework-40503bb0b87dcc30c2dc.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/main-f0954d00fdee968e0986.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/pages/_app-f80cf1ab407b29886a1c.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/pages/_error-8470b41bc6cfedf1d350.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/pages/index-e03b34c1331d21cd05ac.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/polyfills-3d2c0f0875171918a758.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/_next/static/chunks/webpack-fb3a8e0c92f7e9ed77fb.js',
          revision: 'Bf0fOQ5vTfsmLElkL5uPJ'
        },
        {
          url: '/browserconfig.xml',
          revision: '653d077300a12f09a69caeea7a8947f8'
        },
        { url: '/favicon.ico', revision: '21b739d43fcb9bbb83d8541fe4fe88fa' },
        {
          url: '/icons/android-icon-144x144.png',
          revision: 'ba231a435173f4830fe422263f5dd3eb'
        },
        {
          url: '/icons/android-icon-192x192.png',
          revision: '93bde9a252c9a48d377f60dfa88b25e2'
        },
        {
          url: '/icons/android-icon-36x36.png',
          revision: '60cbd3297c42a432069c7f5e9d640c12'
        },
        {
          url: '/icons/android-icon-48x48.png',
          revision: '4b898d6d22adce8db36ede1b8c811f1b'
        },
        {
          url: '/icons/android-icon-512x512.png',
          revision: '6a8a40c983dbc0bc42a97b9e4cda77a6'
        },
        {
          url: '/icons/android-icon-72x72.png',
          revision: '3d1f4c9b46b285fa6cb2c587ea2334e0'
        },
        {
          url: '/icons/android-icon-96x96.png',
          revision: '5f522065b076d980b50278fecf7c0f34'
        },
        {
          url: '/icons/apple-icon-114x114.png',
          revision: 'ca65289710709e327077cf035bade9e0'
        },
        {
          url: '/icons/apple-icon-120x120.png',
          revision: '478371dd294735fa2d579d0c027442be'
        },
        {
          url: '/icons/apple-icon-144x144.png',
          revision: 'ba231a435173f4830fe422263f5dd3eb'
        },
        {
          url: '/icons/apple-icon-152x152.png',
          revision: 'c7c7e34b1d917f17a4132eb253262424'
        },
        {
          url: '/icons/apple-icon-180x180.png',
          revision: '117fea2a93944d8ecab1797de5bbe301'
        },
        {
          url: '/icons/apple-icon-512x512.png',
          revision: '6a8a40c983dbc0bc42a97b9e4cda77a6'
        },
        {
          url: '/icons/apple-icon-57x57.png',
          revision: '5c0a5653d999f01b12ba2a2c1343a664'
        },
        {
          url: '/icons/apple-icon-60x60.png',
          revision: '6ee47df922e9336918c9266c651fbb11'
        },
        {
          url: '/icons/apple-icon-72x72.png',
          revision: '3d1f4c9b46b285fa6cb2c587ea2334e0'
        },
        {
          url: '/icons/apple-icon-76x76.png',
          revision: 'f7e6c5d5649be3dac2479043e0c3c05f'
        },
        {
          url: '/icons/apple-icon-precomposed.png',
          revision: '528eff11ef1a3f9094763b37bb9ef69e'
        },
        {
          url: '/icons/apple-icon.png',
          revision: '528eff11ef1a3f9094763b37bb9ef69e'
        },
        {
          url: '/icons/favicon-16x16.png',
          revision: 'e90dc768aad2517760a068c794a8e7da'
        },
        {
          url: '/icons/favicon-32x32.png',
          revision: '2804f09f47660e4593b8f05f1007973f'
        },
        {
          url: '/icons/favicon-96x96.png',
          revision: '5f522065b076d980b50278fecf7c0f34'
        },
        {
          url: '/icons/maskable_icon_x1.png',
          revision: 'cab51d5ebecc0e119828c83518472714'
        },
        {
          url: '/icons/ms-icon-144x144.png',
          revision: 'ba231a435173f4830fe422263f5dd3eb'
        },
        {
          url: '/icons/ms-icon-150x150.png',
          revision: 'f0b0f7361d893e945de9e383b898b485'
        },
        {
          url: '/icons/ms-icon-310x310.png',
          revision: 'f3258e3670d0eb63ba56fb40ad30386c'
        },
        {
          url: '/icons/ms-icon-512x512.png',
          revision: '6a8a40c983dbc0bc42a97b9e4cda77a6'
        },
        {
          url: '/icons/ms-icon-70x70.png',
          revision: '7a04d01451acba7481bd3ddfadb7255d'
        },
        { url: '/manifest.json', revision: '973196764f3f071b66c8f53b18a0eda3' },
        { url: '/vercel.svg', revision: '4b4f1876502eb6721764637fe5c41702' }
      ],
      { ignoreURLParametersMatching: [] }
    ),
    e.cleanupOutdatedCaches(),
    e.registerRoute(
      '/',
      new e.NetworkFirst({
        cacheName: 'start-url',
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 1,
            maxAgeSeconds: 86400,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    ),
    e.registerRoute(
      /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
      new e.CacheFirst({
        cacheName: 'google-fonts',
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 4,
            maxAgeSeconds: 31536e3,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    ),
    e.registerRoute(
      /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
      new e.StaleWhileRevalidate({
        cacheName: 'static-font-assets',
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 4,
            maxAgeSeconds: 604800,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    ),
    e.registerRoute(
      /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
      new e.StaleWhileRevalidate({
        cacheName: 'static-image-assets',
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 64,
            maxAgeSeconds: 86400,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    ),
    e.registerRoute(
      /\.(?:js)$/i,
      new e.StaleWhileRevalidate({
        cacheName: 'static-js-assets',
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 32,
            maxAgeSeconds: 86400,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    ),
    e.registerRoute(
      /\.(?:css|less)$/i,
      new e.StaleWhileRevalidate({
        cacheName: 'static-style-assets',
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 32,
            maxAgeSeconds: 86400,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    ),
    e.registerRoute(
      /\.(?:json|xml|csv)$/i,
      new e.NetworkFirst({
        cacheName: 'static-data-assets',
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 32,
            maxAgeSeconds: 86400,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    ),
    e.registerRoute(
      /\/api\/.*$/i,
      new e.NetworkFirst({
        cacheName: 'apis',
        networkTimeoutSeconds: 10,
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 16,
            maxAgeSeconds: 86400,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    ),
    e.registerRoute(
      /.*/i,
      new e.NetworkFirst({
        cacheName: 'others',
        networkTimeoutSeconds: 10,
        plugins: [
          new e.ExpirationPlugin({
            maxEntries: 32,
            maxAgeSeconds: 86400,
            purgeOnQuotaError: !0
          })
        ]
      }),
      'GET'
    );
});

Here is the next.config.js

const withPWA = require('next-pwa');

module.exports = withPWA({
  disable: process.env.NODE_ENV === 'development',
  register: true,
  sw: '/sw.js',
  future: { webpack5: true },
  distDir: '/.next',
  pwa: {
    dest: 'public'
  }
});

and my public/manifest.json

{
  "name": "Parakeat Language Learning",
  "short_name": "Parakeat",
  "icons": [
    {
      "src": "icons/android-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "icons/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "icons/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "icons/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "icons/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "icons/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    },
    {
      "src": "icons/android-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "density": "4.0"
    },
    {
      "src": "icons/maskable_icon_x1.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "start_url": "/",
  "scope": "",
  "orientation": "portrait",
  "display": "standalone",
  "theme_color": "#002",
  "background_color": "#ffffff"
}

I'm pretty much out of ideas, I've been reading through the next-pwa npm docs , the associated example file , and third-party resources , and for all of them it just seems to work , yet... I'm having no such luck.

Lastly, the response when I deploy it (although it succeeds, maybe this is part of the issue?)

Answer 1

According to:
https://github.com/shadowwalker/next-pwa/issues/107
https://github.com/shadowwalker/next-pwa/issues/108
https://github.com/shadowwalker/next-pwa/issues/124

They think it is a bug with Lighthouse. It certainly seems to work correctly when I disable the network.