PWA入门 -- H5时代原生APP

本文是一个pwa的入门教程，也算是一个introduction(导读)，不会太深入
主要聊聊三个重点: pwa的本质，构成pwa的两个文件，pwa app如何更新

pwa的本质

q: 网站和原生app在存储上的本质区别是什么？
a: 网站中使用的素材都是通过请求实时获取的, app中使用的素材都是本机中存储的。在离线或者素材过大的情况下，前者每次访问都要加载，加载过慢的缺点就暴露了出来。离线使用体验永远大于在线使用体验

有了这个前置知识之后，补充一个事实: chrome在版本43, 2015年5月的时候提供了chache api
而cache api就是pwa的魔法： 通过预先下载素材缓存到cache里，下次打开就不用经过网络请求，实现离线的效果

个人感觉这样解释应该很清晰了，所以下面进入实际操作环节:

两个文件

从表面上看，要将一个网站转成pwa网站，只需要添加两个文件: manifest.json和service-worker.js
前者是对app的说明，后者是我们进行cache操作的地方

manifest.json

在这个配置文件里我们可以定义:

1. name: app的名称
2. short_name: 被添加到桌面(相当于安装)后, app图标下面的名称
3. start_url: 打开应用时所处url
4. display: 指定成standlone就能显示的跟原生app一样(没有浏览器导航栏之类的东西)

其他还有背景颜色和图标之类的，都是些简单的属性在mdn上查一下就完事了: https://developer.mozilla.org/en-us/docs/web/manifest

service-worker.js(简称sw)

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

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里，我们主要做的事情有两件:

1. 管理cache(增删查改)
2. 拦截网络请求, 从而实现像动态cache之类的骚操作

拦截网络请求就是剩下的三分之一代码, 针对一个请求我们先检查cache里面有没有，如果有就直接返回，没有就继续请求:

self.addeventlistener('fetch', evt => {
  evt.respondwith(
    caches.match(evt.request).then(cacheres => {
      return cacheres || fetch(evt.request);
    })
  );
});

上面就是整个sw的代码和工作原理

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

1. 预加载素材时的安装中状态installing
2. install完之后, 新的sw + chache没有立即生效，而是进入等待用户重新打开网站的waiting状态
3. 用户重新打开网站之后，进入激活状态activate

pwa app如何更新

从上面sw的工作原理部分可以得知，sw.js是每次打开网站都会重新加载的！
所以想要更新网站很简单，只要更改sw.js(比如加上一行新的素材路径), 然后在install事件里新开一个cache，然后在activate事件里删除旧版本cache就ok了

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