渐进式web应用 (PWA)

Posted 2022-10-06 yaokai729

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会经历以下生命周期：

1. 下载（download）

2. 安装（install）

3. 激活（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

1. 首先有一个白名单，白名单中的Cache是不被淘汰的。

2. 之后通过caches.keys()拿到所有的Cache Storage，把不在白名单中的Cache淘汰。

3. 淘汰使用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