PWA、AMP、MIP简介

前端技术双周会

  • 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 大有可为,值得深入
  • 积极投入技术预研的收益
    • 于个人:讨论需求更有底,知道什么不能做,什么能做,怎么实现更好
    • 如果每成员都是某个方面的专家,团队作为一个整体,能够解决的问题就更多

PWA、AMP、MIP的简介和初步应用

By Kainy Guo

PWA、AMP、MIP的简介和初步应用

  • 3,481