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. css美化Div边框的样式实例

    很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...

  2. Ubuntu 使用Compiz配置炫酷3D桌面

    先看一下效果 要实现这种3D 的效果其实很简单. Step 1:安装N卡驱动工具 sudo apt- 这个东西其实没有太大的作用. Step 2:安装Compiz sudo apt-get insta ...

  3. Chiaki Sequence Revisited HDU - 6304 lowbit找规律法

    Problem Description Chiaki is interested in an infinite sequence a1,a2,a3,..., which is defined as f ...

  4. 手脱PECompact v2.xx

    个人认为这个壳对于新手有那么一点点难度,所以用单步和ESP都跑一下,我觉得单步是最最基础的,所以一定要掌握 一.单步 1.PEID查壳 PECompact v2.xx (16 ms) 2.载入OD,除 ...

  5. Excel 报表导入导出

    使用 Excel 进行报表的导入导出,首先下载相关的 jar 和 excel util. Excel Util 下载地址 引入依赖: <!-- poi office --> <dep ...

  6. JVM调优总结(5):典型配置

    以下配置主要针对分代垃圾回收算法而言. 堆大小设置 年轻代的设置很关键 JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理 ...

  7. MYSQL5.6学习——mysqldump备份与恢复

    MYSQL备份 冷备份:停止服务进行备份,即停止数据库的写入 热备份:不停止服务进行备份(在线) l  mysql的MyIsam引擎只支持冷备份,InnoDB支持热备份,原因: InnoDB引擎是事务 ...

  8. 【BZOJ】3998: [TJOI2015]弦论

    [题意]给定长度为n的小写字母字符串S,求第k小子串.n<=5*10^5. 给定T,T=0时不同位置的相同子串算一个,T=1时算多个. [算法]后缀自动机 [题解]对S建立SAM,T=0则每个节 ...

  9. 【CodeForces】932 E. Team Work

    [题目]E. Team Work [题意]给定n和k,n个人中选择一个大小为x非空子集的代价是x^k,求所有非空子集的代价和%1e9+7.n<=10^9,k<=5000. [算法]斯特林反 ...

  10. UIDynamicBehavior的行为类翻译

    CHENYILONG Blog UIDynamicBehavior的行为类翻译 © chenyilong. Powered by Postach.io Blog