通过PWA，我的博客也能离线阅读啦

可乐只喝可乐
888 阅读3分钟

前言

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

何为PWA

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

如何实现

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

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

注册程序

if ("serviceWorker" in navigator) { // 若是浏览器存在service worker就进行注册程序
    navigator.serviceWorker.register("/sw.js"); // 安装程序、激活程序、获取数据这些逻辑全在sw.js中
}

安装程序

  • 定义版本号
const VERSION = "v1"
  • 定义缓存名称
const CACHE_NAME = `cache-${VERSION}`
  • 确定需要缓存的数据
const APP_STATIC_RESOURCES = [
  "/", // 这个意思是缓存/路由下的所有页面
  "/favicon.svg",
  "/mainfest.json",
  "/offline",
  "/sw.js"
];
  • 安装程序 在安装程序的时候，将静态资源进行缓存
self.addEventListener("install", (event) => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open(CACHE_NAME);
      cache.addAll(APP_STATIC_RESOURCES);
    })()
  );
});

激活程序

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

self.addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      const names = await caches.keys();
      await Promise.all(
        names.map((name) => {
          if (name !== CACHE_NAME) {
            return caches.delete(name);
          }
        })
      );
      await clients.claim();
    })()
  );
});

获取缓存

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

self.addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  // 过滤掉 chrome-extension 协议的请求
  if (url.protocol === 'chrome-extension:') {
    return;
  }
  // 过滤掉api
  if (url.pathname.startsWith('/api')) {
    return;
  }
  
  if (url.pathname.startsWith('/')) {
    // 如何判断是否有网络
    if (!navigator.onLine) {
      event.respondWith(
        caches.match(event.request).then((response) => {
          return response || fetch(event.request).then((response) => {
            return caches.open(CACHE_NAME).then((cache) => {
              cache.put(event.request, response.clone());
              return response;
            });
          }).catch(() => caches.match('/offline'));
        })
      );
    } else {
      // 有网络的时候直接跳过缓存数据
      event.respondWith(
        fetch(event.request).then((response) => {
          return caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, response.clone());
            return response;
          });
        })
      );
    }

    
  } else {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request);
      }).catch(() => caches.match('/offline'))
    );
  }
});

加餐

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

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

image.png

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

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

mainfest.json里面的数据如下

{
  "name": "krismile🥤 Blog",
  "short_name": "krismile🥤 Blog",
  "description": "我的博客，记录一些技术与日常！",
  "icons": [{
    "src": "favicon.svg",
    "sizes": "200x200",
    "type": "image/svg+xml"
  }],
  "background_color": "#fff",
  "theme_color": "#000",
  "start_url": "/", // 应用程序启动时的 URL
  "display": "standalone", // 应用程序的显示模式，定义应用程序如何显示在设备上(独立模式)
  "orientation": "portrait" // 应用程序的默认方向(纵向)
}

具体代码可见。

总结

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

avatar
文章
阅读
粉丝