1

我正在使用 Workbox 2 来处理我的 PWA 的“离线”行为。内容由HexoJS 生成并部署到 GitHub Pages。以下是workbox-cli-config.js供参考：

module.exports = {
    globDirectory: "./public/",
    globPatterns: ["**/*.html", "**/*.js", "**/*.css", "**/*.png"],
    swDest: "public/sw.js",
    clientsClaim: true,
    skipWaiting: true,
    runtimeCaching: [
        {
            urlPattern: /^https:\/\/use\.fontawesome\.com\/releases/,
            handler: "networkFirst"
        },
        {
            urlPattern: /^https:\/\/fonts\.gstatic\.com\/s\//,
            handler: "networkFirst"
        },
        {
            urlPattern: /^https:\/\/maxcdn\.bootstrapcdn\.com\/bootstrap/,
            handler: "networkFirst"
        },
        {
            urlPattern: /^https:\/\/fonts\.googleapis\.com/,
            handler: "networkFirst"
        },
        {
            urlPattern: /^https:\/\/code\.jquery\.com\/jquery-3/,
            handler: "networkFirst"
        },
    ]
};

一切都按预期工作，应用程序正确处理切换到 Chrome DevTools 中的离线模式。

当我更新一些静态内容（例如 HTML）并将其重新部署到 GitHub 页面上时，就会出现问题--- 我可以看到内容的更新版本，但并非总是如此，而且并非在所有浏览器中都如此。

我总是必须在 Opera 或 Chrome（或其他浏览器）中使用“清除浏览数据”操作来刷新页面的外观，因为简单的“刷新/重新加载”没有帮助。

“添加到主屏幕”PWA 的问题变得更加严重。即使通过卸载/重新安装，我也无法强制刷新内容。仅擦除 Android Chrome 浏览器中的浏览数据有助于刷新应用内容。

我的问题是：

  • 当我重新访问页面或刷新已安装的 PWA 时，是否可以让预缓存的静态资产自动更新？
  • 我是否以错误的方式配置 Workbox（见我workbox-cli-config.js上面的）
  • 迁移到 Workbox 3 会有什么不同吗？

如果这有助于解决问题，我很乐意分享其他配置文件。

PS：该页面在 Lighthouse 中的得分为 100，除了性能之外的所有标准（因为加载了阻塞内容，bootstrap.min.js但在 SO 中读取，这是可以的）。

4

0 回答 0