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

教程分享 > WEB技术 (0) 2024-03-15 15:16:27

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

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

操作示例图-b280381f0c4440749611239d31e8d9a7.png

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

 

 

 

https://www.leftso.com/article/sw-toolbox-useage.html

相关文章
通常使用普通的资源可以通过Cache-Control配置通知浏览器进行缓存,但是有些小站没有cdn资源,用了外站的cdn资源,速度一般又想提升用户体验,ServiceWorker缓存就有用武之地了。
spring boot 开发技巧,在开发web项目中跳过thyemeleaf模板/js/css等缓存避免每次修改资源文件都需要重启服务器
java json字符串转对象_json转换为java对象_ json字符串转对象数组
前言值得一提的是JSON只有数组数据类型
本文主要讲解一种方式解决ckeditor编辑器上传的图片时候会添加一个默认的图片的宽高等style属性
一、项目环境Spring Boot 2.1.2.RELEASEshiro-spring 1.4二、去掉URL jsessionid在shiro配置中,配置关闭url中显示sessionId ...
       学习使用Gson JsonReader类,这是一个基于拉的流式JSON解析器,它有助于将JSON作为标记流来读取​GSON1. JsonReader是什么JsonReader是流式...
主流模块规范目前主流模块规范有:规范名称运行环境实现加载方式AMD(异步模块定义)客户端require.js异步CMD(通用模块定义)客户端sea.js异步Co
Import Maps是一种针对web页面去控制imports行为的新方式,潜在地可以使你摈弃掉你的构建系统。当Es modules在Ecmascript 20
使用Jackson写巨大的JSON文件