摘要：勾上刷新頁面，顯示如圖實(shí)現(xiàn)原理使用，預(yù)先緩存和。又請(qǐng)求已經(jīng)緩存好的。加載離線圖片創(chuàng)建創(chuàng)建創(chuàng)建訪問，然后打開。一定要訪問啊，不然不會(huì)成功多個(gè)事件調(diào)用事件和其他事件一樣都是可以注冊(cè)多次的。

pwa-之service worker 基本概念
pwa-之service worker 離線文件處理

本章包含以下知識(shí)點(diǎn)

顯示離線頁面

加載離線圖片

加載離線css

多個(gè)fetch處理事件調(diào)用

網(wǎng)站圖片由于不確定的原因，可能無法訪問，這給用戶一個(gè)錯(cuò)覺，就是你的網(wǎng)站出了問題

其他諸如css,js文件都是網(wǎng)站必不可少的資源，本章我們來學(xué)些如何加載這些資源

首先讓我們來看看一個(gè)離線頁面

創(chuàng)建一個(gè)html頁面

  
  


  
Registration status: 

  

創(chuàng)建一個(gè)service-worker.js文件

var version = 1;
var currentCache = {
  offline: "offline-cache" + version
};

var offlineUrl = "offline.html";

self.addEventListener("install", function(event) {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
        "offline.svg",
        offlineUrl
      ]);
    })
  );
});

self.addEventListener("fetch", function(event) {
  // request.mode = navigate isn"t supported in all browsers
  // so include a check for Accept: text/html header.
  if (event.request.mode === "navigate" ||
    (event.request.method === "GET" &&
    event.request.headers.get("accept").includes("text/html"))) {
    event.respondWith(
      fetch(createCacheBustedRequest(event.request.url)).catch(function(error) {
        // Return the offline page
        console.log("Fetch failed. Returning offline page instead.", error);
        return caches.match(offlineUrl);
      })
    );
  } else {
    // Respond with everything else if we can
    event.respondWith(caches.match(event.request)
        .then(function (response) {
        return response || fetch(event.request);
      })
    );
  }
});

function createCacheBustedRequest(url) {
  var request = new Request(url,
    {cache: "reload"}
  );
  // See https://fetch.spec.whatwg.org/#concept-request-mode
  // This is not yet supported in Chrome as of M48, so we need to explicitly check to see
  // if the cache: "reload" option had any effect.
  if ("cache" in request) {
    return request;
  }

  // If {cache: "reload"} didn"t have any effect, append a cache-busting URL parameter instead.
  var cacheBustingUrl = new URL(url, self.location.href);
  cacheBustingUrl.search += (cacheBustingUrl.search ? "&" : "") + "cachebust=" + Date.now();
  return new Request(cacheBustingUrl);
}

創(chuàng)建offline.html頁面

 
  
  
 
 
   

     
     
Whoops! Your internet connection is not working.
     
Please check your network connection and try again.
   

  

創(chuàng)建offline.svg文件

打開index.html頁面。

勾上network->offline：刷新頁面，顯示如圖

使用cache Api，預(yù)先緩存offline.html和offline.svg。當(dāng)網(wǎng)絡(luò)不通時(shí)，html請(qǐng)求走到cache方法里面去，然后響應(yīng)的是緩存好的offline.html。offline.html又請(qǐng)求已經(jīng)緩存好的offline.svg。所以正常顯示。

創(chuàng)建index.html

  
  


  
Registration status: 
  
  

創(chuàng)建index.js

"use strict";

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register(
    "service-worker.js",
    { scope: "./" }
  ).then( function(serviceWorker) {
    document.getElementById("status").innerHTML = "successful";
  }).catch(function(error) {
    document.getElementById("status").innerHTML = error;
  });
} else {
  document.getElementById("status").innerHTML = "unavailable";
}

創(chuàng)建service-worker.js

var version = 1;
var cacheName = "static-" + version;

self.addEventListener("install", function(event) {
    event.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll([
              "index.html",
              "packt-logo.png"
            ]);
        })
    );
});

self.addEventListener("fetch", function(event) {
    event.respondWith(caches.match(event.request));
});

訪問/Chapter%202/02/index.html，然后打開offline。頁面仍然可以正常顯示。

記住一定要加上index.html。大部分的服務(wù)器會(huì)把/指向到index.html。這樣子我們的頁面緩存不會(huì)生效。

創(chuàng)建index.html

  
  
  
  


  
Registration status: 

  

創(chuàng)建service-worker.js

var version = 1;
var cacheName = "static-" + version;

self.addEventListener("install", function(event) {
    event.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll([
                "index.html",
                "style-2.css"
            ]);
        })
    );
});

self.addEventListener("fetch", function(event) {

  if (/index/.test(event.request.url) || /style-2/.test(event.request.url)) {
    event.respondWith(caches.match(event.request));
  }
});

創(chuàng)建style-1.css

body {
    background-color: lightgreen;
}

創(chuàng)建style-2.css

body {
    background-color: red;
}

同樣訪問html可以看到綠色的背景，offline之后顯示的紅色的背景。

一定要訪問index.html啊，不然不會(huì)成功

fetch事件和js其他事件一樣都是可以注冊(cè)多次的。

創(chuàng)建index.html

  
  


  
Registration status: 

  

創(chuàng)建service-worker.js

var cookFetchHandler = function(event) {
  console.log("DEBUG: Inside the /cook handler.");
  if (event.request.url.indexOf("/cook/") > 0) {
    event.respondWith(new Response("Fetch handler for /cook"));
  }
};

var cookBookFetchHandler = function(event) {
  console.log("DEBUG: Inside the /cook/book handler.");
  if (event.request.url.endsWith("/cook/book")) {
    event.respondWith(new Response("Fetch handler for /cook/book"));
  }
};

var fetchHandlers = [cookBookFetchHandler, cookFetchHandler];

fetchHandlers.forEach(function(fetchHandler) {
  self.addEventListener("fetch", fetchHandler);
});

瀏覽器里面訪問

然后訪問/cook/,是/cook/不是/cook

訪問/cook/book

關(guān)注我的微信公眾號(hào)，更多優(yōu)質(zhì)文章定時(shí)推送