标签: sw-toolbox

我使用带有sw-toolbox库的服务工作者.我的PWA缓存除API查询(图像,css,js,html)之外的所有内容.但是如果某些文件有一天会被改变怎么办呢.或者如果将更改service-worker.js会怎样.应用程序应该如何知道文件的变化？

我的service-worker.js:

'use strict';
importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
  name: 'ionic-cache'
};

// pre-cache our key assets
self.toolbox.precache(
  [
    './build/main.js',
    './build/main.css',
    './build/polyfills.js',
    'index.html',
    'manifest.json'
  ]
);

// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.cacheFirst);

// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;

我不知道在PWA中更新缓存的常用方法是什么.也许PWA应该在后台发送AJAX请求并检查UI版本？

我使用sw-precache以及sw-toolbox允许的角度应用的缓存页面的离线浏览.

该应用程序通过节点快速服务器提供.

我们遇到的一个问题是,index.html有时似乎没有在缓存中更新,尽管其他资产已在激活新服务工作者时更新.

这会使用户过时index.html,在这种情况下尝试加载不再存在的版本化资产/scripts/a387fbeb.modules.js.

我不完全确定发生了什么,因为似乎在index.html已正确更新的不同浏览器上具有相同的哈希值.

在一个浏览器过时(有问题)Index.html

(缓存2cdd5371d1201f857054a716570c1564哈希)包括:

<script src="scripts/a387fbeb.modules.js"></script>

在其内容中.(此文件不再存在于缓存中或远程上).

在另一个浏览器上更新(好)index.html

(缓存相同2cdd5371d1201f857054a716570c1564)包括:

<script src="scripts/cec2b711.modules.js"></script>

这两个具有相同的缓存,尽管返回给浏览器的内容是不同的!

我应该怎么做？这是否意味着sw-precache当新的SW激活时,不保证原子缓存破坏？怎么能保护这个呢？

如果这些有帮助,这是生成的service-worker.js文件sw-precache.

注意:我意识到我可以使用remoteFirst策略(至少为index.html)来避免这种情况.但我仍然希望了解并找出一种使用cacheFirst策略来充分发挥性能的方法.

注2:我在其他相关问题中看到,可以更改缓存的名称以强制破坏所有旧缓存.但这似乎超越了sw-precache仅破坏更新内容的想法？这是要走的路吗？

注3:请注意,即使我很难重新加载网站被破坏的浏览器.该站点可以工作,因为它会跳过服务工作者缓存,但缓存仍然是错误的 - 服务工作者似乎没有激活 - 我猜是因为这个特定的SW已经被激活但是在正确破坏缓存时失败了.随后的非硬刷新访问仍然会看到破碎index.html.

我一直在与服务工作者和sw-toolbox一起玩弄.两者都是很好的方法,但似乎有它们的弱点.

我的项目开始使用谷歌的服务工作者方法(链接).我看到的方式是你必须手动更新缓存清除的版本号.我也错了,但我不认为用户访问过的网页不会被缓存.

与sw-toolbox方法相比,我需要添加的是以下代码:

self.toolbox.router.default = self.toolbox.networkFirst;

self.toolbox.router.get('/(.*)', function (req, vals, opts) {
    return self.toolbox.networkFirst(req, vals, opts)
        .catch(function (error) {
            if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
                return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
            }
            throw error;
        });
});

然后将解决缓存页面的问题.这是我的问题:在将sw-toolbox应用到我的项目之后,旧的服务工作者不会被新的服务工作者清除或替换,除非我去开发工具清除它.

任何想法如何解决这个问题？

描述：

我们正在使用sw precache预先缓存脚本，因此要更新脚本，我们提供了reload选项，因为我们正在监听工作程序消息，以跳过由于未知原因而等待新安装的服务工作程序的问题，我们无法正确执行

importScript

// GETTING OLD SW reference (self) and NOT getting newly installed SW reference

self.addEventListener('message', function(event) {
    *// not working*
    self.skipWaiting();
});



// But if we put skipWaiting() in 'install' listener 
// it is getting correct new SW reference and working correctly

self.addEventListener('install', function(event) {
    // self.skipWaiting();
});

软件注册

if('serviceWorker' in window.navigator) {
      window.addEventListener('load', function() {
        window.navigator.serviceWorker.register("/serviceWorker.js").then(function(registration) {
          console.log("ServiceWorker registration successful with scope: ", registration);
          registration.onupdatefound = function() {
            console.log('NEW WILD WORKER HAS SPAWNED.!', registration);
            var installedWorker …

您能告诉我我的 Service Worker 安装出了什么问题吗？这些错误出现在 Chrome 控制台中（参见 image-1）。

The script resource is behind a redirect, which is disallowed.                          service-worker.js:1

Failed to load resource: net::ERR_UNSAFE_REDIRECT          https://harampress.com/post/45/service-worker.js

我在后端使用 Laravel 框架，如果这有帮助的话

只是知道我的 service-worker.js 位于网站的根目录中，在主页上工作正常，chrome 控制台上没有错误，但是当我尝试导航到帖子时，就会出现这两个错误（参见图片- 2）。

知道我使用 sw-precache 和 sw-toolbox，我使用 sw-precache 和 gulp 生成服务工作线程。

图片-1

图片-2