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> ...
随机推荐
- oracle-12514 or 12520 监听程序无法为请求的服务器类型找到可用的处理程序
(转自:http://blog.csdn.net/wshl1234567/article/details/8003154) 在项目过程中,测试程序的时候数据库经常报错,经过几天的判断和分析,发现一个规 ...
- Django rest_framewok框架的基本组件
快速实例 序列化 视图三部曲 认证与权限组件 解析器 分页 回到顶部 快速实例 Quickstart 回到顶部 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们的Web ...
- Windows 使用技巧
怎样添加“发送到”的快捷方式,cmd里面shell:sendto打开文件夹,把快捷方式放进去就可以了. vs中c#快速实现接口所有函数快捷键: 鼠标放在实现的接口上面+shift+alt+F10.
- HTML的后缀显示、标准格式和标签（1）
后缀的显示 win10:打开我的计算机--->点击上面的查看--->选中文件扩展名 win8:打开我的计算机--->点击上面的组织选中文件夹选项--->点击上面的查看---&g ...
- Http权威指南（概述篇总结）
之前的<锋利的jQuery>后面陆续翻完了,实在觉得没什么值得记录的,也就没继续写了,然后看见书架上有 本去年买的<Http权威指南>,其实做web编程的,对于Http协议还是 ...
- 6.etc目录下重要文件和目录详解
1./etc/下的重要的配置文件 /etc(二进制软件包的 yum /rpm 安装的软件和所有系统管理所需要的配置文件和子目录.还有安装的服务的启动命令也放置在此处) /etc/sysconfig/n ...
- 基于注解的 Spring MVC 简单入门
web.xml 配置: <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class> ...
- Struts2常用标签总结
Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的 ...
- LeetCode Minimum Time Difference
原题链接在这里:https://leetcode.com/problems/minimum-time-difference/description/ 题目: Given a list of 24-ho ...
- Python 中，字符串"连接"效率最高的方式是？一定出乎你的意料
网上很多文章人云亦云,字符串连接应该使用「join」方法而不要用「+」操作.说前者效率更高,它以更少的代价创建新字符串,如果用「+」连接多个字符串,每连接一次,就要为字符串分配一次内存,效率显得有点低 ...