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 ...
随机推荐
- [徐培成系列实战课程]docker篇
[徐培成系列实战课程]docker篇 如何利用docker快速构建Spark独立模式的集群 1.介绍 利用docker容器技术快速构建跨节点的独立模型的Spark大数据集群.Spark是时下非常热门的 ...
- W3School学习网站
http://www.w3school.com.cn/tags/att_form_autocomplete.asp
- 如果把PNG、JPG、BMP和GIF文件批量转换为ICO文件?
有时候需要将大量的图片文件(比如PNG.JPG.BMP和GIF文件)批量转换为ICO图标文件,如果一个一个操作,非常费时间.本文将介绍如何用Dr. Folder软件快速批量转换图片文件为ICO图标文件 ...
- vs2017 git到oschina 方法
vs2017中git基本使用方法: 1.开发环境vs2017,git服务器使用git.oschina.net 2.打开vs2017 创建项目 如果已有项目则: 3.完成后在文件前面会有小锁的图标,说明 ...
- 关于Java中的反射的一个简单使用
把以前在其他地方的技术文章重新整理一遍, 方便自己回忆, 也方便他人借鉴. 刚工作的时候发过这么一段代码: package cn.com.hanbinit.test; import java.lang ...
- bzoj2816 [ZJOI2012]网络
Description http://www.lydsy.com/JudgeOnline/upload/zjoi2012.pdf 正解:$link-cut \ tree$. $LCT$板子题,直接维护 ...
- 输出预测边界框，NMS非极大值抑制
我们预测阶段时: 生成多个锚框 每个锚框预测类别和偏移量 但是,当同一个目标上可能输出较多的相似的预测边界框.我们可以移除相似的预测边界框.——NMS(非极大值抑制). 对于一个预测边界框B,模型会计 ...
- Linux学习总结（六）-su命令 sudo 命令 限制root远程登录
root 用户拥有至高无上的权利,那么我们运维人员是不是直接在root用户下处理所有问题呢? 答案是否定的,权力越大,责任越大,人是会犯错的,因此我们要在不影响我们的工作情况下,尽量限制我们的权力,以 ...
- springmvc(2)处理器设配器和映射器
非注解的处理器 映射器 和 适配器 一.处理器映射器 1.BeanNameUrlHandlerMapping <bean class="org.springframework.web ...
- ElasticSearch5.0+版本分词热更新实践记录
前言 刚开始接触ElasticSearch的时候,版本才是2.3.4,短短的时间,现在都更新到5.0+版本了.分词和head插件好像用法也不一样了,本博客记录如何配置Elasticsearch的Hea ...