PWA应该具备以下特点：
- 响应式
- 独立于网络连接
- 类似原生应用的交互体验
- 始终保持更新
- 安全
- 可发现
- 可重连
- 可安装
- 可链接
如果你构建了一个PWA，即使在一个不支持的老旧浏览器上运行，它仍然可以作为一个普通的网站运行。这就是PWA最棒的一点——渐进式。
PWA指向一个清单文件(manifest)，其中包含网站相关信息，包括图标，背景屏幕和默认方向等。
PWA使用了叫做Service Workers的重要新功能，它可以拦截并缓存任何来自网站的网络请求。
简而言之，PWA不仅仅是一组非常棒的新功能，它们实际上是我们构建更好的网站的一种方式。
- 在线报纸服务，人们通过它来了解当地新闻。如果你知道有人经常访问你的网站并浏览多个网页，为什么不提前缓存这些页面，这样他们就可以完全离线浏览行文？
- 慈善机构Web应用服务，是他们在没有网络连接的现场也能收集信息。一旦他们回到办公室或有网络连接的区域，数据就可以同步到服务器。
对于Web开发者来说，PWA是个彻底的颠覆者。PWA另一个很棒的点是他们用Web开发者所熟悉和喜爱的技术所构建。如CSS、JavaScript和HTML都是构建PWA的基石。
就其核心来说，Service Workers 只是后台运行的 worker 脚本。只需短短几行代码，他们便可以使开发者能够拦截网络请求，处理推送消息并执行其它任务。
“将你的网络请求想象成飞机起飞。Service Worker 是路由请求的空中交通管制员。它可以通过网络加载，或甚至通过缓存加载。”
Service Workers 的几个特点：
- 运行在它自己的全局脚本上下文中
- 不绑定到具体的网页
- 无法修改网页中的元素，因为它无法访问 DOM
- 只能使用 HTTPS
Service Workers 是基于事件驱动的。
Service Workers 能够拦截进出的 HTTP 请求，从而完全控制你的网站。
Service Worker 运行在 worker 上下文中，这意味着它无法访问 DOM，它与应用的主要 JavaScript 运行在不同的线程上，所以它不会被阻塞。它们被设计成是完全异步的，因此你无法使用诸如同步 XHR 和 localStorage 之类的功能。
Service Worker 生命周期经历了不同阶段，这有点像交通灯系统
- 注册过程中，属于红灯状态，此时它在下载和解析；
- 执行过程中，属于黄灯状态，此时它正被执行，还没有准备好；
- 以上两部都完成后，属于绿灯状态，此时它可以随意使用。
<html>
<head>The best web page ever</head>
<body>
<script>
// 注册 service worker
if ('serviceWorker' in navigator) { //❶
navigator.serviceWorker.register('/sw.js').then(function(registration) { //❷
// 注册成功
console.log('ServiceWorker registration successful with scope: ', registration.scope); //❸
}).catch(function(err) { //❹
// 注册失败 :(
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
</body>
</html>self.addEventListener('fetch', function(event) { //❶
if (/\.jpg$/.test(event.request.url)) { //❷
event.respondWith(fetch('/images/unicorn.jpg')); //❸
}
});- ❶ 为 fetch 事件添加事件监听器
- ❷ 检查传入的 HTTP 请求是否是 JPEG 类型的图片
- ❸ 尝试获取独角兽的图片并用它作为替代图片来响应请求
为了让 Service Worker 能在网站上运行，需要通过 HTTPS 来提供服务。
- 在用户体验方面，相比于传统网站，原生应用可以提供更好的体验。
- Web 正在发展，我们没有任何理由不去为用户提供快速、有弹性和吸引人的 Web 应用。
- PWA 能够为你的用户提供更快的、富有弹性的和更吸引人的网站。
- Service Workers 是解锁浏览器力量的关键。可以把它们当做是能够拦截 HTTP 请求的空中交通管制员。
- Web 一直都很棒，但是我们没有理由不去改进它，并向用户提供更多的功能。每一天，我们都要为用户多创造一些。
Lighthouse的谷歌插件 工具非常适用于衡量 PWA 的审核和生产性能。
在开发者之中，通常会讨论是构建原生应用还是 Web 应用，到底哪个更好。就我个人而言，我认为你应该根据用户的需要来构建应用。不应该出现 PWA 和原生应用相争的状况，作为开发者，我们应该不断探索提升用户体验的方法。