PWA、AMP、MIP简介

前端技术双周会

PWA的优秀特性

  • Progressive：这是最重要的特点。PWA是渐进增强（Progressive Enhancement）的。越是先进的浏览器上你可以体验的效果越优秀。
  • Responsive：不管是什么浏览器分辨率，不管是在桌面上、平板电脑上还是手机上，PWA都可以达到最佳浏览效果。
  • Connectivity independent：连接性独立。即便是网络情况糟糕的环境下依然可以流畅运行。依托于Service Workers技术你甚至可以在离线环境中使用PWA。
  • App-like：PWA的用户体验无限接近于原生App。绝大部分情况下App不再有任何优势。嗯，是的PWA可以全屏玩。
  • Fresh：PWA不需要你每周再去下载一个更新版本。我们知道每次App让你下载一个新版本无非是多几个广告。0.0
  • Safe：安全性。你不需要再担心你的数据被劫持，不需要担心你下载安装恶意挂码的App来威胁你的个人隐私。
  • Discoverable：可发现性。PWA应用的所有内容都可以被搜索引擎轻易地发现并索引。App中的海量数据可以各自连通到Web中，你不需要再为了一篇文章下载几十M的App。
  • Re-engageable：PWA可以请求用户允许接受Push Notification，就像一般App推入消息那样，PWA也可以做到系统级的提醒。
  • Installable：本质上PWA是一个RWD的网站，这就意味着你不需要安装它。但是你如果担心用户用后即扔就多余了，PWA可以请求用户在他们的桌面上放置一个小图标由此再次进入PWA反复使用。用户并不需要去任何一个App Store进行PWA的安装，品牌分发PWA也不需要支付应用市场任何费用，完全独立运营。
  • Linkable：PWA可以有自己的链接。PWA的每一块内容都能够有独立的链接。这区别于App Link调起已经安装的App你可以无缝地从搜索引擎或其他网站开启PWA。

什么是Service Worker

Service Worker是一项比较新的Web技术，是Chromium团队在吸收了ChromePackaged App的Event Page机制，同时吸取了HTML5 AppCache标准失败的教训之后，提出一套新的W3C规范，旨在提高WebApp的离线缓存能力，缩小WebApp与NativeApp之间差距。

启用Service Worker

  • 1、切入到https；由于Service Worker可以劫持连接，伪造和过滤响应，所以保证其在传输过程中不被篡改非常重要。
  • 2、在页面加载的恰当时机注册Service Worker；示例中在index页面的body onload事件中注册了同path下的serviceworker.js作为index页面的服务线程。
  • 3、编写serviceworker脚本逻辑；serviceworker是事件驱动型服务线程，所以serviceworker脚本逻辑中基本都是以事件监听作为逻辑入口，示例中在serviceworker脚本被安装的install事件中缓存index页面主资源及子资源，在fetch事件中，拦截前端页面发起的资源请求并到之前缓存的cache中匹配。

需要注意点

  • 1、Service Worker线程运行的是js，有着独立的js环境，不能直接操作DOM树，但可以通过postMessage与其服务的前端页面通信。

    2、Service Worker服务的不是单个页面，它服务的是当前网络path下所有的页面，只要当前path 的Service Worker被安装，用户访问当前path下的任意页面均会启动该Service Worker。当一段时间没有事件过来，浏览器会自动停止Service Worker来节约资源，所以Service Worker线程中不能保存需要持久化的信息。

    3、Service Worker安装是在后台悄悄执行，更新也是如此。每次新唤起Service Worker线程，它都会去检查Service Worker脚本是否有更新，如有一个字节的变化，它都会新起一个Service Worker线程类似于安装一样去安装新的Service Worker脚本，当旧的Service Worker所服务的页面都关闭后，新的Service Worker便会生效

