Angular 学习笔记 ( PWA + App Shell )

PWA (Progressive Web Apps) 是未来网页设计的方向. 渐进式网站.

Angular v5 开始支持 pwa 网站 (所谓支持意思是说有一些 build in 的方法和规范去实现它) 。

就目前来说 pwa 有几个特点 :

1.https

2.Service work

3.Cache API

4.拦截 Fetch (任何游览器发出的请求, 包括 index.html)

5.Push API

6.Share API

主要的用途是 :

1. offline view (通过 service work + cache + 拦截 fetch 实现)

2. push notification (通过 service work + Push API + Notification API 实现)

3. AMP 网站预加载 service-work.js (在 amp page 出发 service worker 预加载整个页面需要的 html,js.css)

参考 :

https://blog.angular-university.io/service-workers/

https://blog.angular-university.io/angular-service-worker/

实现我就不说了，人家已经是 step by step 了. 我就讲一些重点吧.

service work 比较复杂的地方是 life cycle.

当你访问一个网站后 www.domain.com

当页面渲染好后, ng 会找到一个好的时间点去 register service worker 也就是加载 "/ngsw-worker.js".

ng 有自己的方式(比如对比文件的 hash 等等)去管理 life cycle (如果你知道怎么自己实现 service worker 的话，你会发现 ng 完全自己控制了 life cycle 而没有使用 default 的)

service work 开启后, 就是一般的预加载 css, js, html 等等. 然后统统都会 cache 起来.

完成后, 你 offline 就可以看到效果了. 你 refresh 的话会发现所有的请求都是从 cache 返回的，包括 index.html

连 index.html 都 cache 起来了，那要怎样更新网站呢 ？

每一次更新, ng 在 cli build 的时候都会生产一个 hash 放进 ngsw-worker.js，

网站每一次刷新虽然会先使用 cache 版本，但是它也会马上去加载 ngsw-worker.js 然后进行判断看 hash 是否一样。

如果发现有新的 js,css 那么就会去加载，等到下一次 refresh 就会使用新版本了. 如果你希望用户马上使用新版本, ng 也开放了一个 API

可以通过 subscribe 的方式监听这个 update event, 然后可以 alert 用户叫用户马上 refresh.

所以流程是  cache first -> check update -> notify user and update now Or wait for user next refresh

我建议在网站比较稳定后才设置 service work, 而

而且网页必须向后兼容, 或至少要有错误处理在版本过久的情况下。

因为不管怎样，用户一定会先获取到 cache 的版本，如果你的 cache 版本运行失败(比如你的 Ajax response 已经换了, 而之前的 js 版本无法处理, 甚至 error, 这样用户可能非常的难升级到新版本，而且体验也会很糟. 所以要用 pwa 要注意这个哦)

除了 cache, ng 也封装了 push notification。

之前写过一篇关于 push 的原生实现.

http://www.cnblogs.com/keatkeat/p/7503615.html

ng 的实现看这个

https://medium.com/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1

目前还不支持 notification click 时间，这个还蛮糟糕的，非常重要的功能丫。怎么会没有实现呢 ？ https://github.com/angular/angular/issues/20956

而且也没有扩展的方式，如果硬要就需要直接改 ngsw-worker.js  源码了。

最后说说 App-shell

这个和 skeleton 类似的概念, 取代单调的 loading bar.

step by step :  https://blog.angular-university.io/angular-app-shell/

ng 的实现手法是通过 cli build 时运行 server render, 然后把渲染好的 skeleton page 插入到 index.html.

好啦，接下来我会准备做一个简单的电子商务, 来实战一个 ng. 会做成一个视屏希望新手们可以省走冤枉路.