PWA-缓存
PWA-缓存
基础
PWA强大的离线能力就在于Service Worker拦截请求及提供缓存的能力，Service Worker的缓存能力比较强大，它能够赋予你更加精确控制缓存的能力。示例页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>缓存</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<h1></h1>
<img src="1.jpg" alt="1" />
<script>
navigator
.serviceWorker
.register('sw.js')
.then(function (reg) {
console.log(reg.scope)
})
.catch(function (err) {
console.log(err)
})
</script>
</body>
</html>
安装预缓存
在SW安装阶段，可以获取资源并为下次访问准备好缓存，示例
var cacheName = 'test'
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll(['1.jpg']))
)
})
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(resp => {
if (resp) {
return resp;
}
return fetch(event.request)
})
)
})
拦截并缓存
安装预缓存适用于知道缓存的内容的情况，当预先不知道到缓存的内容的情况下可以拦截请求并进行缓存，方便下次使用
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(resp => {
if (resp) {
return resp;
}
var requestToCache = event.request.clone();
return fetch(requestToCache).then(
(response) => {
if (!response || response.status != 200) {
return response;
}
var responseToCache = response.clone();
caches.open(cacheName).then(cache => {
cache.put(requestToCache, requestToCache)
})
return response;
}
)
})
)
})
其他
- 缓存版本控制(hash)
- workbox
PWA-缓存的更多相关文章
- ServiceWorker pwa缓存
index.js if ( navigator.serviceWorker ) { console.log("cache index") window.addEventListen ...
- pwa 总结
概述 前几天了解并按照官方文档,成功实现了一个小型的 pwa demo,现在把总结记录下来,供以后开发时参考,相信对其他人也有用. pwa pwa 包括很多内容,我这里只介绍一部分,因为比如 Push ...
- 浏览器缓存 All In One
浏览器缓存 All In One HTTP 缓存 强缓存 expired Cache-Control max-age s-maxage 协商缓存 E-tag last-modified 本地缓存 co ...
- 让老板虎躯一震的前端技术，KPI杀手
本文由云+社区发表 作者:思衍Jax 天下武功,唯 (wei) 快(fu) 不(bu) 破(po). 随着近几年的前端技术的高速发展,越来越多的团队使用 React.Vue 等 SPA 框架作为其主要 ...
- 极致 Web 性能 —— SPA 性能指南
前言 前端框架时代,为开发体验.效率与页面性能带来,非常大的革命.大家纷纷拿起一系列打包工具(webpack/parcel etc.),配合一系列加载器快速搭建起一个 SPA 页面. SPA 应用带来 ...
- 极致Web性能 —— SPA性能指南
前言 前端框架时代,为开发体验.效率与页面性能带来,非常大的革命.大家纷纷拿起一系列打包工具(webpack/parcel etc.),配合一系列加载器快速搭建起一个 SPA 页面. SPA 应用带来 ...
- 缓存&PWA实践
缓存&PWA 实践 一.背景 从上一篇<前端动画实现与原理分析>,我们从 Performance 进行动画的性能分析,并根据 Performance 分析来优化动画.但,前端不仅仅 ...
- 说说 PWA 和微信小程序--Progressive Web App
作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...
- 轻松把你的项目升级到PWA
什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客 ...
- PWA学习心得
PWA学习心得 一.什么是PWA Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...
随机推荐
- 【深入理解JAVA虚拟机】第三部分.虚拟机执行子系统.1.类文件结构
无关性 无关性的体现有两个方面: 1.平台无关性:可在不同的操作系统和机器指令集上执行,可在不同厂商的虚拟机平台上执行. 2.语言无关性:用不同编程语言写出的代码编译生成的文件都可以运行. 实现思想: ...
- System IPC 与Posix IPC（semaphore信号灯）
POSIX下IPC主要包括三种: posix message queue posix semaphores posix shared memory sysytem v IPC包括: system v ...
- JavaScript的DOM_获取和操作层次节点
一.层次节点的概述 节点的层次结构可以划分为:父节点与子节点.兄弟节点这两种.当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点. 二.childNodes 属性 chil ...
- 关于notify() 和notifyAll() 一个需要注意的地方
notify() 和 notifyAll()都是唤醒其他正在等待同一个对象锁的线程. 下面是我遇到的一个问题,记下来,免得忘了. 直接上代码,有错误的代码: 代码描述:有一个Caculate类,类中又 ...
- 【[USACO12DEC]第一!First!】
一个串不能成为第一的情况有两种 另外一个单词是它的前缀 在分配字母表大小关系的时候出现了矛盾的情况 第一种很好判断,一旦我们在一个单词没有匹配完之前遇到一个结束标志,那么就说明另外一个单词是它的前缀 ...
- Educational Codeforces Round 55 (Rated for Div. 2) C. Multi-Subject Competition 【vector 预处理优化】
传送门:http://codeforces.com/contest/1082/problem/C C. Multi-Subject Competition time limit per test 2 ...
- centos 在安装YouCompleteMe时提示 Fatal : pyconfig.h No such file or directory
问题:centos 在安装YouCompleteMe时提示 Fatal : pyconfig.h No such file or directory 解决:安装python-devel yum ins ...
- canny算子求图像边缘，edgebox那部分
过程: 1. 彩色图像转换为灰度图像 2. 对图像进行高斯模糊 3. 计算图像梯度,根据梯度计算图像边缘幅值与角度(这里其实用到了微分边缘检测算子来计算梯度幅 ...
- JavaSE注释
注解在JavaSE中算是比较高级的一种用法了,为什么要学习注解,我想大概有以下几个原因: 1. 可以更深层次地学习Java,理解Java的思想. 2. 有了注解的基础,能够方便阅读各种框架的源码,比如 ...
- HDU 2036 改革春风吹满地 （求多边形面积）
传送门: 改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...