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

Question

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

Ali*_*Ali 0 html javascript progressive-web-apps workbox

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

这是我所做的：

我编写的index.html文件具有 PWA 所需的元标记，加载清单文件 ( manifest.webmanifest )，并注册服务工作线程 JavaScript 文件 ( sw.js )。
我使用命令安装了workbox-clinpm install workbox-cli --global。
我使用命令生成了workbox-config.js文件workbox wizard，并手动调整它以适应我想要的配置。
我最终使用命令生成了我的 service-worker ( sw.js ) 文件和workbox-xxx.jsworkbox generateSW workbox-config.js文件。

现在，当我在 localhost 上运行我的页面，然后打开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.

Run Code Online (Sandbox Code Playgroud)

这是我的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>

Run Code Online (Sandbox Code Playgroud)

这是我的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"
}

Run Code Online (Sandbox Code Playgroud)

这是我的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
};

Run Code Online (Sandbox Code Playgroud)

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

提前致谢。

问候，阿里

Answer 1

Jef*_*ick 5

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

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

归档时间：	4 年，11 月前
查看次数：	1856 次
最近记录：	4 年，11 月前