通常我们使用普通的自己的资源,可以通过Cache-Control 配置通知浏览器进行缓存,但是有些小站没有cdn资源,用了外站的cdn资源,速度一般又想提升用户体验,这个时候ServiceWorker缓存就有用武之地了。
下面是serviceWorker的实用案例,可以看到缓存后很快。
service worker 可让浏览器主动去缓存数据。这里通过Google以前的一个开源js库sw-toolbox来实现,虽然现在访问提示该库已经过时,又更好的workbox替代,但是从简洁度来说sw-toolbox 还算能用的。
接下来讲解如何使用。
官网地址:https://googlechromelabs.github.io/sw-toolbox/
sw-toolbox工具GitHub开源地址:https://github.com/GoogleChromeLabs/sw-toolbox
文件名为 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个模式,采用那个根据自身情况来。
networkOnly: strategies.networkOnly, networkFirst: strategies.networkFirst, cacheOnly: strategies.cacheOnly, cacheFirst: strategies.cacheFirst, fastest: strategies.fastest,
<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