manifest_html5_离线缓存：https://yanhaijing.com/html/2014/12/28/html5-manifest/
PWA：https://imweb.io/topic/5b14f3cbd4c96b9b1b4c4eab
离线缓存和浏览器缓存的区别
离线缓存允许我们在没网的时候通过读取离线文件进行站点的访问，而浏览器缓存即使浏览器又对资源文件的缓存也必须在有网的情况下读取缓存文件以提高文件加载速度，没网的时候依然显示网络断开的错误。
离线存储的作用
1、用户可离线访问应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要
2、用户访问本地的缓存文件，通常意味着更快的访问速度
3、仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力
manifest html5缓存更新
- 在线的情况下，浏览器发现html头部有manifest属性,会请求manifest文件，如果是第一次访问应用，浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过应用并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
- 离线的情况下，浏览器就直接使用离线存储的资源。
<!DOCTYPE HTML>
<html manifest="test.manifest">
<body>
The content of the document......
</body>
</html>
Service Worker
什么是 Service Worker
Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件，可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息。
由于 Workers 与主线程分开运行，因此 Service Worker 独立于与其关联的应用程序。这将导致一下结果：
- 由于 Service Worker 没有阻塞（它被设计为完全异步），同步 XHR 和
localStorage不能在 Service Worker 中使用。 - 当应用程序处于没有活动状态时，Service Worker 可以从服务器接收推送消息。这可以让您的应用程序向用户显示推送通知，即使它未在浏览器中打开。
注意浏览器在没有运行的情况下是否能收到通知取决于浏览器如何与操作系统集成。例如，在桌面操作系统上，Chrome 浏览器和 Firefox 只会在浏览器运行时收到通知。然而，Android 是在接收到推送消息时唤醒任何浏览器，并且无论浏览器状态如何都将始终接收推送消息。有关更多信息，请参阅 Matt Gaunt 的 Web Push Book 中的常见问题解答。 - Service Worker 不能直接访问 DOM。为了与页面通信，需使用
postMessage()方法发送数据，并使用message事件侦听器来接收数据。
Service Worker 注意事项：
- Service Worker 是一个可编程的网络代理，可以控制如何处理来自页面的网络请求。
- Service Worker 只能通过 HTTPS 运行。由于 Service Worker 可以拦截网络请求并修改响应，因此会带来非常糟糕的 "man-in-the-middle" 攻击。
注意像 Letsencrypt 这样的服务可让您免费获取 SSL 证书以安装到您的服务器上。 - Service Worker 在不使用时变为空闲状态，并在下次需要时重新启动。你不能依赖事件之间持续存在的全局状态。如果存在需要在重新启动时保留和重用的信息，则可以使用 IndexedDB 数据库。
- Service Worker 广泛使用 Promises，所以如果你对 Promises 不熟悉，那么你应该停止阅读并开始学习 Promises 的介绍。
网友评论