借用workbox完成离线缓存运用

2019年9月1日 255次阅读 来源: jannesand

什么是workbox，workbox有什么用处，为何要运用它？在引见workbox之前，我们来先大抵相识一下service worker，有助于我们背面更好地去明白workbox。

一. service worker

service worker是在浏览器背景独立于网页运转的剧本，它能够完成对收集要求举行缓存，并向网页推送和同步信息的功用，使人更加高兴的是，它能够完成离线的状况下，也能看到我们的网页，极大提拔了我们的用户体验。

service worker 已获得越来越多的浏览器的支撑，包括苹果、腾讯的X5内核。苹果从safari11最先，已最先支撑了。支撑状况以下：
《借用workbox完成离线缓存运用》

二. 为何要用workbox

workbox 是 GoogleChrome 团队推出的一套 Web App 静态资本和要求结果的当地存储的处理计划，该处理计划包括一些 Js 库和构建东西，在 Chrome Submit 2017 上初次盛大面世。而在 workbox 背地则是 Service Worker 和 Cache API 等手艺和规范在驱动。在 Workebox 之前，GoogleChrome 团队较早时刻推出过 sw-precache 和 sw-toolbox 库，然则在 GoogleChrome 工程师们看来，workbox 才是真正能轻易一致的处置惩罚离线才的更圆满的计划，所以住手了对 sw-precache 和 sw-toolbox 的保护。那workbox能处理什么题目呢？

在service worker中，假如我们要阻拦并代办一切的要求，须要我们手动去保护一套缓存列表。然则如今前端开辟，多半用webpack、gulp、grant来构建前端的代码，致使我们的文件名可能会常常发作，这个时刻，特别是中大型的多页运用，缓存列表的内容可能会异常多，手动保护就显得异常贫苦，保护本钱也变得很高。

这个时刻，workbox的横空出世，就是为相识决上面的题目。

workbox的一些特征：

  • 不论你的站点是哪一种体式格局构建的，都能够完成离线缓存的结果；
  • 自动管理好缓存列表，包括更新、同步、删除旧的缓存等；
  • 设置简朴却不失天真，能够完全自定义相干需求（支撑 Service Worker 相干的特征如 Web Push, Background sync 等）。
  • 针对种种运用场景的多种缓存战略。

三. workbox的运用

下面来看下workbox的例子。

1.在进口页面的onload中，注册一个service worker，注册时引入缓存列表文件，也就是build.sw.js。
index.html

<script>
// Register A service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register(`./build.sw.js`)
  .then(function(registration) {
    // Registration was successful
    console.log('
 register ')
  }, function(err) {
    // registration failed :(
    console.log('[fail]: ', err);
  });
  });
 <script>
}

2.在build.sw.js页面设置缓存列表和缓存战略

// 起首引入 Workbox 框架
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.3.0/workbox-sw.js');

// 注册胜利后要马上缓存的资本列表
workbox.precaching.precacheAndRoute([
  {
    "url": "css/index.css",
    "revision": "835ba5c3"
  },
  {
    "url": "images/xxx.png",
    "revision": "b1537bfs"
  },
  {
    "url": "index.html",
    "revision": "b331f695"
  },
  {
    "url": "js/index.js",
    "revision": "4d562866"
  }
]);

