问题标签 [sw-precache]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
9890 浏览

javascript - 由于附加了 DevTools,超时计时器导致的 Service Worker 终止被取消

操作系统:Windows 10 Pro
webpack:1.14.0
sw-precache-webpack-plugin:0.9.1
sw-precache:5.0.0

所以,我启动了我的网站,并且有一段时间没有主动做任何事情,然后在 devTools 中生成了上面指定的错误消息。如果执行某些过程,则不会出现错误

我的反应代码如下:

webpack.config.prod.js

应用程序.js

这里有什么问题?

0 投票
3 回答
1218 浏览

service-worker - 如何使用 sw-precache 缓存除内容之外的所有内容

我在 jekyll 网站中使用 sw-precache 通过以下配置添加离线功能:

问题是,当我更改网站中的内容(例如,博客文章中的文本,或索引页面中的某些文本)时,更改不会显示,直到安装了新的 serviceworker 版本并且浏览器已经刷新,这当然是cacheFirst.

我想要的是对站点索引的请求始终首先是网络,这就是我在这里尝试的:

但这不起作用,索引总是从服务人员而不是从网络中获取,我该如何做到这一点?

0 投票
1 回答
1801 浏览

angular - 问题缓存破坏 serviceworker index.html 文件

我正在使用 Google 的SW Precache为托管在 firebase 上的 Angular(当前为 v.4)应用程序生成 serviceworker。我正在使用 Angular cli 生成我的分布式文件。在部署我的应用程序时,我使用以下命令:

我的sw-precache-config.js文件如下所示:

如果我进行更改并部署新版本,即使我刷新或关闭浏览器,我也会得到缓存的 index.html 文件。?cachebust=1如果我在 url 的末尾添加类似的内容,我可以获得更新的 index.html 文件。我的流程或配置中是否有什么问题不允许加载最新的 index.html?

0 投票
1 回答
401 浏览

service-worker - 如何使用所有站点页面初始化 sw-precache

我想让一个应用程序完全离线可用。即用户在在线时点击一个按钮(或者不点击,这可能会自动发生),并且每个页面,包括所有动态页面,以及网站上的资产都可以被缓存。

我知道我需要生成所有资产的列表,是否有可以执行此操作的工具,或者 sw-precache 中内置的任何方式?

另外,缓存可以有多大,可用多长时间?我认为它可以是任何大小并且可用,除非用户专门清除他们的浏览器缓存。

0 投票
2 回答
228 浏览

javascript - swPrecache 和 CDN 作为代理?

我正在使用 swPrecache 来加载我的 PWA 的静态资产,以支持离线模式。它工作得很好。我的设置是这样的:

https://www.myexampledomain.com/myapp/加载静态 index.html,然后加载使用 swPrecache 加载静态资产,如 JS、图像、CSS 等。请注意,这些都是从同一个域加载的,例如 www.myexampledomain.com/myapp/js/file1.js

但是我的 swprecache 列表有相当数量的文件,并且在较慢的互联网连接上需要一些时间来下载。仅供参考,我已经将服务工作者注册延迟到“加载”事件之类的东西。

所以这就是我现在正在尝试的。我需要有人来验证这是否可能:

  1. https://www.myexampledomain.com/myapp/像以前一样加载静态 html 文件。
  2. 是否让 swPrecache 拦截到应用程序域的静态请求(例如https://www.myexampledomain.com/myapp/js/file1.js),然后将这些请求提取到 CDN 端点?(例如https://some.cloudfront.com/myapp/js/file1.js)。
  3. 下载后,swPrecache 将继续照常工作。

所以本质上我希望让 swPrecache 代理静态资产请求到 CDN,以便在初始加载期间更快地下载。

对此的任何评论/指示都会有所帮助。

0 投票
1 回答
844 浏览

javascript - 使用 Google 的 sw-precache 构建的 service worker 真的可以成为 networkFirst 吗?

我运行运行 Hugo 的网站https://www.igluonline.com,我最近安装了一个遵循 Google 的sw-precache的服务工作者。

这是配置文件:

注意事项:

尽管有时自动生成的代码会出现一些错误,但 service worker 可以正常工作并在 Web 和移动设备上提供离线体验。

它也已cache-control设置为max-age=0,当我推送新代码时,它会进行更新。

问题:

我设置runtimeCaching handlernetworkFirst并根据谷歌的sw-toolbox API(在sw-precache使用时出现runtimeCaching)它应该最好从 http 调用中获取页面,如果没有连接它应该回退到缓存。

但是当我刷新我的代码并打开一个新窗口进行测试时(请注意,我确实在更新之前关闭了运行网站的所有选项卡和窗口),它将显示缓存页面。它自然会下载新的服务工作者并在第二次重新加载时更新页面,但我不希望我的访问者每次都刷新我的主页以获取新内容。

我尝试将runtimeCaching代码更改为以下代码,希望至少让我的主页直接从网络加载,但我没有运气:

现在我不确定所需的 PWA 体验是否是这样的——这意味着用户必须重新加载两次或至少访问两个页面才能看到刷新的代码——或者我是否犯了一些错误。我真的很感激考虑。

0 投票
1 回答
170 浏览

service-worker - 如何使用服务工作者的 sw-toolbox sw-precache 库显示自定义 404 页面

我有一个 SPA,它进行各种 http 调用以从第三方服务获取内容并在页面上显示内容。如何配置 /use sw-toolbox 和 sw-precache 库,以便如果 http 调用由于脱机而失败,它会显示自定义 404 页面。

0 投票
1 回答
599 浏览

javascript - 使用 gulp 在 sw-precache 中缓存来自后端服务器的 API 和图像

我对在我的应用程序中使用 sw-precache 和 gulp 非常陌生。我创建了由 angularjs 完成的 Web 应用程序,并从我们的后端 nodejs 应用程序中获取信息。在那个应用程序中,我添加了sw-precache功能来制作离线第一个应用程序。

来自后端的 api 之一,公司图像将嵌入如下:

这是我sw-preache与 gulp 一起使用以生成服务工作者文件的编码。

请让我知道上面的编码是缓存 API 的正确方法,请让我知道如何在 gulp 文件中缓存来自 URL 的图像?

0 投票
3 回答
3208 浏览

service-worker - 长时间等待 Service Worker 的请求

我注意到等待服务工作者响应缓存中的项目的时间并不像您预期​​的那么快。我已经看到与sw-precache自定义书面服务人员的等待时间相同。

对 ServiceWorker 的请求

这个等待时间的可能原因是什么,我该如何减少它?

fetch在自定义服务人员上的事件如下所示:

0 投票
1 回答
560 浏览

progressive-web-apps - workboxJS 应该取代 sw-precache 的使用吗?

在WorkboxJS的 1.0.0 版本之后,是否应该将其用作sw-precache的替代品?

从我有限的经验来看,它似乎包括了sw-precache' andsw-toolbox 的所有精彩内容等等。用他们自己的话来说:

下一个版本的 sw-precache 和 sw-toolbox。

Workbox 是对我们之前专注于模块化的 Service Worker 库的重新思考。它旨在通过统一的界面减少摩擦,同时保持整个库的大小。同样强大的功能,更易于使用和跨浏览器兼容。