摘要:勾上刷新頁面,顯示如圖實現原理使用,預先緩存和。又請求已經緩存好的。加載離線圖片創建創建創建訪問,然后打開。一定要訪問啊,不然不會成功多個事件調用事件和其他事件一樣都是可以注冊多次的。
pwa-之service worker 基本概念
pwa-之service worker 離線文件處理
本章包含以下知識點
顯示離線頁面
加載離線圖片
加載離線css
多個fetch處理事件調用
簡介網站圖片由于不確定的原因,可能無法訪問,這給用戶一個錯覺,就是你的網站出了問題
其他諸如css,js文件都是網站必不可少的資源,本章我們來學些如何加載這些資源
首先讓我們來看看一個離線頁面
顯示離線頁面創建一個html頁面
Custom Offline Page Registration status:
創建一個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); }
創建offline.html頁面
Offline Whoops! Your internet connection is not working.
Please check your network connection and try again.
創建offline.svg文件
打開index.html頁面。
勾上network->offline:刷新頁面,顯示如圖
實現原理使用cache Api,預先緩存offline.html和offline.svg。當網絡不通時,html請求走到cache方法里面去,然后響應的是緩存好的offline.html。offline.html又請求已經緩存好的offline.svg。所以正常顯示。
加載離線圖片創建index.html
Offline Images Registration status:
創建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"; }創建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。大部分的服務器會把/指向到index.html。這樣子我們的頁面緩存不會生效。加載離線css創建index.html
Offline CSS Registration status:
創建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)); } });創建style-1.css
body { background-color: lightgreen; }創建style-2.css
body { background-color: red; }同樣訪問html可以看到綠色的背景,offline之后顯示的紅色的背景。
一定要訪問index.html啊,不然不會成功多個fetch事件調用fetch事件和js其他事件一樣都是可以注冊多次的。
創建index.html
Mutiple Fetch Registration status:
創建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
關注我的微信公眾號,更多優質文章定時推送
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/62010.html
相關文章
pwa-之service worker 離線文件處理
摘要:勾上刷新頁面,顯示如圖實現原理使用,預先緩存和。又請求已經緩存好的。加載離線圖片創建創建創建訪問,然后打開。一定要訪問啊,不然不會成功多個事件調用事件和其他事件一樣都是可以注冊多次的。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 本章包含以下知識點 顯示離線頁面 加載離線圖片 加載離線css 多個fetch處理事件調用 簡介...
[翻譯]Service workers:PWA背后的英雄
摘要:如果返回的被拒,另一個同步事件被自動地開始重試操作,直到返回一個成功狀態的。推送機制使得服務器能夠向發送信息,然后將信息展示給用戶才是消息通知。然后它們可以發送消息通知,或者是更新的狀態。 原文地址:https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...
PWA之 workbox 學習
摘要:另一部分屬于進程,它重新在后臺起了一個進程,它和應用的主進程互不影響,可以同時執行。其中一般作為應用程序瀏覽器和網絡如果可用之間的代理服務。他們還將允許訪問推送通知和后臺同步。然后開始在進程中通過事件,來監聽請求,并對請求和響應進行緩存。 前言:我們的應用可以分為兩部分,一部分是屬于主進程的(包括js(同步,異步),以及dom渲染等等),在一個時刻點,只能執行一個,要么先去渲染dom,...
發表評論
0條評論
閱讀 955·2019-08-30 14:24
閱讀 987·2019-08-30 14:13
閱讀 1799·2019-08-29 17:21
閱讀 2661·2019-08-29 13:44
閱讀 1654·2019-08-29 11:04
閱讀 438·2019-08-26 10:44
閱讀 2564·2019-08-23 14:04
閱讀 908·2019-08-23 12:08