Home / Questions / 271833
Accepted
Eduardo Munizaga
Asked: 2020-06-14 06:46:42 +0800 CST 2020-06-14 06:46:42 +0800 CST

如何正确更新渐进式 Web (PWA)，以便用户检测到更改？

  • 772

我正在使用一个非常简单的移动渐进式网络（应用程序非常简单，制作应用程序还不够）。相应地，这个移动网站安装了一个 Service Workers (sw.js) 来缓存离线元素及其对应的manifest.json. 在 Service Worker 的开头指出以下内容：

var cacheName = 'v1.0.3.0:static';

我认为每次版本值按照Google Developers post 中的指示更改时，用户都会收到新的更新，但这不起作用。用户保留他的旧版本而没有收到更改，到目前为止，唯一的方法是让用户从他们的手机中删除历史记录（并且在某些情况下重新安装 PWA）。

有没有办法自动执行此操作或通知用户（不使用推送通知）新的更改？我附上我的 sw.js，以防它对分析有用。

var cacheName = 'v1.0.3.0:static';

self.addEventListener('install', function(e) {   
    e.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll([
                'https://www.......com',
                'https://www.......com/js/app.js',
                ....
                ....

            ]).then(function() {
                self.skipWaiting();
            });
        })
    );
});

self.addEventListener('fetch', function(event) {   
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {              
                return response;
            }          
            return fetch(event.request);
        })
    );
});
javascript

1 Answers

  1. Best Answer

    您需要在更新 service worker 时清除旧版本的缓存。

    self.addEventListener('activate', function(event) {
    event.waitUntil(caches.keys().then(function(names) {
        return Promise.all(
            names.filter(function(name) {
                return name !== cacheName;
            }).map(function(name) {
                return caches.delete(name);
            })
        );
    }).then(function() {
        return self.clients.claim();
    }));
});

    这段代码的作用是在新的 service worker 激活时运行一个函数。因此，它获取已创建缓存的所有名称并遍历它们以删除所有与“cacheName”常量名称不同的名称。

    注意：要查看更改，需要重新加载页面。

    • 0