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. Machine Learning in Action-chapter2-k近邻算法

    一.numpy()函数 1.shape[]读取矩阵的长度 例: import numpy as np x = np.array([[1,2],[2,3],[3,4]]) print x.shape / ...

  2. Problem D. Country Meow 2018ICPC南京

    n个点求出最小圆覆盖所有点 退火算法不会,不过这题可以用三分套三分写 x轴y轴z轴各三分 #include <cstdio> #include <cstring> #inclu ...

  3. webservice 采用SSL实现加密传输

    本文转自:http://book.51cto.com/art/200906/129770.htm http://yeweiyun868.blog.163.com/blog/static/5637844 ...

  4. libuv在mingw下编译

    libuv是一个基于事件的异步IO库,来自node.js项目. libuv提供了Makefile.mingw,供MingW编译,由其中的规则我们可以得到一下编译步骤: cd libuv/src gcc ...

  5. Java的StringAPI的小练习

    //-------------String类-------------- //求两个字符串的最大相同子串 /* 思路: 1.找出较短的那个字符串 2.找出短串的所有子串,使用contains函数判断是 ...

  6. 1.Spring揭秘--Ioc容器

    1.Ioc即控制反转,假设一个类需要依赖另外一个类,在最初始的做法就是创建那个依赖类的对象,然后使用这个类提供的功能,如果创建这个依赖类的职责交给Ioc Service Provider去做,那么这就 ...

  7. Spring Boot 使用IntelliJ IDEA创建一个web开发实例(二)

    1. 创建一个Controller类 package com.example.demo; import org.springframework.web.bind.annotation.RequestM ...

  8. 从零搭建SSM框架(五)Maven实现Tomcat热部署

    配置tomcat 第一步:需要修改tomcat的conf/tomcat-users.xml配置文件.添加用户名.密码.权限. <role rolename="manager-gui&q ...

  9. 使用Forms Authentication

    using System; using System.Web; using System.Web.Security;   namespace AuthTest {   public class Aut ...

  10. 【洛谷 P3199】 [HNOI2009]最小圈(分数规划,Spfa)

    题目链接 一开始不理解为什么不能直接用\(Tarjan\)跑出换直接求出最小值,然后想到了"简单环",恍然大悟. 二分答案,把所有边都减去\(mid\),判是否存在负环,存在就\( ...