PWA 下一代的 Web 模型
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
以上是 PWA 下一代的 Web 模型 的全部内容， 来源链接： utcz.com/z/264662.html
