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缓存的更多相关文章

  1. 干货 | 10分钟玩转PWA

    关于PWA PWA(Progressive Web App), 即渐进式web应用.PWA本质上是web应用,目的是通过多项新技术,在安全.性能.体验等方面给用户原生应用的体验.而且无需像原生应用那样 ...

  2. 初识 ServiceWorker

    初识ServiceWorker 初识ServiceWorker 在8月份的时候.W3C更新了一个叫Service Workers的API. 了解过HTML5中的Web Worker的人可能会对这个AP ...

  3. pwa 总结

    概述 前几天了解并按照官方文档,成功实现了一个小型的 pwa demo,现在把总结记录下来,供以后开发时参考,相信对其他人也有用. pwa pwa 包括很多内容,我这里只介绍一部分,因为比如 Push ...

  4. 浏览器缓存 All In One

    浏览器缓存 All In One HTTP 缓存 强缓存 expired Cache-Control max-age s-maxage 协商缓存 E-tag last-modified 本地缓存 co ...

  5. Twitter Lite以及大规模的高性能React渐进式网络应用

    Twitter Lite以及大规模的高性能React渐进式网络应用 原文:Twitter Lite and High Performance React Progressive Web Apps at ...

  6. 让老板虎躯一震的前端技术,KPI杀手

    本文由云+社区发表 作者:思衍Jax 天下武功,唯 (wei) 快(fu) 不(bu) 破(po). 随着近几年的前端技术的高速发展,越来越多的团队使用 React.Vue 等 SPA 框架作为其主要 ...

  7. 极致 Web 性能 —— SPA 性能指南

    前言 前端框架时代,为开发体验.效率与页面性能带来,非常大的革命.大家纷纷拿起一系列打包工具(webpack/parcel etc.),配合一系列加载器快速搭建起一个 SPA 页面. SPA 应用带来 ...

  8. 极致Web性能 —— SPA性能指南

    前言 前端框架时代,为开发体验.效率与页面性能带来,非常大的革命.大家纷纷拿起一系列打包工具(webpack/parcel etc.),配合一系列加载器快速搭建起一个 SPA 页面. SPA 应用带来 ...

  9. PWA之serviceWorker应用

    1.serviceWorker介绍service worker是一段运行在浏览器后台的JavaScript脚本,在页面中注册并安装成功后,它可以拦截和处理网络请求,实现缓存资源并可在离线时响应用户的请 ...

随机推荐

  1. libevent文档学习(一)多线程接口和使用

    参考libevent官方提供的文档: http://www.wangafu.net/~nickm/libevent-book/Ref1_libsetup.html 这一篇主要翻译libevent多线程 ...

  2. UVA-10375 数学

    UVA-10375 题意 : 输入p,q,r,s,求C(p,q)/C(r,s). p,q,r,s<=10000:结果不超过1e8 代码: //显然不能直接计算,考虑每个数都可以由若干个素数乘积得 ...

  3. Kubernetes - Deploy Containers Using YAML

    In this scenario, you'll learn how to use Kubectl to create and launch Deployments, Replication Cont ...

  4. [DeeplearningAI笔记]序列模型3.6Bleu得分/机器翻译得分指标

    5.3序列模型与注意力机制 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.6Bleu得分 在机器翻译中往往对应有多种翻译,而且同样好,此时怎样评估一个机器翻译系统是一个难题. 常见的解决 ...

  5. JVM调优总结(4):分代垃圾回收

    为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对象, ...

  6. JVM调优总结(2):基本垃圾回收算法

    可以从不同的的角度去划分垃圾回收算法: 按照基本回收策略分 引用计数(Reference Counting): 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数. ...

  7. JAVA多线程提高十二:阻塞队列应用

    一.类相关属性 接口BlockingQueue<E>定义: public interface BlockingQueue<E> extends Queue<E> { ...

  8. 谈谈对Spring IOC(控制反转)的理解--转

    谈谈对Spring IOC(控制反转)的理解--转   学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC ...

  9. Islands and Bridges(POJ2288+状压dp+Hamilton 回路)

    题目链接:http://poj.org/problem?id=2288 题目: 题意:求Hamilton 路径权值的最大值,且求出有多少条权值这么大的Hamilton路径. 思路:状压dp,dp[i] ...

  10. Problem D. Berland Railroads Gym - 101967D (思维)

    题目链接:https://cn.vjudge.net/contest/274029#problem/D 题目大意:给你0-9每个数的个数,然后让你找出最大的数,满足的条件是任意三位相连的都能被三整除. ...