问题标签 [sw-precache]

我有带有 sw-precache 的 PWA 网站，其序列如下：

重新加载页面

• 服务工作者应该在后台更新缓存完成后，您应该会看到有新的或更新的内容可用。在控制台中实际可见的更改不应该是可见的，直到下一次重新加载

重新加载页面

• 这次浏览器将使用新的缓存 现在应该可以看到更改了！控制台中不应有任何消息

我需要类似的，但如果文件已更新 - 将需要在首次加载页面中可见。不是在第二次加载之后。另一个（未更新）文件 - 来自缓存。这个有可能？因为双重重装看到新的变化不舒服。

我正在使用包含 sw-precache-webpack-plugin 的 create-react-app 我还在 webpack.config.prod 中配置 cacheId，我注意到 webpack 在每次构建后都会生成新闻文件和文件名，并且所有文件都存储在同一个缓存中，但旧的文件也继续在缓存中¿删除所有不必要的 sw 缓存文件的方法是什么？

我在尝试使用使用sw-precache-webpack-plugin v.0.11.4的服务添加缓存系统时遇到了一些麻烦。我的想法是人们可以离线使用该应用程序。

我的应用程序位于React v.15.5.4和Node v.6.9.5中，但车把中有一些部分（我们正在迁移到 React 的旧平台），此时两者都在一起。React 中的部分，html 由 Node 端点提供服务，而不是项目的根，例如：

• 本地主机：3000/this_is_the_part_with_react

我想离线使用的唯一部分是使用 React 完成的项目部分。对于这一部分，我使用webpack v.2.6.1创建所有项目文件：

问题：

使用这样的配置，当使用 webpack 编译 React 应用程序时，会在/public/assets/service-worker.js.

我遇到的问题是我需要这样做来注册它：

并使用 DevTools 进行检查，我可以看到 service worker 是如何注册的，但没有问题：

试图解决，首先尝试：

如果我尝试在服务工作者注册中添加此选项：{ scope: './' }，则会出现此错误消息：

DOMException: 无法注册 ServiceWorker: 提供的范围 ('/this_is_the_part_with_react') 的路径不在允许的最大范围 ('/assets/') 之下。调整范围，移动 Service Worker 脚本，或者使用 Service-Worker-Allowed HTTP 标头来允许范围。

试图解决，第二次尝试：

如果我尝试将 webpack 配置更改为：

/assets现在我可以在没有文件前面的情况下直接注册，因为是在里面创建的/public：

现在，使用 DevTools 检查，我可以看到现在的范围是正确的：

但是，服务人员收到此错误：

并且网络中的所有资产都失败了，404 error因为缺少/assets前面。

问题 2

在 中的 service worker 下localhost:3000/assets，它没有缓存请求（runtimeCaching 配置），并且应用程序没有离线工作。

也许与范围的第一个问题相关的问题相同......

但是我console.log在创建的文件内的 fetch 事件中添加了一个service-worker.js，这永远不会执行。

结论

好吧，如果有人可以帮助我解决我解释的这两个问题（这可能是同一个问题），那就太好了：

• 范围问题
• 缓存请求出现问题并在离线模式下使用应用程序。

太感谢了！

Create React App Service Worker 中默认忽略的 url 对于 firebase auth "__"url 如下，它是这样完成的：

navigateFallbackWhitelist: [/^(?!\/__).*/]

**使用相同的负正则表达式方法，我尝试将以下内容添加到数组中"/dynamicHosting"：**

像这样：

navigateFallbackWhitelist: [/^(?!\/__).*/, /^(?!\/dynamicHosting).*/]**

问题是Service Worker仍然不断拦截路径 "/dynamicHosting"

因此，200.html我的默认 navigateFallback 文件呈现。而不是来自我的服务器的动态 html 文件。

为什么 ServiceWorker 不忽略路径"/dynamicHosting"。

我正在使用 SW-Precache CLI，但没有从 Create React App 中弹出：

sw-precache-config.js 看起来像这样：

更新：

而不是逗号，我不得不像这样写出 navigateFallbackWhitelist 来组合正则表达式：

进行以下更改后，它可以工作：

navigateFallbackWhitelist: [/^(?!\/__).*/+ "|" +/^(?!\/dynamicHosting).*/],

我已经通过现有项目将我的站点的新版本（它在 Polymer 上，现在在 Vue.js 上）部署到 Firebase。

我vue init webpack my-project在新项目中使用带有 Webpack ( ) 的默认 Vue.js 模板

