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. OA项目中的论坛模块设计与实现

    1.论坛是什么?论坛与贴吧有什么区别? 简单的说论坛和贴吧都是发表言论和讨论的一个平台. 贴吧是论坛的一个部分. 2.关于论坛模块的需求分析? 首先我们看看论坛的几个设计页面: 这个主要是论坛的版块设 ...

  2. libevent学习文档(二)eventbase相关接口和参数

    Setting up a default event_base The event_base_new() function allocates and returns a new event base ...

  3. Bash to check SSL cert expired

    Code like this, You can send out a email to notice $ cat urls.txt www.baidu.com $ cat cert_chk.sh #! ...

  4. ZOJ 3776 A - Pokemon Master 签到水题

    link 求和比大小... /** @Date : 2017-03-23-21.26 * @Author : Lweleth (SoungEarlf@gmail.com) * @Link : http ...

  5. Linux更改文件及目录权限问题

    1. 快速实例学习: 修改某个目录下的所有文件的权限,包括子目录中的文件,例子如下: # /home/user 注:仅把/home/user目录的权限设置为rwxrwxrwx # /home/user ...

  6. hadoop之存储篇

    ---持续更新中,可留言讨论--- --题目导航见页面左上角的悬浮框#目录导航#-- 一.目录: 集群规划 HDFS HA 冒烟测试 功能特性 二.集群规划: 负载类型 容量规划 可扩展性 角色分离 ...

  7. 【Nginx】修改响应头,根据不同请求IP重定向到不同IP

    背景: 使用CAS登录的过程中会涉及到三次重定向,如果在同一个局域网内,是没有任何问题的,但如果涉及到跨网访问,这个问题就比较蛋疼了. 解决思路: 通过Nginx对要访问的系统进行代理,根据请求IP来 ...

  8. [转]C语言指针详解(经典,非常详细)

    博文地址:https://blog.csdn.net/constantin_/article/details/79575638 写得很好啊! 这里写一下笔记好了 int p; //这是一个普通的整型变 ...

  9. 【BZOJ】1875: [SDOI2009]HH去散步 矩阵快速幂

    [题意]给定n个点m边的无向图,求A到B恰好经过t条边的路径数,路径须满足每条边都和前一条边不同.n<=20,m<=60,t<=2^30. [算法]矩阵快速幂 [题解]将图的邻接矩阵 ...

  10. 一键切图 PS 动作 【收藏】

    使用方法 一键切图动作.zip 1. 下载动作 2. 打开PS 动作 窗口,导入动作 3. 选中图层后 点击 F2 一键切图 详情看原文链接 原文链接