js操作serviceWorker緩存靜態文件
阿新 • • 發佈：2019-02-05
技術 sca text navig dex == available ima ade
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"); width: 100px; height: 100px; } </style> </head> <body> <!-- <img src="./img/alt.png" > --> <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‘ }) }); } }) ); })
js操作serviceWorker緩存靜態文件