PWA 下一代的 Web 模型

Question

PWA 全称 Progress Web Application，也就是渐进式 web 应用，是利用了一系列现代 web 技术，实现 web 体验大幅度提高的的网站 。PWA 的关键技术是 service worker，标志性的体验是可以离线浏览。兼顾 Web 的开放性与原生的便捷性。

实现了 PWA 化的网站，可以有以下功能：

• 可以被搜索引擎发现，与传统 web 页没区别
• 可安装。可以像传统app那样在桌面留下快捷方式，一点击就全屏打开
• 可连接。通过URL即可分享
• 可离线。可工作在离线或低速的网络环境下。
• 可推送。可以利用推送api发送通知
• 渐进增强。不支持pwa的设备会自动降级。

其他可以参考这个网站：https://developer.mozilla.org/zh-CN/Apps/Progressive

• service worker
  service worker是一个独立于网页的Js线程。在https环境下，高版本的chrome可以注册一个service worker。这个js注册激活之后，就会独立于页面存在，而且页面上所有的http请求，都会先经过它的逻辑判断，才发出去。可以做到判断网络状态，显示不同页面的功能。
• 渐进增强
  pwa 是一个渐进增强的技术，假如说，pwa有10项要求，全实现了，用户体验会很好，但是你只实现了其中的4项，也会有体验上的提高。要在不断迭代的，不停地完善网站的代码，才渐渐形成更加完善的 PWA 网站
• 怎么做
  这里有一个 demo
  里面说到了几点技术

• App Shell Architecture
• Service Worker + Navigation Preload (Origin Trial)
• Add to Home Screen, Splash Screen, Browser Mode, Notify user if site is updated etc,
• Offline Support
• Online/Offline Events
• Fetch API
• Push Notifications
• Background Sync
• Web Share API

逐步完善以上技术，关键是Service Worker, 就差不多算是实现了PWA

• 在哪些地方可以用？
  其实全站都可以用，无论是PC还是M，具体怎么渐渐推进，还需要探索一下。注册了service worker之后，具体要把哪些页面离线化，这个可以自己写逻辑。可以先从m端一些交互简单的页面开始下手。
• 给我一些例子吧
  请用高版本的安卓手机打开，才能更好地体验pwa的效果。
  这个网站，用苹果手机，也可以添加到主屏
  https://dev.to/

https://pwa.rocks/

https://github.com/google/amp-pwa-demo