service worker之cache实践--sw-precache
Progressive web application是谷歌推出的一种渐进式应用,我觉得其实PWA是一种非常具有发展前景的技术。首先,PWA是由谷歌推出的,而且跨平台,PWA可以给你类似于原生APP的体验,通过service worker,你可以将资源缓存到本地。但是,PWA再国内一直都是不温不火,主要有好几个原因:一是因为国内的浏览器环境比较复杂,而PWA一般只是能够在chrome浏览器得到较好的支持。虽然chrome在桌面端占据了很大比例,但是在移动端还是一般般,普通的用户不一定会去安装Chrome。二是safari浏览器对于PWA的支持不是很完美,service worker目前还是没有得到支持的。
但是我是觉得PWA还是很好的,值得开发者们进一步探索。有一点偏题了,今天要讨论的其实是PWA里面service worker资源的缓存问题。主要问题的背景是这样的,我有一个上海地铁线路图的PWA,可以支持离线使用,有兴趣的同学可以尝试看看。我遇到一个问题,就是每次我更新之后代码之后,加入我的PWA被添加到主屏之后,这个APP的代码就没有更新,必须删除后重新重浏览器中添加到主屏。一开始我以为是PWA的问题,后来竟别人提醒,桌面上的APP其实也就是网站的链接。我这才恍然大悟,问题是因为我的servicer worker里面的缓存策略有问题。因为我的APP通过service worker来缓存资源,包括js,css以及图片文件,所以始终是从缓存中加载资源,所以我远程代码更新后,这个APP的代码却没有得到更新。OK,拿代码说话,我一开始的代码是:
var cacheName = 'subway';
var filesToCache = ['/','index.html','image/transfer.png','dist/alloy_finger.js','app.css'
];self.addEventListener('install', function(e) {console.log('service worker install');e.waitUntil(caches.open(cacheName).then(function(cache) {console.log('serviceworker caching app shell');return cache.addAll(filesToCache);}));
});
可以看出我们在install事件后通过在cache里面加载文件,所以我们必须选择一种合适的策略能够让我们的APP在代码更新之后去请求新的代码呢?
Google其实在PWA推出的过程中也给出了很多有用的技术。比如sw-precache以及sw-toolbox,以及最近正在发展过程中的sw-helper。这里,我主要使用的是sw-precache来更新我的service worker策略。
sw-precache也是NODE中的一个模块,可以通过npm install sw-precache
来进行安装。sw-precache可以配合多个工具使用,这里我主要介绍一下如何配合gulp来使用。我们通过利用sw-precache来帮助我们生成sw-precache。饿了么的huangxuan在medium写了一篇文章来渗入地介绍sw-precache,这篇文章写的不错,但是却是在墙外,主要是介绍sw-precache的工作方式。我就谈一下我对sw-precache的理解把,以一个gulpfile的一段代码为例:
gulp.task('generate-sw', function(callback) {var path = require('path');var swPrecache = require('sw-precache');swPrecache.write(path.join('sw.js'), {staticFileGlobs: ['app.js','dist/alloy_finger.js','dist/app.css','image/*.{png}','index.html','/']}, callback)
})
我们通过利用sw-precache来生成sw.js文件。主要的方式是检测你在staticFileGlobs里面的文件有没有发生变化,如果发生变化就会重新生成hash码,从而能够使得APP在代码更新之后向远程请求新的代码。
这篇文章可能只是很小的一点,关于service worker的使用还有很多东西值得学习,欢迎关注我的github共同探讨。
service worker之cache实践--sw-precache相关推荐
- 网易云课堂 Service Worker 运用与实践
前言 本文首先会简单介绍下前端的常见缓存方式,再引入Service Worker的概念,针对其原理和如何运用进行介绍.然后基于google推出的第三方库Workbox,在产品中进行运用实践,并对其原理 ...
- 缓存存在那些位置?缓存位置可分Service Worker、Memory Cache、Disk Cache、Push Cache四种
从缓存位置上来说分为四种,并且各自有优先级,当依次查找缓存且都没有命中的时候,才会去请求网络. Service Worker Memory Cache Disk Cache Push Cache Se ...
- 初识Service Worker
当下PWA比较火,而Service Worker是实现PWA的一项关键技术,今天我们一起了解下关于Service Worker的一些基础知识和适用场景. 什么是Server Worker 我们先来看一 ...
- Service Worker 的一个实战例子
关于 Service Worker 概念的例子,请参考我之前的这篇文章.本文是实战. 本地新建一个 html 文件,该文件里加载一个 Service worker 的实现: <html> ...
- 【转载】古典浏览器缓存和Service Worker对比
1. 传统的HTTP浏览器缓存策略 在一个网页的生命周期中,开发者为了缩短用户打开页面的时间,通常会设置很多缓存.其中包括了: 浏览器缓存 代理服务器缓存(CDN缓存) 服务器缓存 数据库缓存 等各种 ...
- 简单的了解下 Service Worker
前言 本文首先会简单介绍下前端的常见缓存方式,再引入serviceworker的概念,针对其原理和如何运用进行介绍.然后基于google推出的第三方库workbox,在产品中进行运用实践,并对其原理进 ...
- Service Worker
Service Worker 随着前端快速发展,应用的性能已经变得至关重要,关于这一点大佬做了很多统计.你可以去看看. 如何降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时是 ...
- Service Worker 图片加载失败处理
Service Worker 图片加载失败处理 参考文档 git clone https://gitee.com/wjj0720/Service-Worker.git 运行 npm i npm sta ...
- Service Worker 全面进阶
腾讯云技术社区-掘金主页持续为大家呈现云计算技术文章,欢迎大家关注! 作者:villainthr Service Worder 是用来代替 manifest,用来生成缓存的效果的.以前吭哧吭哧的学 m ...
最新文章
- vivo解bl锁_黔隆科技刷机教程酷派B770S忘记密码刷机解锁降级救砖解屏幕锁账户锁教程...
- 大学物理实验试卷1到8_物理实验在绝对的“理论”面前就是“纸老虎”
- 记我面试6家公司的感悟
- 结构化查询语言(Structured Query Language)
- Python 第三方库之docx
- c#官方推荐md5通用加密类
- 【博客项目】—数据分页(十)
- 摄氏度和开氏度的换算_摄氏度,开氏度,华氏度等常见温度单位转换在线计算器_三贝计算网_23bei.com...
- G711音频文件播放器
- vs2012c语言参考手册,visualstudio2012教程
- 三菱控制器 梯形图 c语言 转换,三菱plc程序设计控制器系列软件功能简介
- Unity接TalkingData自动集成XCode
- 详谈室内定位技术方案
- 1688店铺所有商品API接口(整店商品查询API接口)
- 什么是线程同步和线程异步?
- 类和对象常见题目详解
- Oracle EBS 导入日记账提示警告 GL_INTERFACE 错误代码ECW1,EC11
- 【PL/SQL】Insert/ update/ delete/ merge
- 拓展kmp(2020新年第一篇博客 学无止境冲啊)
- libmpi_f90找不到目标共享文件