前言

我经常看到有些博客站点拥有离线观看的功能，就算是没有网络，刷新页面依然可以获得数据。我对这一功能甚为好奇，了解后才发现这一技术是PWA。

何为PWA

PWA又为渐进式Web应用，在MDN上是这样说的，渐进式 Web 应用（Progressive Web App，PWA）是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。它像网站一样，PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。

如何实现

构建一个PWA程序主要是用到service worker技术，这一项技术在现代浏览器中默认开启。

以上是一张官方的图，讲解了service worker的工作流程，简单来说就是注册程序 —> 安装程序 —> 激活程序 —> 获取数据 —> 版本更新后再次获取数据 。

注册程序

 1if ("serviceWorker" in navigator) { 
 2    navigator.serviceWorker.register("/sw.js"); 
 3}

安装程序

定义版本号

 1const VERSION = "v1"

定义缓存名称

 1const CACHE_NAME = `cache-${VERSION}`

确定需要缓存的数据

 1const APP_STATIC_RESOURCES = [
 2  "/", 
 3  "/favicon.svg",
 4  "/mainfest.json",
 5  "/offline",
 6  "/sw.js"
 7];

安装程序 在安装程序的时候，将静态资源进行缓存

 1self.addEventListener("install", (event) => {
 2  event.waitUntil(
 3    (async () => {
 4      const cache = await caches.open(CACHE_NAME);
 5      cache.addAll(APP_STATIC_RESOURCES);
 6    })()
 7  );
 8});

激活程序

在激活程序阶段，删除之前缓存的老数据

 1self.addEventListener("activate", (event) => {
 2  event.waitUntil(
 3    (async () => {
 4      const names = await caches.keys();
 5      await Promise.all(
 6        names.map((name) => {
 7          if (name !== CACHE_NAME) {
 8            return caches.delete(name);
 9          }
10        })
11      );
12      await clients.claim();
13    })()
14  );
15});

获取缓存

进行网络拦截，当有网络的时候就直接获取网络发送的数据，当无网络的时候就获取缓存的数据

 1self.addEventListener("fetch", (event) => {
 2  const url = new URL(event.request.url);
 3  
 4  if (url.protocol === 'chrome-extension:') {
 5    return;
 6  }
 7  
 8  if (url.pathname.startsWith('/api')) {
 9    return;
10  }
11  
12  if (url.pathname.startsWith('/')) {
13    
14    if (!navigator.onLine) {
15      event.respondWith(
16        caches.match(event.request).then((response) => {
17          return response || fetch(event.request).then((response) => {
18            return caches.open(CACHE_NAME).then((cache) => {
19              cache.put(event.request, response.clone());
20              return response;
21            });
22          }).catch(() => caches.match('/offline'));
23        })
24      );
25    } else {
26      
27      event.respondWith(
28        fetch(event.request).then((response) => {
29          return caches.open(CACHE_NAME).then((cache) => {
30            cache.put(event.request, response.clone());
31            return response;
32          });
33        })
34      );
35    }
36
37    
38  } else {
39    event.respondWith(
40      caches.match(event.request).then((response) => {
41        return response || fetch(event.request);
42      }).catch(() => caches.match('/offline'))
43    );
44  }
45});

加餐

缓存应用程序只是PWA技术的其中一个功能，PWA还可以进行该网页以exe的形式安装在电脑上，我觉得这个挺好玩的。

比如说我们可以在GitHub上看到这样一个标识，这就是一个可安装的PWA应用程序。

将PWA改造为一个可安装的应用程序员也很简单。我们只需要建一个mainfest.json文件，在这个文件里面配置相关的标题，图标这些，然后在head里面引入。

 1<head>
 2  <link rel="manifest" href="/mainfest.json" />
 3</head>

mainfest.json里面的数据如下

 1{
 2  "name": "krismile🥤 Blog",
 3  "short_name": "krismile🥤 Blog",
 4  "description": "我的博客，记录一些技术与日常！",
 5  "icons": [{
 6    "src": "favicon.svg",
 7    "sizes": "200x200",
 8    "type": "image/svg+xml"
 9  }],
10  "background_color": "#fff",
11  "theme_color": "#000",
12  "start_url": "/", 
13  "display": "standalone", 
14  "orientation": "portrait" 
15}

具体代码可见。

总结

就这样我们就通过PWA技术实现了其中的网页的缓存以及安装，这一技术很适合在博客类的程序上使用，可以大大提升其体验程度，当然对于大多数的IAAS应用也是可以的。