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> ...
随机推荐
- [java插件]myeclipse添加插件
在C:\Program Files\MyEclipse 6.0\eclipse\links里建立一个svn.link. svn.link文件内容: path=C:/Program Files/MyEc ...
- springmvc 请求和响应的json和Object的转换
就是两个注解的使用@RequestBody和@ResponseBody注解的使用,然后springmvc解析进行转换然后注入 例子: @RequestMapping("/...") ...
- 2017.11.6对比Gerber差异+确认元器件方向，封装
1比对新旧版本的gerber差异 导入两个版本.其中主要的是bot(底层),Smt(元器件),sst(丝印层),top(顶层) 底层和顶层可以看出走线layout的差别,这点很重要,上次客户 ...
- node 一站式 学习 教程
还是比较全面的, 包括了 : monogoDB的安装 使用 , 各种插件, 中间件的介绍, 路由的介绍, 各种数据库框架的介绍, 测试介绍; 掌握后应该可以开发一个中型的程序, 大型程序因为有性能的 ...
- 几个Unity3d UI制作的解决方案.
1.ex2D的渲染机制 (高效的原因) 在以往的2D插件中,渲染方式是每个sprite单独渲染,由Unity负责Dynamic Batching.在新版ex2D中,我们经过严谨的优化实现了独立的dyn ...
- Nodejs实现爬虫抓取数据
开始之前请先确保自己安装了Node.js环境,还没有安装的的童鞋请自行百度安装教程...... 1.在项目文件夹安装两个必须的依赖包 npm install superagent --save-dev ...
- 基于epoll的TP传输层实现
1. 抽象TP传输层设计 在使用epoll实现实际的传输层之前,先设计一个抽象的传输层,这个抽象的传输层是传输层实现的接口层. 接口层中一共有以下几个通用的类或者接口: (1)Socket:通用的套接 ...
- Eclipse环境搭建配置操作
1.选择window 2.设置字体 3.设置编码格式:国际编码:UTF-8 第一个地方设置编码格式 第二个地方设置编码格式:这个更重要些 4.配置26个英文小写字母. 作用:能够在开发时提示你,快速开 ...
- nmap 扫描工具
Nmap 7.30 ( https://nmap.org ) 使用方法: nmap [扫描类型(s)] [选项] {目标说明}目标说明:通过主机名称, IP 地址, 网段, 等等.协议: scanme ...
- HTTP Status 500 - Error instantiating servlet class XXXX
问题描述 web项目中请求出现错误,如下: HTTP Status 500 - Error instantiating servlet class XXXX类 type Exception rep ...