Angular 学习笔记 ( PWA + App Shell )

更新 : 2019-06-29 

自从 pwa 一推出开始玩了一把，一直到如今才真的有项目需求...

从新整理了一下. 

https://angular.io/guide/service-worker-getting-started

跟着 get start 走，基本上 3 个 command 就搞定了. 真实方便呢

下面提一提须要留意的东西 

Hash Mismatch 问题

若是咱们用 live server 来测试, 你会发现 pwa 跑不起来, 

若是咱们用 iis 也颇有可能出现这种状况 

其中的关键就是, ng build 的时候 angular 会拿 index.html 来 hash 

而后以这个判断内容是否有修改. 这个是很经常使用的技术. 好比 html content security policy 在保护 script 执行时也有对比 hash 的概念

live server 和 iis 或者 cdn 常常会帮咱们 minify html, 因此会生成的 hash 与 ng build 的时候不吻合 (ng build 的时候没有 minify)

官方的例子很巧妙的使用了 http-server 避开了这件事儿... 也留些了坑 /.\

https://github.com/angular/angular/issues/21636 （不少人踩进去了...）

固然你也不能怪谁啦... 

指望之后 angular 会帮咱们 minify 咯

https://github.com/angular/angular-cli/issues/11360

https://github.com/angular/angular/issues/23613

https://www.willpeavy.com/tools/minifier/

目前个人解决方法就是手动提早 minify index.html 才 ng build. 

若是是开发阶段，仍是用 http-server 吧. 

npm i g http-server 

http-server -p 4200 -a localhost ./dist/project-name -o http://localhost:4200/index.html

 

另外一个要注意的是 cache dataGroups 机制. 

data groups 一般用来 cache api 返回的资料. 

它有 2 个 mode 

一个是 freshness, 另外一个是 performance

先说 performance，它就好像通常的 js 的 cache 同样，有 cache 就不会去 server， 等到 max age 到为止. 

freshness 比较特别, 在 network 好的状况下, 它老是去 server 拿回来，而后存一份 cache 

当 offline 时它会立刻使用 cache, 或者时 network 超时的时候它会马上返回 cache，

而后继续等待 network 把资料拿回来后更新 cache, 注意它只是更新 cache 并不会通知 app 哦, 因此 app 这时候用的是以前 cache 的资料。

这个体验就不是很好了，可是一个请求是没法得到 2 个 response 的，若是拿了 cache 那么就获取不到新的了. 

咱们也没法精准的判断 response 是 from cache or server. (最多只能判断 timeout 时间来猜想而已.)

通常上咱们的需求是, offline 用 cache, online 用 server. 没有超不超时的概念. 

因此我一般的作法时 set 一个很长的超时, 若是用户不是 offline 而是超时的话也不会用 cache, 而是报错之类的处理. 

 

还有一个好的功能是, by pass 

To bypass the service worker you can set ngsw-bypass as a request header, or as a query parameter. (The value of the header or query parameter is ignored and can be empty or omitted.)

在请求 header 加上 ngsw-bypass 就能够 skip 掉 service worker 的 fetch 了. 

 

最后在说说 notification click 的问题.

https://github.com/angular/angular/issues/20956

这个 issue 被关掉了, ng 提供了一个监听的方法

this.swPush.notificationClicks.subscribe(v => {
  console.log('done');
});

这个只有在 app 打开着的状态下才有用, ng 并无实现 action open window ...

若是咱们要实现依然须要修改 ngsw-worker.js

真的是啊....

https://github.com/angular/angular/issues/21197

也没有给咱们好的方式去扩展 

目前用到一个作法是 ..

https://medium.com/@smarth55/extending-the-angular-cli-service-worker-44bfc205894c

//my-service-worker.js
self.addEventListener('notificationclick', (event) => {
  console.log('notification clicked!')
});


//app.module.ts
ServiceWorkerModule.register('my-service-worker.js', { enabled: environment.production })


"assets": {
  ...,
  "src/my-service-worker.js"
}


//my-service-worker.js
importScripts('./ngsw-worker.js');
self.addEventListener('notificationclick', (event) => {
  console.log('notification clicked!')
});

作法就是 extends + override 咯。这样就能够实现了咯

一个好得体验应该是这样子，到用户在线时，咱们不该该发 notification，而应该用 web socket 去同步资料

只有当用户不在线时，咱们才须要经过 notification... 否则你想，用户就在屏幕前，notification 一直发... 人家会不喜欢嘛。

 

 

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.