问题标签 [workbox]

我有一个 Webpack 配置文件，它使用webpack-pwa-manifest插件 ( https://github.com/arthurbergmz/webpack-pwa-manifest ) 生成 PWA 清单文件。清单文件名为manifest.hash.json，其中“hash”是每次构建时动态生成的值。

我还使用（https://developers.google.com/web/tools/workbox/modules/workbox-webpack-pluginInjectManifest ）的插件来呈现预缓存清单，然后将其注入到服务工作者文件中。Workbox

这是我的 Webpack 配置文件的“插件”部分：

问题是我找不到将渲染添加manifest.hash.json到 InjectManifest 生成的预缓存清单中的方法。有什么办法可以让他们一起玩得很好，还是不可能？

我是 PWA 新手并使用 Workbox；所以我有这个具有以下文件结构的测试文件夹，使用 localhost 作为我的服务器（即 localhost/test）

1. 索引.html
2. 测试.css
3. 测试.jpg
4. 测试.js

5. sw.js（代码如下所示）；

   importScripts(' https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js ');

   /li>

一切正常，文件已预先缓存，当我处于脱机模式时，我没有收到此常规脱机消息，如下图所示。

因此，我将确切的文件夹复制到 test-2 文件夹，然后将我的index.html 文件重命名为index.php并在我的sw.js 文件中将 url 更新为以下代码

- 请注意，我也更改了修订值

我这样做是因为我想将使​​用 Workbox 的 PWA 实现到我自己定制的单页应用程序中（但它是 .php 格式的）。

来到我的浏览器运行 localhost/test-2 （正常模式），我的文件也被预缓存，包括我的 index.php 文件（我的控制台中没有错误消息，服务工作者工作得很好）；只有我在我的源选项卡中切换到（离线模式）并刷新我的浏览器来测试离线体验，唉！我收到了这条离线消息，如下图所示:(

我不知道出了什么问题，我不知道发生了什么，我试图用谷歌搜索几天的一些原因，但我似乎没有得到任何正确和相应的答案。大多数教程都带有.html

所以问题是我如何使用 .php 文件实现 PWA，这样当用户离线时，他们不会收到正常的 You're offline Message 而是我的网页应该呈现？

提前致谢

我是服务人员和工作箱的新手。我目前正在使用工作箱来预缓存我的静态资产文件，它工作正常，我希望我的其他第三方 URL 在运行时也被缓存，但直到我在页面上第二次重新加载时才工作:(

下面显示的是我的 Service Worker 的代码副本，请注意我故意替换了我原来的 abc.domain.com 链接:)

我已经清除了没有数字的存储时间，我从谷歌开发者工具中刷新了缓存存储，但一切似乎都是一样的。来自自定义链接、google fonts 和 fontawesome 的资源第一次无法缓存。下面是我的页面第一次加载图像和第二次加载图像的控制台和缓存存储选项卡。

请我不知道我做错了什么以及为什么会这样。

提前致谢

我刚刚实现了 Google的工作箱工具来处理服务工作者的创建。

WorkboxPlugin.InjectManifest()在我的 webpack 配置中使用很简单，并且 service worker 在构建中很好地注册。然而，在 Dev 期间拥有 service worker 变得有点痛苦，我希望能够在开发模式和 webpack-dev-server 中使用 webpack 时否定正在构建的 service worker，似乎是通过一些条件构建规则。

我在网上看到了一些关于 webpacks 的建议，NormalModuleReplacementPlugin但是稍微阅读了一下，我找不到在这种情况下使用它的任何示例。我想知道是否有人遇到过同样的问题以及他们的解决方案是什么？

我正在尝试为 Webpack 设置 WorkboxPlugin，我确实遵循了https://developers.google.com/web/tools/workbox/guides/get-started上提供的教程，但无法摆脱上次失败的审核：

Users will not be prompted to install the Web App: Failures: service worker does not successfully serve the manifest's start url

我基本上提供了一个离线页面/offline，但无法弄清楚如何在插件中路由它。

网络包插件：

我清单中的 startUrl 指向："start_url": "./",

生成的 sw.js：

预缓存清单看起来也不错

我错过了什么？

非常感激！

假设我有一个用于博客文章的 RESTful 架构：

• /api/blogs?from=0&to=30将返回我 30 个帖子。
  • /api/blogs/page/1会给我同样的 30 个帖子。
• /api/post/13将返回博客文章 #13 的内容。

假设 post 对象的形状在这两个 REST 端点之间或多或少相同，您可以合理地假设内容 from/api/post/13将包含在 from 的内容中/api/blogs/page/1。

在这个用例中，我试图解析这些分页响应并使用它们来为各个帖子预热缓存。

如果我自己编写缓存，我只会为 创建一个缓存blogs，并且每次我请求其中的一页时，我都会遍历响应并根据需要向缓存中添加一些内容：

这可以很好地填充缓存。

我发现，当我在使用 Workbox 时尝试类似的事情时，各种开箱即用的策略都找不到我已推送到缓存中的这些项目。

当我运行它时，chrome 的 devtools 告诉我cache.match调用内部到工作箱的/api/blogs路由返回策略的策略undefined。

我想我遗漏了一些重要的东西，可能是关于cache.matchWorkbox 是如何使用的，或者请求/响应对象如何在缓存 API 中使用，或者关于我对缓存命中如何工作的假设，或者以上所有. 我只是不确定它是什么。有人有想法吗？

我在开发环境中。

我安装了使用workbox-webpack-plugin的 cli-plugin-pwa。我的文件很简单：vue.config.js

所以工作箱应该service-worker.js在我启动服务器时生成一个文件，./public但它没有。

我有什么不对吗？

我已经使用 Google 的 workbox-build 包将服务工作者集成到使用 ReactJS 构建的单页应用程序中。

我在 index.html 的预缓存方面遇到了一些问题，特别是每次我们发布新版本时，服务工作者都会为过时的 index.html 提供服务。由于它提供过时的 index.html，因此找不到主 JavaScript 文件，因为它是基于构建版本控制的。

我还尝试从预缓存中删除 index.html，并将其放在运行时缓存中，并设置为网络优先。但它似乎没有被服务人员缓存。

为了显示“添加主屏幕”警报，我想集成服务工作者和应用程序的离线功能：当用户离线时，应用程序应该只显示一个特殊的离线 HTML 文件。

我的服务人员看起来像这样：

但是，一旦我的应用程序返回 302 重定向（例如，在登录或注销后），我会在控制台中收到以下警告消息：

“ https://app.com ”的 FetchEvent 导致网络错误响应：重定向响应用于重定向模式不是“跟随”的请求。

谷歌浏览器会显示一个错误页面 (ERR_FAILED)，指出无法访问该网站。

有谁知道如何解决这个问题？

使用一个简单的 service-worker 代码，我尝试保存和推迟失败的请求。

为此，我必须首先识别失败的请求，但我不明白为什么我这样做的方式总是认为请求是成功的，即使它们不是。

这是我写的代码：

这是控制台输出的屏幕截图：

我究竟做错了什么 ？