sw.js 文件

  1. let CacheName = 'plus-v1';
  2. var filesToCache = [
  3. ];
  4.  
  5. self.addEventListener('install', function (e) {
  6. console.log('[ServiceWorker] Install');
  7. e.waitUntil(
  8. caches.open(CacheName).then(function (cache) {
  9. console.log('[ServiceWorker] Caching app shell');
  10. return cache
  11. .addAll(filesToCache)
  12. .then(function () {
  13. return self.skipWaiting();
  14. })
  15. .catch(function (error) {
  16. console.log('Failed to cache:', error);
  17. });
  18. })
  19. );
  20. });
  21.  
  22. self.addEventListener('activate', function (e) {
  23. console.log('[ServiceWorker] Activate');
  24. e.waitUntil(
  25. caches
  26. .keys()
  27. .then(function (keyList) {
  28. return Promise.all(
  29. keyList.map(function (key) {
  30. console.log(`key-----------${key}`);
  31. if (key !== CacheName) {
  32. console.log('[ServiceWorker] Removing old cache', key);
  33. return caches.delete(key);
  34. }
  35. })
  36. );
  37. })
  38. .then(function () {
  39. return self.clients.claim();
  40. })
  41. );
  42. });
  43.  
  44. self.addEventListener('fetch', function (event) {
  45. console.log('[Service Worker] Fetch', event.request.url);
  46. event.respondWith(
  47. caches.match(event.request).then(function (response) {
  48. // 如果 Service Worker有自己的返回,就直接返回,减少一次 http 请求
  49. if (response) {
  50. return response;
  51. }
  52. // 如果 service worker 没有返回,那就得直接请求真实远程服务
  53. var requestToCache = event.request.clone(); // 把原始请求拷过来
  54. return fetch(requestToCache).then(function (httpRes) {
  55. // http请求的返回已被抓到,可以处置了。
  56.  
  57. // 请求失败了,直接返回失败的结果就好了。
  58. if (!httpRes || httpRes.status !== 200) {
  59. return httpRes;
  60. }
  61.  
  62. // 请求成功的话,将请求缓存起来。
  63. var responseToCache = httpRes.clone();
  64. // 选择性缓存数据
  65. if (
  66. /\.js$|\.css$|\.jpg$|\.webp$|\.svg$|\.png$/.test(requestToCache.url) &&
  67. !/sw/.test(requestToCache.url)
  68. ) {
  69. caches.open(CacheName).then(function (cache) {
  70. cache.put(requestToCache, responseToCache);
  71. });
  72. }
  73. return httpRes;
  74. });
  75. })
  76. );
  77. });

PWA相关代码的更多相关文章

  1. [ARM] Cortex-M Startup.s启动文件相关代码解释

    1. 定义一个段名为CSTACK, 这里: NOROOT表示如何定义的段没有被关联,那么同意会被优化掉,如果不想被优化掉就使用ROOT. 后面的括号里数字表示如下: (1):这个段是2的1次方即2字节 ...

  2. Kafka Producer相关代码分析【转】

    来源:https://www.zybuluo.com/jewes/note/63925 @jewes 2015-01-17 20:36 字数 1967 阅读 1093 Kafka Producer相关 ...

  3. 命令行方式使用abator.jar生成ibatis相关代码和sql语句xml文件

    最近接手一个老项目,使用的是数据库是sql server 2008,框架是springmvc + spring + ibatis,老项目是使用abator插件生成的相关代码,现在需要增加新功能,要添加 ...

  4. myBatis自动生成相关代码文件配置(Maven)

    pom.xml文件添加配置 <build> <finalName>generator</finalName> <plugins> <!-- mav ...

  5. 临时2级页表的初始化过程 head_32.S 相关代码解释

    page_pde_offset = (__PAGE_OFFSET >> 20); /* __PAGE_OFFSET是0xc0000000,page_pde_offset = 3072 = ...

  6. 使用Mybatis Generator自动生成Mybatis相关代码

    本文将简要介绍怎样利用Mybatis Generator自动生成Mybatis的相关代码: 一.构建一个环境: 1. 首先创建一个表: CREATE TABLE pet (name VARCHAR(2 ...

  7. K:树、二叉树与森林之间的转换及其相关代码实现

    相关介绍:  二叉树是树的一种特殊形态,在二叉树中一个节点至多有左.右两个子节点,而在树中一个节点可以包含任意数目的子节点,对于森林,其是多棵树所组成的一个整体,树与树之间彼此相互独立,互不干扰,但其 ...

  8. js 横屏 竖屏 相关代码 与知识点

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  9. 转:关于Latent Dirichlet Allocation及Hierarchical LDA模型的必读文章和相关代码

    关于Latent Dirichlet Allocation及Hierarchical LDA模型的必读文章和相关代码 转: http://andyliuxs.iteye.com/blog/105174 ...

随机推荐

  1. CEIWEI USBMonitor USB监控精灵 v2.3.2 USB过滤驱动 USB监控

    CEIWEI USBMonitor USB监控精灵 是一款监控USB端口协议分析软件,用于监控和分析USB设备协议,可以拦截.记录USB软件程序操作USB设备的In.Out数据包.支持监控分析USB票 ...

  2. [概率DP][消元法][CF24D]损坏的机器人

    Description 有一只坏了的机器人站在一个\(n\times m\)的网格里,初始位置在\((x,y)\).现在每个单位时间内它会随机选左右下三个方向走,如果它随机的方向会走出网格就不会往这个 ...

  3. WXS----数据类型

  4. Spark直接读入fastq格式的数据

    输入文件: fastq格式 输出结果: kmer的频数和对应的kmer类型 系统环境Ubuntu单机版17.01 spark版本2.7 此次测试主要用到了RDD的函数foreach和zipWithIn ...

  5. clang, gcc, gdb

    Clang 比 GCC 编译器的优势: 1 编译速度更快 2 编译产出更小 3 出错提示更友好,比如 clang 在编译过程可以直接指出相对简单的出错位置以及它 " 认为 " 正确 ...

  6. LeetCode 112. 路径总和(Path Sum) 10

    112. 路径总和 112. Path Sum 题目描述 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节 ...

  7. [转帖]iis最大并发连接数、队列长度、最大并发线程数、最大工作进程数

    iis最大并发连接数.队列长度.最大并发线程数.最大工作进程数 2018-10-17 12:49:03 牛兜兜 阅读数 2952   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议 ...

  8. MyBatis代码生成器(maven插件方式和控制台命令运行方式)

    代码生成器的作用: 1.生成domain 2.生成mapper接口 3.生成mapper映射文件 准备工作:导入MyBatis所需要的包 第一步:在src/main/resources(必须)目录下创 ...

  9. python学习-56 贪吃蛇🐍

    import random, pygame, sys from pygame.locals import * FPS = 15 WINDOWWIDTH = 640 WINDOWHEIGHT = 480 ...

  10. PAT(B) 1042 字符统计(Java)字符串 正则表达式 统计

    题目链接:1042 字符统计 (20 point(s)) 题目描述 请编写程序,找出一段给定文字中出现最频繁的那个英文字母. 输入格式 输入在一行中给出一个长度不超过 1000 的字符串.字符串由 A ...