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 ...
随机推荐
- 根据ip抓 包
tcpdump -i any -s 0 host 101.81.134.53 -c 1000 -w ./zhj.cap
- python 线程中的局部变量ThreadLocal
一个线程使用自己的局部变量比使用全局变量好局部变量只有线程自己能看见,不会影响其他线程全局变量的修改必须加锁 ThreadLocal 线程局部变量 import threading # 创建全局Thr ...
- simotion连接 V90 1FL6 增量型电机,报警20025 编码器细分设置
V90 1FL6 增量型电机 The configured fine resolution for Gx_XIST1 (Encoder_N.absEncoder.absResolutionMultip ...
- SAP CRM settype的创建，背后发生了什么
来自我的同事Sara. 当我们在CRM系统里创建一个settype之后,其实系统后台悄悄的帮我们创建了很多ABAP对象,比如对应的database tables, other ABAP Diction ...
- mongoDB 创建数据库、删除数据库
创建数据库 use 命令 MongoDB 用 use + 数据库名称 的方式来创建数据库.use 会创建一个新的数据库,如果该数据库存在,则返回这个数据库. 语法格式 use 语句的基本格式如下: u ...
- 用jq给link和script标签加随机的版本号（兼容IE5）
$("link,script").each(function(){ var t=Math.random().toFixed(4); /*var $tag=$(this).prop( ...
- openlayers中的自定制工具栏，包含画点、线、面
先是在projectquantan-master这个项目中有一个EditingPanel这个工具条,也挺好的,功能挺全的,但是有一点就是只有画多边形的一个按钮,没有point和path俩个的,所以就想 ...
- JavaScript 初学备忘录
JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现 ...
- empty() isset() isnull() 比较
有关 PHP 的 empty(),isset() 还有 is_null() 这三个函数的用法讨论得已经很多了,而且很多资料也未必能说得很清楚.这里再重复一次,但不是从概念去说,直接用程序例子来说话,应 ...
- halcon 使用elliptic_axis计算规则矩形角度
elliptic_axis算子是用于计算与Region等价椭圆的相关参数的,注意必须使用规则矩形!!!,不规则区域想其他办法比如模板匹配. elliptic_axis (Region, Ra, Rb, ...