PWA --- 基础入门（进行中）

https://juejin.im/post/5aa0ffa5f265da23a04921e8 --- Koa-PWA 的 node.js 实现，值得参考。

1、如何判断一个 web 应用是否是一个 PWA 应用？它应该具有如下特点：

1）内容可以通过搜索引擎发现；
2）可以出现在设备的主屏幕；
3）可以通过一个 url 链接来分享它；
4）可以在没有网络或网络条件很差的条件下运行；
5）在老版本的浏览器中依旧可以使用，在新版本的浏览器上可以使用全部功能；
6）无论何时有新的内容，它都可以发送通知；
7）在任何具有屏幕和浏览器的设备上可以正常使用；
8）在你和应用之间的连接是安全的，可以阻止第三方访问你的敏感数据；

2、这么做的好处是：

1）减少应用安装后的加载时间，多亏了 Service Workers 的缓存；
2）当应用有可用的更新时，可以仅仅去更新发生改变的那部分内容。相比于原生，需要下载整个应用；
3）外观和使用感受与原生平台更加融为一体 --- 应用图标被放置在主屏幕上，应用可以全屏显示；
4）凭借系统通知和推送消息，与用户保持连接，对用户产生更多的吸引力，并且提高转换效率。

3、App shell，意图尽快加载最小的用户界面，然后缓存它，以便后续访问时可以离线使用，然后加载应用程序的所有内容。这样，下次有人从设备访问应用程序时，UI 立即从缓存加载，并从服务器请求新内容（如果它已在缓存中不可用）。

我们可以通过 service worker 控制从服务器请求的内容以及从缓存中检索的内容。这种架构可以缓存应用 app shell，并以极大地提高性能的方式管理动态内容。除了基本 shell 之外，还可以添加其它功能，例如：添加到主屏幕或推送通知。

记住 PWA 的优点（可链接、渐进式和响应式）并在设计应用程序时牢记这一点非常重要。app shell 允许网站可链接、渐进式和响应式。

我们可以使用 PWABuilder 网站在线生成 PWA --- https://www.pwabuilder.com/；

4、Service Workers，是浏览器和网络之间的虚拟代理。它解决了前端开发人员多年来一直在努力解决的问题 --- 解决了如何正确缓存网站资源，并使其在用户设备离线时可用。

Service Worker 运行在一个与我们页面 js 主线程完全独立的线程上，并且没有对 DOM 结构的访问权限。他不仅提供离线功能，还提供包括处理通知，在单独的线程上执行繁重的计算等。Service Worker 非常强大，可以控制网络请求，修改网络请求，返回缓存的自定义响应，或合成响应。

Service Worker 只能运行在安全的上下文中（https），如果想在将代码推送到生产环境前先进行试验，则可以始终在本地主机上进行测试或设置 github 页面。

5、离线优先或缓存优先，是向用户提供内容的最流行策略。如果资源已缓存且可脱机使用，请在尝试从服务器下载资源之前先将其返回。 如果它已经不在缓存中，请下载并缓存以备将来使用。

Service Worker 先注册，注册完成后，对应的文件会自动下载，然后安装，最后激活。