问题标签 [workbox]

我已将网站设置为 PWA。使用 Android Chrome 浏览时，系统会提示我在主屏幕上添加快捷方式。当我从快捷方式启动时，我看到一个带有 X 和站点信息的屏幕，以及一个 Chrome 选项菜单：

从快捷方式启动 PWA 后查看

当我点击十字时，会显示一个空白的白色屏幕，如下所示：

点击十字后黑屏

manifest.json 包括：

如果我删除快捷方式，请清除浏览器缓存并在再次出现提示时重新安装，行为是不可预测的。有时会发生我上面描述的情况，但在其他情况下会创建一个独立启动且没有 X 和站点信息栏的快捷方式。

我有 3 个问题。

1) 为什么点击 X 会导致显示空白屏幕？

2) 为什么添加一个快捷方式（到同一个 PWA）有时会导致一个独立的启动器，有时会导致一个在 PWA 屏幕上方添加 X 和站点信息的启动器？

3) 是否可以看到主屏幕上的快捷方式正在使用的 url？当 PWA 使用 X 和站点信息栏启动时，据我所知，无法获取 url。

谢谢

布赖恩

我有一个基于 SSR 的反应应用程序，目前正在实施 Workbox 工具，用于预缓存和离线功能。我遇到问题主要是因为该站点依赖于服务器端的 cookie 并基于这些发出重定向。

• 初始加载工作正常，但是一旦服务工作者（sw）在线并且另一次刷新导致 sw 使用来自工作箱源中的 url 进行 fetch 调用。在此期间，服务器找不到 cookie（获取不携带凭据 -链接）并发出重定向（302）到不同的 url（这使您可以在 cookie 中设置一些选项并刷新旧 url）。

• 这会导致客户端出现以下错误The FetchEvent for "http://localhost:8080/" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

• 服务器发出重定向为 302 状态，但客户端导致： site can’t be reached The web page at http://localhost:8080/ might be temporarily down or it may have moved permanently to a new web address. ERR_FAILED

这是我的服务工作者代码，资产由 workbox-webpack 插件填充。

PS 这是我第一次尝试使用工作箱工具或服务人员，我可能错过或忽略了一些细节。请指出我的方向。

我正在使用 workbox-sw 缓存一些 API 请求，我想知道是否可以将自定义标头添加到从缓存返回的响应中。

我的 sw.js 看起来像这样：

知道如何在响应中添加标头吗？

谢谢！

我刚开始使用工作箱，我正在使用 Gulp 生成我的服务工作者，示例中的代码如下：https ://developers.google.com/web/tools/workbox/get-started/gulp

它会正确生成服务工作者文件，但我不明白的是如何将自己的代码添加到文件中？假设我想添加以下路线：

现在，如果我再次运行 gulp 任务，它会覆盖我自己的路线。如何添加自己的代码？我还想添加一些事件监听器等。

更新：到目前为止，我发现我可以使用 injectManifest() 将路由注入到 workboxSW.precache([]); 中的文件。但我仍然需要以某种方式复制实际的服务工作者脚本。

我正在尝试使用 Workbox 实施“缓存然后网络”策略。

我已将 Workbox 设置为使用staleWhileRevalidateruntimeCaching 处理程序，但我不确定如何最好地更新页面一次/如果我们从网络更新缓存。

文档说：

除了更新适当的缓存之外，它还将触发底层 RequestWrapper 中定义的任何适当的插件。

那会有用吗？是否有任何使用 Workbox 完成此策略的示例（顺便说一下，这是一个很棒的工具，所以感谢它的维护者）？

我目前正在从事一个相当大的项目，该项目具有许多不同的依赖关系，分布在许多文件中。首先，我运行 NPM 和 webpack 来管理大部分依赖项。在工作箱文档中，我有两种不同的方式来集成它，或者通过 webpack（实际上只是一个示例）或通过 NPM。我决定尝试使用 NPM。我运行了以下命令：

这将 workbox-sw 添加到package.json依赖项部分。但是，每当我尝试使用以下方法导入时：

它给了我以下错误：

未捕获的 WorkboxError：工作箱引发错误，错误代码为：;'not-in-sw'

我尝试了其他一些方法，但只是天真。webpack 文档肯定乏善可陈，我想避免安装其他依赖项以使其正常运行。其他一些重要说明：

1. 我正在使用 Vue.js
2. 我创建了一些不同的组件，它们通过路由进行交互。我正在尝试导入特定组件。

这是完整的错误消息：

我已使用工作箱将现有的 Ionic 应用程序配置为 PWA。在 Firefox 中似乎一切正常。但是，在 Windows 10 和 Android 上的 Chrome 中，缓存中找不到许多字体文件。

我已经验证这些文件确实存在于缓存中：

有谁知道发生了什么？为什么在缓存中找不到文件？结果是我的工具栏图标显示为空矩形。

编辑 18/11/2017

我的服务工作者代码非常简单：

我的 workbox-cli-config.js 文件包含以下内容：

我正在使用工作箱来缓存我的应用程序外壳。网络选项卡显示请求来自 serviceWorker，并且资产在快速检索时肯定会被缓存，即使在离线模式下也是如此：

但是，缓存存储选项卡始终为空：

我试图通过控制台请求相同的资产：

瞧，资产显示：

恐怕我错过了一些基本的东西。

顺便说一句，缓存存储在我的本地环境中正确显示，所以我怀疑这是来自 CDN 的资产的问题。

我正在使用 workbox 2.1.0 来生成 service worker，并且需要从服务器的资产目录（比如 index.html 和 clear.png）中预缓存一些文件，以及从 CDN 中预缓存一个文件（比如https://akamai.com/虚拟/路径/app.js）。我正在使用 gulp 进行构建。这就是代码的运行方式

所以，这工作正常，生成的服务工作者在预缓存列表中都有这两个文件，这里是：

我测试过，效果很好

现在，问题是：如何在预缓存列表中添加第三个资产（https://akamai.com/dummy/path/app.js）。我试着把它放进去，staticFileGlobs但它错误地说：

显然是因为它试图在里面找到文件https://akamai.com/dummy/path/app.jsglobDirectory并且找不到它。

那么，基本上，如何在使用 gulp（或任何构建工具）时将 CDN URL 注入到生成的服务工作者的预缓存列表中？

我正在尝试使用 Workbox 缓存整页，但它不能根据我的要求工作 我想缓存的不是 html 我想用 Image、Js、Css 缓存整页 目前它只缓存 html

上面我用于页面缓存的代码