PWA(渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。
PWA的特点:
- Discoverable, 内容可以通过搜索引擎发现。
- Installable, 可以出现在设备的主屏幕。
- Linkable, 你可以简单地通过一个URL来分享它。
- Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
- Progressive, 它在老版本的浏览器仍旧可以使用,在新版本的浏览器上可以使用全部功能。
- Re-engageable, 无论何时有新的内容它都可以发送通知。
- Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机,平板电脑,笔记本,电视,冰箱,等。
- Safe, 在你和应用之间的连接是安全的,可以阻止第三方访问你的敏感数据。
PWA的优势:
- 减少应用安装后的加载时间, 多亏了 Service Workers 来进行缓存, 以此来节省带宽和时间。
- 当应用有可用的更新时,可以仅仅去更新发生改变的那部分内容。与之相反,对于一个原生应用而言,即便是最微小的改动也需要强制用户去再次下载整个应用。
- 外观和使用感受与原生平台更加融为一体——应用图标被放置在主屏幕上,应用可以全屏运行,等。
- 凭借系统通知和推送消息与用户保持连接,对用户产生更多的吸引力,并且提高转换效率。
PWA 所需的关键要素是 service worker 支持。 值得庆幸的是,桌面和移动设备上的所有主流浏览器都支持 service worker。
Service Worker
- Service Worker 是浏览器和网络之间的虚拟代理。解决了正确缓存网站资源并在用户设备脱机时使其可用的问题。
- 出于安全原因,Service Workers只能在HTTPS中执行。
- Service Worker独立于浏览器JavaScript主线程,有它自己独立的生命周期。
注意:Service Workers 大量使用 promise,因为他们通常会等待响应通过,之后他们会以成功或失败的方式响应。
注册
首先使用该 ServiceWorkerContainer.register() 方法注册服务工作者。如果成功,Service Worker 将被下载到客户端,并尝试安装 / 激活。
安装完成后,Service Worker会经历以下生命周期:
- 下载(download)
- 安装(install)
- 激活(activate)
用户首次访问 Service Worker 控制的网站或页面时,Service Worker 会立刻被下载。之后至少每24小时它会被下载一次。它可能被更频繁地下载,不过每24小时一定会被下载一次,以避免不良脚本长时间生效。
在下载完成后,开始安装Service Worker,在安装阶段,通常需要缓存一些我们预先声明的静态资源,在我们的示例中,通过urlsToCache预先声明。
在安装完成后,会开始进行激活,浏览器会尝试下载Service Worker脚本文件,下载成功后,会与前一次已缓存的Service Worker脚本文件做对比,如果与前一次的Service Worker脚本文件不同,证明Service Worker已经更新,会触发activate事件。完成激活。
install
在安装完成后,尝试缓存一些静态资源:
self.addEventListener(‘install‘, function(event) { self.skipWaiting(); event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); });
首先,self.skipWaiting()执行,告知浏览器直接跳过等待阶段,淘汰过期的Service Worker脚本,直接开始尝试激活新的Service Worker。
然后使用caches.open打开一个Cache,打开后,通过cache.addAll尝试缓存我们预先声明的静态文件。
监听fetch
,代理网络请求
页面的所有网络请求,都会通过Service Worker的fetch事件触发,Service Worker通过caches.match尝试从Cache中查找缓存,缓存如果存在,则直接返回缓存中的response,否则,创建一个真实的网络请求。
self.addEventListener(‘fetch‘, function(event) { event.respondWith( caches.match(event.request) .then(function(response) { if (response) { return response; } return fetch(event.request); }) ); });
如果我们需要在请求过程中,再向Cache Storage中添加新的缓存,可以通过cache.put方法添加,
activate
- 首先有一个白名单,白名单中的Cache是不被淘汰的。
- 之后通过caches.keys()拿到所有的Cache Storage,把不在白名单中的Cache淘汰。
- 淘汰使用caches.delete()方法。它接收cacheName作为参数,删除该cacheName所有缓存。
self.addEventListener(‘activate‘, function(event) { var cacheWhitelist = [‘counterxing‘]; ? event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });
参考博客:Service Worker学习与实践(一)——离线缓存 https://juejin.im/post/5ba0fe356fb9a05d2c43a25c
原文地址:https://www.cnblogs.com/yaokai729/p/11478423.html