js操作serviceWorker缓存静态文件
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" 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'
})
});
}
})
);
})
js操作serviceWorker缓存静态文件的更多相关文章
- Nginx设置Js、Css等静态文件的缓存过期时间
location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires 3d; //表示缓存3天 expires 3h; //表示缓存3小 ...
- apache下用expires_module让浏览器缓存静态文件
让浏览器缓存CSS.JS.图片.静态文件等是很重要的事情,这样可以减轻服务器的压力,省的浏览器经常要去服务端下载这些静态文件.下面看看配置方法吧. 1.开启apache扩展模块mod_expires. ...
- 【摘自张宴的"实战:Nginx"】使用nginx的proxy_cache模块替代squid,缓存静态文件
#user nobody;worker_processes 1; error_log logs/static_source.error.log;#error_log logs/error.log no ...
- 霸气！Nginx 中缓存静态文件秘籍
导读 这篇教程说明你应该怎样配置 nginx.设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片. CSS 和 Javascript 文件)设 ...
- 用nginx缓存静态文件
这篇教程说明你应该怎样配置 nginx.设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片. CSS 和 Javascript 文件) ...
- virtualBox 虚拟机下nginx设置不缓存静态文件不起作用解决办法
最近开发的时候,调整js时会一直使用缓存文件,无法显示改动!nginx配置静态文件add_header Cache-Control no-cache;也不起作用,很苦恼! nginx配置代码:even ...
- nginx优化:使用expires在浏览器端缓存静态文件
一,nginx中expires指令的作用 网站的图片等静态文件一旦发布,通常很少改动, 为了减小对服务器请求的压力,提高用户浏览速度, 我们可以设置nginx中的expires, 使用户访问一次后,将 ...
- tomcat 无法加载js和css 等静态文件的问题
前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了.jsp等动态页面访问正常. 打开浏览器监控发现所有的css 和js 文件返回都是404 .直接访问单个的c ...
- SpringMVC架构的项目，js，css等静态文件导入有问题
发生原因 <servlet> <servlet-name>springmvc-mybaits</servlet-name> <servlet-class> ...
随机推荐
- Linux命令详解-cd
Linux cd 命令可以说是Linux中最基本的命令语句,其他的命令语句要进行操作,都是建立在使用 cd 命令上的. 所以,学习Linux 常用命令,首先就要学好 cd 命令的使用方法技巧. ...
- JsonUtils
import net.sf.json.JSONObject; public class JsonTools { public static JSONObject getJSONObject(Strin ...
- 一般处理程序ashx中用session存储数据
如果要使用session的话,在handler的代码中添加System.Web.SessionState的引用,并让这个handler继承IRequiresSessionState接口,一定要继承这个 ...
- 亲测安装nginx1.8.1 日期2016年3月16日
1.安装nginx tar zxvf nginx-1.8.1.tar.gz cd nginx-1.8.1 ./configure make make install /usr/local/nginx/ ...
- 八大排序算法的java实现
有时间再贴算法分析图 JDK7的Collections.sort()的算法是TimSort, 适应性的归并排序, 比较晦涩难懂, 这里没有实现 public class mySort { // 冒泡排 ...
- 004——VUE中的v-once的使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- MySQL index merge
深入理解 index merge 是使用索引进行优化的重要基础之一. [ index merge] 当where谓词中存在多个条件(或者join)涉及到多个字段,它们之间进行 AND 或者 ...
- dubbo-monitor安装、 监控中心 配置过程
简单介绍下monitor: Simple Monitor挂掉不会影响到Consumer和Provider之间的调用,所以用于生产环境不会有风险. 配置好了之后可以结合admin管理后台使用,可以清晰的 ...
- Agilent RF fundamentals （3）- TX and RX
1Create carrier:谐振器,如433.92Mhz LC谐振 (频偏控制) 2Add data to carrier 加载数据 3Amplify to broadcast :放大器,如NPN ...
- Android 进阶14：源码解读 Android 消息机制（ Message MessageQueue Handler Looper）
不要心急,一点一点的进步才是最靠谱的. 读完本文你将了解: 前言 Message 如何获取一个消息 Messageobtain 消息的回收利用 MessageQueue MessageQueue 的属 ...