PWA “start_url 确实响应了，但不是通过 service worker” -- NextJS-PWA

问题描述

我一直在使用 next-pwa (npm link) 来自动化服务工作者设置，以便在 NextJS 中设置 PWA。在大多数情况下，一切都很顺利。但是，我终生无法弄清楚如何解决灯塔审计中仍然出现的一个错误（如下所示）。我已经阅读了大量帖子并尝试实施了几种不同的解决方案，但到目前为止还没有骰子。

---

---

这是由sw.js自动创建的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',{
          url: '/_next/static/chunks/224-5da05219d75f4eb1a9e2.js',{
          url: '/_next/static/chunks/580-2d0b17ccc09c231c1f63.js',{
          url: '/_next/static/chunks/597-27159eb1f0ff7f4322bb.js',{
          url: '/_next/static/chunks/framework-40503bb0b87dcc30c2dc.js',{
          url: '/_next/static/chunks/main-f0954d00fdee968e0986.js',{
          url: '/_next/static/chunks/pages/_app-f80cf1ab407b29886a1c.js',{
          url: '/_next/static/chunks/pages/_error-8470b41bc6cfedf1d350.js',{
          url: '/_next/static/chunks/pages/index-e03b34c1331d21cd05ac.js',{
          url: '/_next/static/chunks/polyfills-3d2c0f0875171918a758.js',{
          url: '/_next/static/chunks/webpack-fb3a8e0c92f7e9ed77fb.js',{
          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',{
          url: '/icons/apple-icon-152x152.png',revision: 'c7c7e34b1d917f17a4132eb253262424'
        },{
          url: '/icons/apple-icon-180x180.png',revision: '117fea2a93944d8ecab1797de5bbe301'
        },{
          url: '/icons/apple-icon-512x512.png',{
          url: '/icons/apple-icon-57x57.png',revision: '5c0a5653d999f01b12ba2a2c1343a664'
        },{
          url: '/icons/apple-icon-60x60.png',revision: '6ee47df922e9336918c9266c651fbb11'
        },{
          url: '/icons/apple-icon-72x72.png',{
          url: '/icons/apple-icon-76x76.png',revision: 'f7e6c5d5649be3dac2479043e0c3c05f'
        },{
          url: '/icons/apple-icon-precomposed.png',revision: '528eff11ef1a3f9094763b37bb9ef69e'
        },{
          url: '/icons/apple-icon.png',{
          url: '/icons/favicon-16x16.png',revision: 'e90dc768aad2517760a068c794a8e7da'
        },{
          url: '/icons/favicon-32x32.png',revision: '2804f09f47660e4593b8f05f1007973f'
        },{
          url: '/icons/favicon-96x96.png',{
          url: '/icons/maskable_icon_x1.png',revision: 'cab51d5ebecc0e119828c83518472714'
        },{
          url: '/icons/ms-icon-144x144.png',{
          url: '/icons/ms-icon-150x150.png',revision: 'f0b0f7361d893e945de9e383b898b485'
        },{
          url: '/icons/ms-icon-310x310.png',revision: 'f3258e3670d0eb63ba56fb40ad30386c'
        },{
          url: '/icons/ms-icon-512x512.png',{
          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,e.registerRoute(
      /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new e.StaleWhileRevalidate({
        cacheName: 'static-font-assets',maxAgeSeconds: 604800,e.registerRoute(
      /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new e.StaleWhileRevalidate({
        cacheName: 'static-image-assets',plugins: [
          new e.ExpirationPlugin({
            maxEntries: 64,e.registerRoute(
      /\.(?:js)$/i,new e.StaleWhileRevalidate({
        cacheName: 'static-js-assets',plugins: [
          new e.ExpirationPlugin({
            maxEntries: 32,e.registerRoute(
      /\.(?:css|less)$/i,new e.StaleWhileRevalidate({
        cacheName: 'static-style-assets',e.registerRoute(
      /\.(?:json|xml|csv)$/i,new e.NetworkFirst({
        cacheName: 'static-data-assets',e.registerRoute(
      /\/api\/.*$/i,new e.NetworkFirst({
        cacheName: 'apis',networkTimeoutSeconds: 10,plugins: [
          new e.ExpirationPlugin({
            maxEntries: 16,e.registerRoute(
      /.*/i,new e.NetworkFirst({
        cacheName: 'others','GET'
    );
});

这是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'
  }
});

和我的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","density": "1.0"
    },{
      "src": "icons/android-icon-72x72.png","sizes": "72x72","density": "1.5"
    },{
      "src": "icons/android-icon-96x96.png","sizes": "96x96","density": "2.0"
    },{
      "src": "icons/android-icon-144x144.png","sizes": "144x144","density": "3.0"
    },{
      "src": "icons/android-icon-192x192.png","sizes": "192x192","density": "4.0"
    },{
      "src": "icons/android-icon-512x512.png","sizes": "512x512",{
      "src": "icons/maskable_icon_x1.png","sizes": "196x196","purpose": "any maskable"
    }
  ],"start_url": "/","scope": "","orientation": "portrait","display": "standalone","theme_color": "#002","background_color": "#ffffff"
}

我几乎没有想法，我一直在阅读 next-pwa npm docs、相关的 example file 和 third-party resources，对于所有这些内容，它似乎只是 工作，然而......我没有这样的运气。

最后，我部署它时的响应（虽然它成功了，也许这是问题的一部分？）

解决方法

根据：
https://github.com/shadowwalker/next-pwa/issues/107
https://github.com/shadowwalker/next-pwa/issues/108
https://github.com/shadowwalker/next-pwa/issues/124

他们认为这是 Lighthouse 的一个错误。当我禁用网络时，它似乎可以正常工作。