摘要:勾上刷新页面,显示如图实现原理使用,预先缓存和。又请求已经缓存好的。加载离线图片创建创建创建访问,然后打开。一定要访问啊,不然不会成功多个事件调用事件和其他事件一样都是可以注册多次的。
pwa-之service worker 基本概念
pwa-之service worker 离线文件处理
本章包含以下知识点
显示离线页面
加载离线图片
加载离线css
多个fetch处理事件调用
简介网站图片由于不确定的原因,可能无法访问,这给用户一个错觉,就是你的网站出了问题
其他诸如css,js文件都是网站必不可少的资源,本章我们来学些如何加载这些资源
首先让我们来看看一个离线页面
显示离线页面创建一个html页面
<span class="javascript">Custom Offline Page</span>
Registration status: successful
创建一个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页面
<span class="coffeescript">Offline</span>
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
<span class="properties"><span class="hljs-attr">Offline</span> <span class="hljs-string">Images</span></span>
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
<span class="javascript">Offline CSS</span>
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
<span class="hljs-attr">Mutiple</span> <span class="hljs-string">Fetch</span>
Registration status:
创建service-worker.js
</>code
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
关注我的微信公众号,更多优质文章定时推送
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108288.html
摘要:勾上刷新页面,显示如图实现原理使用,预先缓存和。又请求已经缓存好的。加载离线图片创建创建创建访问,然后打开。一定要访问啊,不然不会成功多个事件调用事件和其他事件一样都是可以注册多次的。 pwa-之service worker 基本概念pwa-之service worker 离线文件处理 本章包含以下知识点 显示离线页面 加载离线图片 加载离线css 多个fetch处理事件调用 简介...
摘要:如果返回的被拒,另一个同步事件被自动地开始重试操作,直到返回一个成功状态的。推送机制使得服务器能够向发送信息,然后将信息展示给用户才是消息通知。然后它们可以发送消息通知,或者是更新的状态。 原文地址:https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...
摘要:另一部分属于进程,它重新在后台起了一个进程,它和应用的主进程互不影响,可以同时执行。其中一般作为应用程序浏览器和网络如果可用之间的代理服务。他们还将允许访问推送通知和后台同步。然后开始在进程中通过事件,来监听请求,并对请求和响应进行缓存。 前言:我们的应用可以分为两部分,一部分是属于主进程的(包括js(同步,异步),以及dom渲染等等),在一个时刻点,只能执行一个,要么先去渲染dom,...
阅读 1430·2021-09-02 09:53
阅读 2683·2021-07-29 13:50
阅读 1731·2019-08-30 11:07
阅读 1591·2019-08-30 11:00
阅读 1470·2019-08-29 14:00
阅读 1863·2019-08-29 12:52
阅读 2583·2019-08-29 11:11
阅读 3439·2019-08-26 12:23