什么是pwa？

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

要将一个普通网站转成PWA网站，只需要添加两个文件: manifest.json和service-worker.js

前者是对APP的说明，后者是我们进行cache操作的地方 manifest.json

在这个配置文件里我们可以定义: name: APP的名称 short_name: 被添加到桌面(相当于安装)后, app图标下面的名称 start_url: 打开应用时所处URL display: 指定成standlone就能显示的跟原生APP一样(没有浏览器导航栏之类的东西)

其他还有背景颜色和图标之类的，都是些简单的属性在MDN上查一下就完事了: https://developer.mozilla.org/en-US/docs/Web/Manifest service-worker.js(简称sw)

要用sw，首先要在index.html里对sw进行注册

if('serviceWorker' in navigator){
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
}

sw相当于一个安装器+拦截器，简单说下这个安装过程是怎么实现的: 每次执行navigator.serviceWorker.register('/sw.js')都会重新下载sw.js这个文件，就像每次打开网络游戏都要先检查更新登陆器一样, 然后登陆器会告诉我们是不是要下载安装补丁包。如果新下载的sw.js跟之前稍微有点不一样，我们的网站都会被认为是一个新版本，然后重新触发install事件(在sw.js里面监听), 反之如果文件完全一样就不会触发install事件. 就像更新结束之后网游会要求用户重启游戏一样, install结束之后，我们进入一个等待状态，只有用户重新打开网站，我们才会进入激活状态触发activate事件(和install事件一样activate事件一个版本只触发一次). 请仔细阅读上面这个描述，我已经尽可能用简单易懂的方式去描述了。上面提到的两个事件install和activate是最重要的，前者我们通常新建一个cache，然后预加载素材。用户重启网站后，在activate事件里我们通常删除上个版本的cache。 下面是无聊的代码(占了整个sw文件的三分之二)，就是做了上述的两件事情, 不想看就跳过吧

const staticCacheName = 'site-static-v1';
const assets = [
'/',
'/index.html?v=4',
'/assets/js/ui.js',
'/assets/css/main.css',
'/assets/images/background-home.jpg',
'https://fonts.googleapis.com/css?family=Lato:300,400,700',
];
// install event
self.addEventListener('install', evt => {
evt.waitUntil(
caches.open(staticCacheName).then((cache) => {
console.log('caching shell assets');
cache.addAll(assets);
})
);
});
// activate event
self.addEventListener('activate', evt => {
evt.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys
.filter(key => key !== staticCacheName)
.map(key => caches.delete(key))
);
})
);
});

在sw里，我们主要做的事情有两件: 管理cache(增删查改)

拦截网络请求, 从而实现像动态cache之类的骚操作 拦截网络请求就是剩下的三分之一代码, 针对一个请求我们先检查cache里面有没有，如果有就直接返回，没有就继续请求:

self.addEventListener('fetch', evt => {
evt.respondWith(
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request);
})
);
});

上面就是整个sw的代码和工作原理 用谷歌教程上的话来说，sw的生命周期是pwa最大的难点, 全部的工作原理我都在上面说明了, 如果看明白了那你就是掌握了pwa最难的部分，接下来我再总结一下(三个状态): 预加载素材时的安装中状态installing

install完之后, 新的sw + chache没有立即生效，而是进入等待用户重新打开网站的waiting状态

用户重新打开网站之后，进入激活状态activate

PWA APP如何更新

从上面sw的工作原理部分可以得知，sw.js是每次打开网站都会重新加载的！

所以想要更新网站很简单，只要更改sw.js(比如加上一行新的素材路径), 然后在install事件里新开一个cache，然后在activate事件里删除旧版本cache就OK了

比如上面的代码, activate事件里已经做了删除旧cache的操作(如果cache和当前版本cache名不一样就删掉)，所以只要更改staticCacheName就可以了