我使用 Workbox CLI 及其服务工作者生成器的 PWA 无法离线工作

Question

我是构建 PWA 和使用 Workbox (V5) 的新手。我在缓存我的页面并离线工作时遇到了问题！

这是我所做的：

我编写 index.html 文件的方式是它具有 PWA 所需的元标记，加载清单文件（manifest.webmanifest), 并注册 service-worker JavaScript 文件 (sw.js).
我使用 npm install workbox-cli --global 命令安装了 workbox-cli。
我使用 workbox wizard 命令生成了我的 workbox-config.js 文件，并手动调整它以适应我想要的配置。
我终于生成了我的 service-worker (sw.js) 文件和一个 workbox-xxx.js 文件使用 workbox generateSW workbox-config.js 命令。

现在，当我运行我在本地主机上的页面然后打开 Chrome DevTools，然后转到 Lighthouse 部分用它来审核我的网页，它说我的应用程序是可安装的，并且 PWA 已优化...但是说它不能离线工作：

- Current page does not respond with a 200 when offline

- start_url does not respond with a 200 when offlineTimed out waiting for start_url (http://127.0.0.1:4000/?source=pwa) to respond.

这是我的index.html.

<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="#eeeeee" />
  <meta name="apple-mobile-web-app-title" content="Hello" />
  <meta name="description" content="I'm here. Hello World!" />
  <meta name="theme-color" content="#eeeeee" />

  <link rel="shortcut icon" href="./favicon.ico" />
  <link rel="apple-touch-icon" href="./apple-touch-icon.png">


  <title>Hello</title>
  <meta name="description" content="Hello World!">
  <link rel="manifest" href="./manifest.webmanifest" />

  <link rel="stylesheet" href="./assets/styles/main.css">
</head>


  <body>

    <h1>Hello World!</h1>

    <script src="./assets/scripts/main.js" charset="utf-8"></script>

    <script>
    // Check that service workers are supported
    if ('serviceWorker' in navigator) {
      // Use the window load event to keep the page load performant
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./sw.js');
      });
    }
    </script>

    <noscript>Please enable JavaScript to continue using this application.</noscript>
    
  </body>

</html>

这是我的manifest.webmanifest.

{
  "short_name": "Hello",
  "name": "Hello",
  "description": "I'm here. Hello World!",
  "icons": [
    {
      "src": "/assets/images/android-chrome-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/assets/images/android-chrome-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "scope": "/",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "orientation": "portrait-primary",
  "theme_color": "#eeeeee",
  "background_color": "#eeeeee"
}

这是我的 workbox-config.js。可以看到我只预缓存.html和.ico文件，然后做运行时间缓存对于图像或 .css 和 .js 文件。

module.exports = {
  globDirectory: "./",
  globPatterns: [
    "**/*.{html,ico}"
  ],
  globIgnores: [
    "node_modules/**/*",
    "{.,_}*/**/*",
    "**/*.{md,txt}",
    "Gemfile*",
    "package*"
  ],
  runtimeCaching: [
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'images',
        expiration: {
          maxEntries: 10,
          maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
        },
      },
    },
    {
      urlPattern: /\.(?:css|js)$/,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'assets',
      },
    }
  ],
  swDest: "./sw.js",
  sourcemap: false
};

我不明白我做错了什么！一切都很清楚，并且基于 Workbox 文档！请帮忙！有人知道这里出了什么问题吗？

提前致谢。

此致，阿里

Answer 1

尝试将 ignoreURLParametersMatching: [/^source$/] 添加到您的 workbox-config.js。这将告诉 workbox-precaching 在缓存中查找匹配的 URL 时可以忽略 ?source=pwa 查询参数。

By default，以 utm_ 或参数 fbclid 开头的任何内容都将被忽略，因此如果您愿意，另一种方法是将 start_url 更改为类似/?utm_source=pwa.

我使用 Workbox CLI 及其服务工作者生成器的 PWA 无法离线工作

My PWA using Workbox CLI and its service-worker generator doesn't work offline

javascript

html

progressive-web-apps

workbox