// 缓存战略
workbox.routing.registerRoute(
  new RegExp(''.*\.html'),
  workbox.strategies.networkFirst()
);

workbox.routing.registerRoute(
  new RegExp('.*\.(?:js|css)'),
  workbox.strategies.cacheFirst()
);

workbox.routing.registerRoute(
  new RegExp('https://your\.cdn\.com/'),
  workbox.strategies.staleWhileRevalidate()
);

workbox.routing.registerRoute(
  new RegExp('https://your\.img\.cdn\.com/'),
  workbox.strategies.cacheFirst({
    cacheName: 'example:img'
  })
);

完成的结果以下：
《借用workbox完成离线缓存运用》

我们来看下build.sw.js文件的内容，重要包括缓存列表和缓存战略。这里面的内容不必我们手动天生，workbox有三种体式格局天生，我们能够运用workbox-webpack-plugin、workbox-cli、workbox-build。我们暂不议论详细的完成，在这里，我们先来相识一下预缓存列表和缓存战略这两个东西。

预缓存列表

假如我们要缓存静态资本，日常平凡不会常常更新，只要到发版时才会修改了资本的hash值，才须要从新更新的，那那 precache 预缓存应该是你所期待的。

workbox 供应了一种异常轻易的 API 协助我们处理 precache 的题目，我们能够运用workbox.precaching来设置，设置花样以下：

workbox.precaching.precacheAndRoute([
  {
    "url": "将要预缓存的文件 URL",
    "revision": "缓存的hash值"
  },
])

路由要求缓存

路由要求缓存是指经由过程对婚配路由给文件采纳不必的缓存体式格局，这个能够经由过程workbox.routing.registerRoute来举行设置。 路由婚配的体式格局有三种：

1.经由过程字符串的体式格局举行婚配

// 能够直接是当前项面前目今的相对途径
workbox.routing.registerRoute(
    'path/to/logo.png',
    handler // handler 是做缓存战略的回调函数，平常指背面所会降到的 '缓存战略函数'
);

// 也能够是完全的带完全 host 的 URL 途径，这里的 URL 必需是 https 的
workbox.routing.registerRoute(
    'https://example.com/a/b/c.jpg',
    handler
);

2.经由过程正则的体式格局举行婚配

workbox.routing.registerRoute(
    new RegExp('.*\.(js|css|jpg|png|gif)'), // 这里是任何正则都行，只要能婚配得上的要求路由地点
    handler
);

3.经由过程回调函数的体式格局举行婚配

// 经由过程回调函数来婚配要求路由将会让战略更加天真
const customFun = ({url, event}) => {
    // 假如要求路由婚配了就返回true，也能够返回一个参数对象以供 handler 吸收处置惩罚
    return false;
};

workbox.routing.registerRoute(
    customFun,
    handler
);

缓存战略

缓存战略是指关于婚配到的路由，采纳何种体式格局举行缓存。 workbox供应了两种设置缓存战略的体式格局

  • 经由过程 workbox.strategies API 供应的 缓存战略。
  • 供应一个自定义返回带有返回结果的 Promise 的回调要领。

以下引见workbox默许供应的几种缓存战略，包括有五种，分别是：

  • Stale While Revalidate
  • Network First
  • Cache First
  • Network Only
  • Cache Only

Stale While Revalidate

这类战略的意义是当要求的路由有对应的 Cache 缓存结果就直接返回，在返回 Cache 缓存结果的同时会在背景提议收集要求拿到要求结果并更新 Cache 缓存，假如本来就没有 Cache 缓存的话，直接就提议收集要求并返回结果。 运用体式格局以下：

workbox.routing.registerRoute(
    match, // 婚配的路由
    workbox.strategies.staleWhileRevalidate()
);

Network First

这类战略就是当要求路由是被婚配的，就采纳收集优先的战略，也就是优先尝试拿到收集要求的返回结果，假如拿到收集要求的结果，就将结果返回给客户端而且写入 Cache 缓存，假如收集要求失利，那末了被缓存的 Cache 缓存结果就会被返回到客户端 运用体式格局以下：

workbox.routing.registerRoute(
    match, // 婚配的路由
    workbox.strategies.networkFirst()
);

Cache First

这个战略的意义就是当婚配到要求今后直接从 Cache 缓存中获得结果，假如 Cache 缓存中没有结果，那就会提议收集要求，拿到收集要求结果并将结果更新至 Cache 缓存，并将结果返回给客户端。

workbox.routing.registerRoute(
    match, // 婚配的路由
    workbox.strategies.cacheFirst()
);

Network Only

比较直接的战略，直接强迫运用平常的收集要求，并将结果返回给客户端，这类战略比较合适对及时性要求异常高的要求。

workbox.routing.registerRoute(
    match, // 婚配的路由
    workbox.strategies.networkOnly()
);

Cache Only

这个战略也比较直接，直接运用 Cache 缓存的结果，并将结果返回给客户端，这类战略比较合适一上线就不会变的静态资本要求。

workbox.routing.registerRoute(
    match, // 婚配的路由
    workbox.strategies.cacheOnly()
);

四. 运用workerbox后的结果

在我们的项目中，我们以DomContentLoaded的时刻作为参考点，对照有加service worker 和未加的service worker状况。

测试前提

以首页为例，在差别的收集环境下，提议10次收集要求，然后取平均值，作为它们的终究结果，测试结果以下：

《借用workbox完成离线缓存运用》

经由过程上面的数据能够得出几个结论:

  • 在弱环境下，service worker的上风更加显著，
  • 纵然在wifi环境下面，由于存在缓存的状况，浏览器加载的速率也比未运用service worker的时刻要短。
  • 在无收集环境的状况，也能够做到离线缓存的结果，极大地提拔页面的用户体验。

五. 几个注重点

在运用workbox的过程当中，会碰到一些题目，下面列出几点，也算是做个总结：

1. service worker 注册文件安排的位置

在页面注册service worker的时刻，只管注册到项目的根目次下，如许才最大的发挥service worker的作用

// build.sw.js最好放在项目的根目次下，才发挥最大的缓存结果
navigator.serviceWorker.register(`./build.sw.js`)

// 假如如许设置的话，就只要path目次下面的文件才完成缓存，其他目次，包括根目次的都不能缓存
navigator.serviceWorker.register(`./path/build.sw.js`)

2.运用workbox 命令行天生预缓存列表的注重点

我们先预设一下运用场景：假定你的项目在目次 /app 下，必需保证在你的项目根目次下有一个 app/sw.js 包括以下内容：

// 平常项目中的 sw.js 源文件都是经由过程如许预留一个空数组的体式格局来预缓存内容列表的
workbox.precaching.precacheAndRoute([]);

如许才保证能将天生的预缓存内容列表内容注入到 Service Worker 文件中。

3.缓存战略设置

在经由一段时刻的运用和思索今后，给出以为较为合理的缓存战略：

  • HTML，假如想让页面离线能够接见，运用 NetworkFirst，假如不须要离线接见，运用 NetworkOnly，其他战略均不发起对 HTML 运用。
  • CSS 和 JS，状况比较复杂，由于平常站点的 CSS，JS 都在 CDN 上，SW 并没有方法推断从 CDN 上要求下来的资本是不是准确（HTTP 200），假如缓存了失利的结果，题目就大了。发起运用 Stale-While-Revalidate 战略，既保证了页面速率，即使失利，用户革新一下就更新了。
  • 假如CSS，JS 与站点在统一个域下，而且文件名中带了 Hash 版本号，那能够直接运用 Cache First 战略。
  • 图片发起运用 Cache First，并设置肯定的失效事宜，要求一次就不会再变动了。

假如人人在运用过程当中有更友爱的战略，贫苦也孝敬你们的战略，人人配合进修，配合进步。

另有，要切记，关于不在统一域下的任何资本，相对不能运用 Cache only 和 Cache first。

4.service worker的运转环境

须要注重的是，Service Worker 剧本除了域名为 localhost 时能运转在 http 协定下之外，只能运转 https 协定下。

5. 运用Service Worker缓存要求时，POST要求没法缓存

Google对web的规范化照样遵照的，SW以为POST要求就是象服务器提交资本，不存在缓存需求

参考文档：

https://developers.google.com…

https://zoumiaojiang.com/arti…

    原文作者：jannesand
    原文地址: https://segmentfault.com/a/1190000018876217
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