问题标签 [sw-precache]

我正在使用 sw-precache 在我的 Angular 应用程序中缓存静态资源。Grunt 是我正在使用的任务运行器，我在我的 gruntfile.js 中集成了 sw-precache 但它在运行时没有任何作用

它应该已经生成了 service-worker.js 文件

我认为我在命名 rootDir 时遇到问题，但我无法找到解决方案

这是我的 gruntfile.js

我有一个快速的问题。

我正在使用 Polymer 和Lighthouse报告构建 PWA，该清单start_url未由ServiceWorker缓存。

由于我想跟踪使用“添加到主屏幕”功能的用户，我的 manifest.json 包含

"start_url": "index.html?homescreen=1",

我尝试将这个确切的字符串放入我的sw-precache配置文件中，但脚本会生成一个 ServiceWorker，它只是缓存 index.html 文件。（我知道，缓存 index.html 和 index.html?homescreen=1 有点多余）

你有什么想法，如何解决这种行为？

谢谢！

我想创建我的第一个 PWA 应用程序并且我想使用sw-precache. 我想在我的应用程序中有推送通知，但我没有看到任何通过生成添加push通知和notification click侦听器的选项。sw-precache

生成文件后是否应该添加某种连接？

有谁知道该怎么做？

我有一个 gulp 设置，将我所有的 html 放在模板缓存中，以便更快地访问 Angular。我正在尝试使用 sw-precache 在我的项目中添加一个服务人员，以便可以离线使用它。如果我连接到网络，一切正常。当我离线时，对 html 资源（位于模板缓存中）的请求失败，因为它似乎正在从网络请求路径。

我需要在我的 sw-precache 配置中添加一些东西，以便让它按照角度来处理 html 文件的检索吗？

我试图从我的 service-worker 文件中删除两个前缀，但 stripPrefixMulti 选项似乎没有奏效。我有 ：

我想剥离：

并将它们替换为

所以在我的 sw.config 我有：

任何帮助，将不胜感激。

I make use of material icons and roboto font on my site and I've been trying to cache it using sw-precache runtimeCaching API but it doesn't work, I'm not sure if I'm doing it right. I need my service worker to fetch these files from cache. Here's my code. I integrated it into my gulp task:

I'm trying to cache these links:

我有一个由我在页面上注册的 sw-precache 生成的服务工作者。install 和 activate 事件都触发并成功完成，文件被缓存，页面上的注册成功完成，但是 fetch 事件永远不会触发。根据我的阅读，这通常是由于请求的目标超出了服务工作人员的范围，但是范围是应用程序根（我可以从 register 调用返回的注册对象中看到），以及所有来源都包含在里面。我尝试了不同的方法来引用文件，但行为总是相同的。我在 Chrome 和 Firefox 中也得到了相同的结果。除了范围之外，还有什么想法会导致 fetch 不触发？

更新：所涉及的代码特别无用......

service worker 是由 sw-precache 生成的，太长了，无法完整地放在这里，但这里是相关的监听器：

不用说，“拿！” 从不显示在控制台中。

我想要达到的目标：

• 使用加载器/微调器渲染页面

• 如果service-worker.js已注册并处于活动状态，则检查更新

  • 如果没有更新，则删除加载程序
  • 如果updatefound安装了新版本，则重新加载页面
• 否则注册service-worker.js
  • 什么时候updatefound，意味着安装了新的，删除加载器

我正在使用sw-precache模块来生成service-worker.js并遵循注册码：

阅读规范后，很明显没有类似updatenotfound. 看起来像 通过运行get-newest-worker-algorithmserviceWorker.register检查是否在service-worker.js内部进行了更改，但我看不到通过公共 api 公开的类似方法。

我认为我的选择是：

• 在服务工作者注册激活后等待几秒钟，看看是否onupdatefound被解雇
• service-worker.js如果缓存未更新，则从代码中触发自定义事件

还有其他建议吗？

编辑：

我想出了一些代码，通过postMessage()在 SW 注册和 SW 客户端之间使用来解决这个问题（正如@pate 建议的那样）

下面的demo尝试通过软件客户端和软件注册之间的检查来实现postMessage，但是由于软件代码已经被缓存而失败了DEMO

编辑：

所以现在看来​​我无法实现我想要的，因为：

1. 当服务人员处于活动状态时，您无法通过评估 SW 中的某些代码来检查更新 - 这仍然是相同的缓存 SW，没有更改
2. 你需要等待onupdatefound，没有其他东西会通知 SW 的变化
3. activation较旧的 SW 出现在之前onupdatefound
4. 如果没有变化，则不会触发activation
5. SW注册update()不成熟，不断变化，Starting with Chrome 46, update() returns a promise that resolves with 'undefined' if the operation completed successfully or there was no update
6. 设置超时以推迟视图渲染是次优的，因为对于应该设置多长时间没有明确的答案，它也取决于 SW 大小

在SW-Precache 演示代码中，当“将清除旧内容并将新内容添加到缓存中”时，有一行记录到控制台。它还在评论中说，这是让用户知道有新内容可用的好时机。

但是，该脚本位于我的index.html文件（或我的main.ts文件；我已尝试两种方式）中的服务工作者注册块中。但是，我希望在 angular component 中收到有关此更新的通知，因此我可以向用户显示一个很好的通知。

这样做的正确方法是什么？我在组件中创建了一个 observablemain.ts并将其导入，但这会导致循环引用错误。

我曾经sw-precache为Firebase托管的 Angular 2 应用程序生成服务工作者。

错误：

结构

sw-precache-config.js

索引.html