典型应用场景

  • 1、离线缓存：可以将H5应用中不变化的资源或者很少变化的资源长久的存储在用户端，提升加载速度、降低流量消耗、降低服务器压力。如中重度的H5游戏、框架数据独立的web资讯客户端、web邮件客户端等
  • 2、消息推送：激活沉睡的用户，推送即时消息、公告通知，激发更新等。如web资讯客户端、web即时通讯工具、h5游戏等运营产品。
  • 3、事件同步：确保web端产生的任务即使在用户关闭了web页面也可以顺利完成。如web邮件客户端、web即时通讯工具等。
  • 4、定时同步：周期性的触发Service Worker脚本中的定时同步事件，可借助它提前刷新缓存内容。如web资讯客户端。

https://caniuse.com/#search=service%20worker

浏览器支持情况

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=category%3Aofflinestorage

https://webkit.org/status

https://x5.tencent.com/tbs/index.html

x5.tencent.com

生命周期

项目优化实践

  • 资讯特点：


    • 1、由两个页面构成，一个首页，一个详情页，且通过url传参给到后端，获取数据渲染页面。

    2、静态资源方面，有一部分js来自第三方，如aladdin
    3、接口会排除缓存之外，返回。目前资讯采取，缓存项目的静态资源，第三方js排除，接口排除

  • 1.常期维护的活动页，比如：新客福利，和盈寿险页面，还有业务员时常要推广的页面，可以考虑使用pwa。因为PWA 打开后会缓存一些内容，之后再次访问即使没有网络也可以浏览之前的页面（如同IE时代的离线浏览）可以离线访问，往常的网页应用只要关闭了网页他的生命就结束了，现在引入了一个 Service Worker 的概念，即使网页关闭，PWA 仍然可以在后台运行获取数据更新，还有业务员只有把页面添加到主屏幕，无需到处查找页面，方便浏览。
  • 2。其他日常活动页面，可以缓存public.js，能够让活动页面响应显示更快，还有pwa只要修改一处就可以清楚页面缓存，解决了修改缓存刷cdn，修改版本号，节省了时间。
  • 3.对于一些推送信息页面也可以使用pwa，因为Service Workers 有一个基于事件的 cache 系统和消息推送的一套新的 API，用户只要允许，即使网页关闭后仍然可以在系统通知栏收到推送消息

优化效果度量

If you can't measure it, you can't improve it

如果问题无法度量，也就无从改进

—— Lord Kelvin

https://fjut.github.io/interest-group/PWA_AMP_MIP/docs/fjut.github.io_2017-06-06_23-52-57.report.html

https://fjut.github.io/interest-group/PWA_AMP_MIP/docs/fjut.github.io_2017-06-06_23-53-47.report

AMP、MIP

MIP是Mobile Instant Pages的简称，也就是移动网页加速器，是一套应用于移动网页的开放性技术标准,使用 MIP无需等待加载,页面内容将以更友好的方式瞬时到达用户。其核心价值是提升了移动端渲染能力。

http://zhanzhang.baidu.com/college/courseinfo?id=912&page=1

MIP 加速原理

https://www.mipengine.org/doc/03-principle-of-mip.html

  1. 经过精心设计的JavaScript
  2. 所有静态资源需要标明尺寸
  3. 不允许任何机制阻止页面渲染
  4. 控制外部资源加载
  5. 封装交互功能
  6. 只允许inline的css
  7. 只允许GPU加速的动画
  8. MIP 缓存

总结

  • PWA 是一系列技术集合
  • 着重介绍 service worker
    1. 是什么
    2. 注意点
    3. 应用场景
    4. 浏览器支持情况
    5. 生命周期
    6. 项目实践
    7. 效果度量
  • AMP、MIP 简介

感受

  • PWA 大有可为，值得深入
  • 积极投入技术预研的收益
    • 于个人：讨论需求更有底，知道什么不能做，什么能做，怎么实现更好
    • 如果每成员都是某个方面的专家，团队作为一个整体，能够解决的问题就更多
Made with Slides.com