前言
PWA（Progressive Web Apps），是一种基于 Web 技术构建的应用，它结合了 Web 和 Native 应用的优点，让用户可以在网页浏览器中获得类似于原生 app 的体验。因为 PWA 是一种基于 Web 技术，所以在开发中具有很高的跨平台性，但同时也存在着一些局限性，那就是怎么处理应用更新的问题。本文将会讲解 PWA 应用如何处理应用更新。
在 PWA 应用中，由于其是基于 Web 技术构建的，所以浏览器具有离线缓存的功能，而且离线缓存可以帮助 PWA 对上游服务进行响应速度和可用性优化，以此来提升用户的使用体验和应用的性能。但是，由于 PWA 应用需要手动实现应用更新的功能，所以当开发者更新应用或推出新的版本时，如果用户不刷新页面或者访问过去的缓存，就无法体验到更新后的应用。
第一种更新方式：手动刷新
当你更新了你的 PWA 应用并且想要让用户使用新版本的应用，正确的做法是通过 manifest 文件来告诉浏览器，有一个新版本可用，并提示用户即可。
// javascriptcn.com 代码示例
{
"name": "你的应用名",
"short_name": "应用缩写名",
"start_url": "./index.html",
"scope": "./",
"display": "standalone",
"theme_color": "#4DBA87",
"background_color": "#4DBA87",
"icons": [
{
"src": "/icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"serviceworker": {
"src": "./sw.js"
},
"prefer_related_applications": false,
"related_applications": []
}当你更新了你的 PWA 应用程序并更新了 manifest 文件时，可以在新版本的 SW（service worker）中嵌入以下代码，以告知新版本可用：
self.addEventListener('install', function(event) {
self.skipWaiting(); //skipwaiting event 实际上是用来新增版本，立即调起activate 事件
});
self.addEventListener('activate', function(event) {
console.log('activate');
event.waitUntil(self.clients.claim()); //这个API是用来激活更更新后的service worker的。
});在新的 Service Worker 的 activate 事件处理程序中，你需要调用 clients.claim() 方法来激活新的 Service Worker。
上述代码片段告诉浏览器有一个新版本可用。但如果用户没有立即访问应用程序或者关闭了该应用程序，则浏览器不会立即加载并使用新的 Service Worker。
在这种情况下，你可以通过使用 “更新” 通知和启发式缓存来通知用户更新可用。
你可以在 Service Worker 中，编写以下代码，向用户展示更新通知：
// javascriptcn.com 代码示例
self.addEventListener('install', function(event) {
self.skipWaiting(); //该代码片段立即激活新的Service Worker
});
self.addEventListener('activate', function(event) {
event.waitUntil(self.clients.claim());//激活新Service Worker
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) { //判断缓存是否有可用，有直接使用缓存
if (response) {
return response;
}
var fetchRequest = event.request.clone(); //如果请求需要更新，则使用fetch进行更新
return fetch(fetchRequest).then(function(response) {
if(!response || response.status !== 200) {
return response;
}
var responseToCache = response.clone(); //使用response.clone()进行更新缓存操作
caches.open('v1')
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
});
})
);
});
self.addEventListener('message', function(event) {
if (event.data.action === 'skipWaiting') {
self.skipWaiting();
}
});在 Service Worker 中加入这些代码后，当应用更新时，这些代码将向用户发出更新通知。如果用户选择更新应用，应用将从服务器上直接下载新版本。
第二种更新方式：启发式缓存
使用启发式缓存可以让你的 PWA 应用程序在更快地更新的同时也能保持较优的性能。为了保持 Web 应用程序的性能，用户可以启用启发式缓存来缓存应用程序的静态 Web 资源。启发式缓存使用版本号，并将新版本缓存到新的缓存中。
下面是启发式缓存的代码片段：
// javascriptcn.com 代码示例
const CACHE_NAME = 'my-pwa-cache-v1';
self.addEventListener('install', function(evt) {
console.log('The service worker is being installed.');
evt.waitUntil(caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll([
'/',
'./index.html',
'./style.css',
'./app.js'
]);
}));
});
self.addEventListener('fetch', function(evt) {
console.log('The service worker is serving the asset.');
evt.respondWith(fromCache(evt.request));
evt.waitUntil(update(evt.request));
});
function fromCache(request) {
return caches.open(CACHE_NAME).then(function(cache) {
return cache.match(request).then(function(response) {
return response || fetch(request);
});
});
}
function update(request) {
return caches.open(CACHE_NAME).then(function(cache) {
return fetch(request).then(function(response) {
return cache.put(request, response.clone()).then(function() {
return response;
});
});
});
}上述代码片段使用了 Cache API，首先在 Service Worker 中开启启发式缓存，然后缓存应用所需要的 Web 资源，并且在缓存已存在时，请求的 Web 资源可以从缓存中获取。
当你想更新你的 PWA 应用程序时，如果一个新版本可用，你可以为该新版本分配一个新的版本号。
你可以打开新版本的 Service Worker 并添加以下代码：
// javascriptcn.com 代码示例
const CACHE_NAME = 'my-pwa-cache-v2';
self.addEventListener('activate', function(evt) {
evt.waitUntil(caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== CACHE_NAME) {
console.log('The old cache is being cleared.');
return caches.delete(key);
}
}));
}));
return self.clients.claim(); //这里需要调用 clients.claim() 来激活新的 Service Worker
});你可以通过递增缓存名称的方式来启用不同的缓存版本。在新版本的 Service Worker 中，你将有机会删除旧的缓存。
以上就是 PWA 应用程序如何处理应用更新的方式，开发者可以选择手动刷新或启发式缓存更新，然后再联系用户更新应用程序。这些方法是从不同角度为 PWA 应用程序提供更好的用户体验的措施。
总结
在本文中，我们介绍了 PWA 应用程序如何处理应用更新的过程。在 PWA 应用程序中，应用程序更新需要经过手动刷新或者启发式缓存的方式来完成。手动刷新将会更好的提醒用户进行应用程序的更新，而且可以在更新过程中很好地保留应用程序性能；启发式缓存能够在更快地更新应用程序的同时保证良好的性能。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654dfb277d4982a6eb753c66