service worker(一)之离线应用
serviceWork.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">
<link rel="stylesheet" href="./main.css">
<title>servie worker </title>
</head>
<body>
<div class="container">
service worker
</div>
</body>
<script src="./app.js"></script>
</html>
app.js
if (navigator.serviceWorker) {
navigator.serviceWorker.register('./service-worker.js', {scope: './'})
.then((req) => {
console.log(req)
})
.catch(e => {
console.log(e)
})
} else {
alert('not support serviceWorker')
}
service-work.js
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open('app-v1')
.then(cache => {
console.log('open cache')
return cache.addAll([
'./app.js',
'./main.css',
'./serviceWork.html'
])
})
)
})
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(res => {
if (res) {
return res
} else {
// 如果没有缓存，用fetch方法从网络上获取资源
fetch(url).then(res => {
if (res) {
//对于新请求的资源缓存到cachestorage中
} else {
//提示
}
})
}
})
)
})
main.css
.container{
color: red;
}
流程就是注册serviceWorker，指定它的工作范围。以及在serviceworker文件中监听生命周期事件，在worker安装与激活之间，存储文件到缓存
然后通过监听fetch事件，拦截worker管理的文件下的所有请求，如果匹配到缓存，返回。没有，再向服务器发送请求，再将新请求的资源做缓存
总的来说，serviceWorker就像一个代理服务器，只不过必须在https下进行
service worker(一)之离线应用的更多相关文章
- Service Worker 离线无法缓存Post请求的问题解决
许多非REST API甚至可以用于读取数据的POST请求:典型的例子是graphql.soap和其他rpcpapi.但是,Post请求不能在一个现成的渐进式Web应用程序中缓存和脱机使用.浏览器的缓存 ...
- 前端存储 (5) - service worker 离线存储
service worker 离线存储 简介: 一般的网站 在我们无法访问的 时候 一般 回出现 如下 该网页无法访问 service worker 构建的网站不会出现这个错误,因为所有的 请求都是先 ...
- Service Worker和HTTP缓存
很多人,包括我自己,初看Service Worker多一个Cache Storage的时候,就感觉跟HTTP长缓存没什么区别. 例如大家讲的最多的Service Worker能让网页离线使用,但熟悉H ...
- Service Worker
Service Worker 随着前端快速发展,应用的性能已经变得至关重要,关于这一点大佬做了很多统计.你可以去看看. 如何降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时是 ...
- Service Worker基础知识整理
Service Worker是什么 service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本.它的特性将包括推送消息,背景后台同步, geofencing(地理围栏定位),拦截 ...
- JavaScript是如何工作的：Service Worker的生命周期及使用场景
摘要: 理解Service Worker. 原文:JavaScript 是如何工作的:Service Worker 的生命周期及使用场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...
- 转《service worker在移动端H5项目的应用》
1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术,也不是一个框架,我们可以把她理解为一种模式,一种通过应用一些技术将 Web App ...
- Web API之service worker
一.参考链接 https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API http://www.alloyteam.com/ ...
- 浏览器缓存和Service Worker
浏览器缓存和Service Worker @billshooting 2018-05-06 字数 6175 Follow me on Github 标签: BOM 1. 传统的HTTP浏览器缓存策略 ...
随机推荐
- c++连接打印机(转载)
Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实现这 ...
- Java 总结篇2
第02章:数据类型和运算符 一.概述: 1.数据类型:int.float.char.boolean 2.运算符:算术运算符.赋值运算符.关系运算符.逻辑运算符.位运算符(了解即可).条件运算符 3.基 ...
- argv和raw_input的区别
argv是在一开始就要输入不输入程序会出现错误,raw_input是在运行之后进行输入.
- PB 奇葩BUG
1. 在数据窗口的Edit 中选则CHeckBox 后,必须给默认值,否则会导致数据保存不了,也无提示. 2.当使用数据窗口的 setfile()函数时 如果 条件中有两个LIKE 则会报错,一个LI ...
- [LOJ #2833]「JOISC 2018 Day 1」帐篷
题目大意:有一个$n\times m$的网格图,若一个人的同一行或同一列有人,他就必须面向那个人,若都无人,就可以任意一个方向.若一个人无法确定方向,则方案不合法,问不同的方案数.$n,m\leqsl ...
- Luogu4827 Crash的文明世界 组合、树形DP
传送门 又是喜闻乐见的\(k\)次幂求和题目 那么\(S(x) = \sum\limits_{i=1}^n dist(i,x)^k = \sum\limits_{i=1}^n \sum\limits_ ...
- JavaScript中数组的key-value在对象中倒装的妙用
对于数组的去重.寻找指定元素的索引,通常我们都是通过遍历来解决,但是在某些应用场景下,将数组的value-key进行倒装,也即将value当做对象的key,key当做对象value,可以极大降低算法的 ...
- 使用 SetParent 制作父子窗口的时候，如何设置子窗口的窗口样式以避免抢走父窗口的焦点
原文:使用 SetParent 制作父子窗口的时候,如何设置子窗口的窗口样式以避免抢走父窗口的焦点 制作传统 Win32 程序以及 Windows Forms 程序的时候,一个用户看起来独立的窗口本就 ...
- RabbitMQ实战-死信队列
RabbitMQ死信队列 场景说明 代码实现 简单的Util 生产者 消费者 场景说明 场景: 当队列的消息未正常被消费时,如何解决? 消息被拒绝并且不再重新投递 消息超过有效期 队列超载 方案: 未 ...
- 如何回答——请简述MySQL索引类型
想必大家在被问到这个问题的时候,在网上总是能搜到不同的回答,却又各不相同.其实这些答案大部分都是正确的,只不过在阐述MySQL索引类型的时候从不同方面入手而已.这里归纳如下,具体的机制可以参考其他博文 ...