现在我已经部署了新版本，当我打开站点时，我只看到一个缓存的 shell，我认为这是服务人员的错

为了从 Firebase 获取实际的当前文件，我（以及所有以前的访问者）现在必须每次都硬刷新站点（Ctrl+F5在 firefox 中）

安慰

现在，在浏览器控制台（网络选项卡）中，我看到：

• 红色的服务人员，它说：(failed) net::ERR_INSECURE_RESPONSE当我正常打开网站时（没有硬刷新）

• 一些文件的大小属性为(from ServiceWorker)- 这些文件有cache-control:max-age=3600，但自从我部署新版本的站点以来已经一个多小时了。看起来服务工作者本身没有任何标题，也许这就是它不断加载旧文件的原因

我已将此代码添加到firebase.json，然后npm run build尝试删除服务人员，但我仍然遇到问题

Firebase.json

上一个项目中的 Service Worker 代码

我没有在新部署的版本上使用任何服务人员。但是之前的部署注册了一个服务工作者

我使用的是 Polymer 1.0 框架库中的默认 sw-precache 组件，该组件是在我使用的预配置的 Polymer 入门工具包模板中构建的。Service Worker 是在构建时生成的

捆绑 > service-worker.js： https ://jsfiddle.net/uydjzw13/

未捆绑 > service-worker.js： https ://jsfiddle.net/t42fdgow/

问题：

有没有办法从所有站点访问者的浏览器中删除旧的服务工作者，以便他们总是获得新部署的版本？也许我可以用 Webpack 或 Firebase 以某种方式做到这一点？

如果我只是从 Firebase 中删除先前使用服务人员部署的版本，它会得到修复吗？

或者，如果可能的话，也许我可以使用具有唯一功能的服务工作者部署另一个版本，该功能可以删除所有以前的缓存并取消注册以前的服务工作者？

或者我可以使用这样的东西吗？：https ://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister

我不确定如何正确地做到这一点，并且不会意外地注册更多我也无法摆脱的服务人员。

我正在尝试使用sw-precache实施networkfirst策略。 现在我能够缓存数据并能够离线服务。如果我在页面中更改数据（即：将标头从“你好”更改为“欢迎”），则无法反映它总是从缓存中获取数据，只有在我取消注册服务工作者或清除站点数据时才会更新我可以得到我的数据

这是我的 sw-precache gulp 任务：

使用 grunt-sw-precache，我正在尝试缓存我的应用程序：

我总是得到：

我的目录结构如下所示：

我需要缓存所有文件以使应用程序也可以脱机运行。为此，我需要缓存我的整个应用程序文件夹

我该如何改变这个

staticFileGlobs: ['index.html','/app/**/*.{js,html,css,png,jpg,gif}'],

能够让这个工作？

我尝试将其替换为：

静态文件Globs：[' 。'] 也是如此。但我得到了同样的信息。

正如建议的那样，我现在仅将 sw.js 存储在 app 文件夹中并已删除/

但仍然没有任何改变

我一直在尝试在没有用户交互的情况下获取和更新服务人员。我能够缓存页面，但只有在刷新时我才能获取更新构建，这需要用户交互。关于如何完成的任何帮助。

框架选择：Angular2、sw-precache(Library)

这是我的顶级脚本

我用 create-react-app 创建了一个反应应用程序并将其弹出。 service-worker.js正在寻找/index.html，/static/js/main.js并/static/css/main.css缓存。我想将其配置为查找/index.html，/js/main.js并且/js/main.css不更改其输出目录。谢谢

使用 sw-precache 实用程序，我创建了一个服务工作者，如果我刷新页面就可以工作。但最初，fetch 调用返回TypeError: Failed to fetch一个似乎取消其余部分的文件。Refresh 获取更多文件，再刷新几次，直到所有文件都被获取，然后 service worker 工作正常。每个 url 每次都能正常加载，即使使用缓存破坏器也是如此。所有的调用都是对https://localhost:9001的直接get调用。共有 17 个文件。

这是一个代码片段：

我尝试添加keepalive:true,headers:{"Access-Control-Allow-Origin": "*"}到请求但得到相同的结果。

请求似乎很快就失败了，而且我看到请求需要一秒钟多一点的时间才能响应。也许有办法设置超时？

在 chrome 开发工具网络选项卡中，它以红色显示失败的尝试，(canceled)并在左侧显示状态和小服务人员图标。

它似乎在 FireFox 中运行良好。Chrome 遇到了麻烦。