ServiceWorker pwa缓存
index.js
if ( navigator.serviceWorker ) {
console.log("cache index")
window.addEventListener("load", function(){
navigator.serviceWorker
.register('/serversWork.js')
.then(function(registration) {
console.log('service worker 注册成功')
})
.catch(function(err) {
console.log('servcie worker 注册失败')
})
})
}else{
console.log("chche error")
}
serversWork.js
let cachelist = [
"/index.js",
// "/favicon.ico",
"/_nuxt/app.js",
"/_nuxt/runtime.js",
"/_nuxt/commons.app.js",
"/_nuxt/pages/index.js",
// "/_nuxt/930f2fe73ad8f77ebbc1.js",
]
self.addEventListener('install', e => {
e.waitUntil(
caches.open('my-cache').then(function (cache) {
// console.log("cache success")
return cache.addAll(cachelist)
})
)
})
// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存,否则去请求数据
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(function (response) {
if ( response ) {
return response
}
return fetch( e.request );
})
)
})
ServiceWorker pwa缓存的更多相关文章
- 干货 | 10分钟玩转PWA
关于PWA PWA(Progressive Web App), 即渐进式web应用.PWA本质上是web应用,目的是通过多项新技术,在安全.性能.体验等方面给用户原生应用的体验.而且无需像原生应用那样 ...
- 初识 ServiceWorker
初识ServiceWorker 初识ServiceWorker 在8月份的时候.W3C更新了一个叫Service Workers的API. 了解过HTML5中的Web Worker的人可能会对这个AP ...
- pwa 总结
概述 前几天了解并按照官方文档,成功实现了一个小型的 pwa demo,现在把总结记录下来,供以后开发时参考,相信对其他人也有用. pwa pwa 包括很多内容,我这里只介绍一部分,因为比如 Push ...
- 浏览器缓存 All In One
浏览器缓存 All In One HTTP 缓存 强缓存 expired Cache-Control max-age s-maxage 协商缓存 E-tag last-modified 本地缓存 co ...
- Twitter Lite以及大规模的高性能React渐进式网络应用
Twitter Lite以及大规模的高性能React渐进式网络应用 原文:Twitter Lite and High Performance React Progressive Web Apps at ...
- 让老板虎躯一震的前端技术,KPI杀手
本文由云+社区发表 作者:思衍Jax 天下武功,唯 (wei) 快(fu) 不(bu) 破(po). 随着近几年的前端技术的高速发展,越来越多的团队使用 React.Vue 等 SPA 框架作为其主要 ...
- 极致 Web 性能 —— SPA 性能指南
前言 前端框架时代,为开发体验.效率与页面性能带来,非常大的革命.大家纷纷拿起一系列打包工具(webpack/parcel etc.),配合一系列加载器快速搭建起一个 SPA 页面. SPA 应用带来 ...
- 极致Web性能 —— SPA性能指南
前言 前端框架时代,为开发体验.效率与页面性能带来,非常大的革命.大家纷纷拿起一系列打包工具(webpack/parcel etc.),配合一系列加载器快速搭建起一个 SPA 页面. SPA 应用带来 ...
- PWA之serviceWorker应用
1.serviceWorker介绍service worker是一段运行在浏览器后台的JavaScript脚本,在页面中注册并安装成功后,它可以拦截和处理网络请求,实现缓存资源并可在离线时响应用户的请 ...
随机推荐
- navicat for mysql 导出数据的坑
navicat 选择转储结构和数据的时候,生成的 sql 文件会比较大,因为每一条数据都会生成一条 sql 语句,所以会导致 使用 source 还原的时候会很慢很慢很慢, 而使用 mysqldump ...
- 题解【luogu2045 方格取数游戏加强版】
Description 给出一个 \(n*n\) 的矩阵,每一格有一个非负整数 \(A_{i,j}\) ,(\(A_{i,j} <= 1000\))现在从 \((1,1)\) 出发,可以往右或者 ...
- 009.C++ const使用
1.引例 class complex { public: complex(, ) : re (r), im (i) {} complex& operator += (const complex ...
- 修改ranger ui的admin用户登录密码踩坑小记
修改的ranger ui的admin用户登录密码时,需要在ranger的配置里把admin_password改成一样的,否则hdfs的namenode在使用admin时启动不起来,异常如下: Trac ...
- .Net并行编程之二:并行循环
本篇内容主要包括: 1.能够转化为并行循环的条件 2.并行For循环的用法:Parallel.For 3.并行ForEach的用法Parallel.ForEach 4.并行LINQ(PLINQ)的用法 ...
- python基础7--集合
集合set Python的set集合是一个无序不重复元素集.基本功能包括关系测试和消除重复元素.集合对象还支持union(并集).intersection(交集).difference(差集) 和 s ...
- 「Python」7个不一样的代码写法
打印index 对于一个列表,或者说一个序列我们经常需要打印它的index,一般传统的做法或者说比较low的写法: 更优雅的写法是多用enumerate 两个序列的循环 我们会经常对两个序列进行计算或 ...
- JQ笔记-加强版
Query初级 一.介绍.基本写法 什么是JQ: 一个优秀的JS库,大型开发必备 JQ的好处: 简化JS的复杂操作 不再需要关心兼容性 提供大量实用方法 如何学习JQ: www.jquery. ...
- springsecurity basic 认证
Basic Access Authentication scheme是在HTTP1.0提出的认证方法,它是一种基于challenge/response的认证模式,针对特定的realm需要提供用户名和密 ...
- IO流-LineNumberReader
LineNumberReader继承自BufferedReader,比其多了两个方法,用于设置和获取当前行号, setLineNumber(); getLineNumber();