js操作serviceWorker缓存静态文件
serviceWorker的作用就是用来做离线应用的，在手机端程序中用的较多
-
先看下效果
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ background-image: url("./img/alt.png"); 100px; height: 100px; } </style> </head> <body> <!-- <img src="./img/alt.png" alt=""> --> <div class="box"></div> <script> if(navigator.serviceWorker) { navigator.serviceWorker.register('./sw.js').then(function(res){ console.log(res.scope + "->" + "service worker注册成功"); }).catch(function(err){ console.log(err); }) }else{ alert("你的浏览器不支持serviceWorker"); } </script> </body> </html> -
sw.js
var version = "v1::"; // 设置版本号 self.addEventListener("install", function (event) { // serviceworker第一次加载的时候调用，可以在此时缓存静态资源 event.waitUntil( // caches帮助我们缓存资源 caches .open(version + 'fundamentals') .then(function (cache) { // 将列出的文件缓存起来 return cache.addAll([ '/', '/img/alt.png' ]); }) .then(function () { console.log('缓存完毕'); }) ); }); self.addEventListener('activate', function (event) { // install方法调用完毕后就调用此方法，主要用来删除过期的缓存 event.waitUntil( caches // keys方法用来获取缓存版本号 .keys() .then(function (keys) { // 下面的方法用来删除不是以version开头的缓存版本 return Promise.all( keys .filter(function (key) { return !key.startsWith(version); }) .map(function (key) { return caches.delete(key); }) ); }) .then(function () { console.log('WORKER: 激活完毕.'); }) ); }) self.addEventListener('fetch', function (event) { // 请求外部资源时调用 // 只捕获get请求 if (event.request.method !== 'GET') { // 只让get请求去缓存中查找 console.log('WORKER: 被拦截的api.', event.request.method, event.request.url); return; } // 让get请求取缓存中查找资源 event.respondWith( caches .match(event.request) .then(function (cached) { // 将缓存中的资源立即返回，并且同时去服务器下载最新的资源存到缓存中 var networked = fetch(event.request) .then(fetchedFromNetwork, unableToResolve) .catch(unableToResolve); // 通过caches.match这个方法，如果缓存中有资源，直接就返回了，如果没有转向网络 console.log('WORKER: fetch event', cached ? '(cached)' : '(network)', event.request.url); return cached || networked; function fetchedFromNetwork(response) { // 从网络中加载资源 var cacheCopy = response.clone(); console.log('WORKER: 从网络中拉取的资源地址.', event.request.url); caches // 存储资源 .open(version + 'pages') .then(function add(cache) { cache.put(event.request, cacheCopy); }) .then(function () { console.log('WORKER: 从网络中拉取的资源已经缓存', event.request.url); }); return response; } // 既不能从网络中获取资源又不能从缓存中获取，就会调用此方法 function unableToResolve() { console.log('WORKER: 获取资源失败.'); return new Response('<h1>Service Unavailable</h1>', { status: 503, statusText: 'Service Unavailable', headers: new Headers({ 'Content-Type': 'text/html' }) }); } }) ); })