通过ServiceWorker缓存静态资源提高网站访问速度

位置：首页>文章>详情分类：教程分享 > WEB基础阅读(0) 2024-03-15 15:16:27

通常我们使用普通的自己的资源，可以通过Cache-Control 配置通知浏览器进行缓存，但是有些小站没有cdn资源，用了外站的cdn资源，速度一般又想提升用户体验，这个时候ServiceWorker缓存就有用武之地了。

下面是serviceWorker的实用案例，可以看到缓存后很快。

service worker 可让浏览器主动去缓存数据。这里通过Google以前的一个开源js库sw-toolbox来实现,虽然现在访问提示该库已经过时，又更好的workbox替代，但是从简洁度来说sw-toolbox 还算能用的。

接下来讲解如何使用。

首先下载工具sw-toolbox.js

官网地址：https://googlechromelabs.github.io/sw-toolbox/

sw-toolbox工具GitHub开源地址：https://github.com/GoogleChromeLabs/sw-toolbox

编写sw-toolbox.js工具配置文件

文件名为 service-worker.js,并将该文件放于网站访问的根目录，例如：https://www.example.com/service-worker.js

特别注意：该配置文件一定要放根目录（后续尝试过放其他地方配置score都非常繁琐，根目录是最佳选择）

配置内容参考：

/**
 * google sw-toolbox配置文件
 */
'use strict';
(function () {
    'use strict';
    /**
     * Service Worker Toolbox caching
     */

    var cacheVersion = '-toolbox-v1';
    var staticVendorCacheName = 'static-vendor' + cacheVersion;
    var staticThirdVendorCacheName = 'static-third-vendor' + cacheVersion;
    var staticAssetsCacheName = 'static-assets' + cacheVersion;
    var maxEntries = 5000;
    //以下的网址请更换为博客地址(可以填写绝对链接或者相对链接)
    self.importScripts('/assets/libs/sw-toolbox/sw-toolbox.js');
    self.toolbox.options.debug = false;

    //添加图片静态资源，具体目录请自行更换
    self.toolbox.router.get('/assets/upload/(.*)', self.toolbox.cacheFirst, {
        cache: {
            name: staticAssetsCacheName,
            maxEntries: maxEntries
        }
    });
    //添加图片静态资源，具体目录请自行更换
    self.toolbox.router.get('/assets/(libs|web|img)/(.*)', self.toolbox.cacheFirst, {
        cache: {
            name: staticAssetsCacheName,
            maxEntries: maxEntries
        }
    });
    self.toolbox.router.get('/(.*)(.ico)', self.toolbox.cacheFirst, {
        cache: {
            name: staticAssetsCacheName,
            maxEntries: maxEntries
        }
    });

    //以下均为第三方/不同域名cdn资源缓存
    self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /static\.leftso\.com/,
        cache: {
            name: staticVendorCacheName,
            maxEntries: maxEntries
        }
    });

    self.toolbox.router.get('/(.*)(.js)', self.toolbox.cacheFirst, {
        origin: /cdn\.bootcdn\.net/,
        cache: {
            name: staticThirdVendorCacheName,
            maxEntries: maxEntries
        }
    });

    // immediately activate this serviceworker
    self.addEventListener('install', function (event) {
        return event.waitUntil(self.skipWaiting());
    });

    self.addEventListener('activate', function (event) {
        return event.waitUntil(self.clients.claim());
    });

})();

内部表达式根据自己网站情况进行更改，其中有个配置self.toolbox.cacheFirst

这里表示缓存优先，一共有5个模式，采用那个根据自身情况来。

网络优先 Network first
缓存优先 Cache first
最快 Fastest（本地和网络请求同时进行，谁快用谁）
只用缓存 Cache Only
只用网络 Network Only

  networkOnly: strategies.networkOnly,
  networkFirst: strategies.networkFirst,
  cacheOnly: strategies.cacheOnly,
  cacheFirst: strategies.cacheFirst,
  fastest: strategies.fastest,

网站网页引入service-worker.js配置

<script>
     var serviceWorkerUri = '/service-worker.js';
    if ('serviceWorker'in navigator) {
        navigator.serviceWorker.register(serviceWorkerUri).then(function() {
            if (navigator.serviceWorker.controller) {
                console.log('Assets cached by the controlling service worker.');
            } else {
                console.log('Please reload this page to allow the service worker to handle network operations.');
            }
        }).catch(function(error) {
            console.log('ERROR: ' + error);
        });
    } else {
        console.log('Service workers are not supported in the current browser.');
    }
</script>

至此已经搞定了serviceworker相关配置，下面是验真

验证就十分繁琐了，这里讲解下思路

首先你的有一个域名，然后去腾讯云/阿里云申请一个免费的ssl证书

本地编辑hosts文件，将本地127.0.0.1映射到你的域名，然后通过nginx或者其他工具配置你上面的ssl证书和访问域名

本地调试看结果

over