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 ...
随机推荐
- python调用chrome打开指定网址
#!/usr/bin/python # -*- coding:utf-8 -*- import os f = open("chrome_cmd_path.txt") chrome ...
- slider.js 滑动和点击事件在firefox下报错 event is not defined
在使用layui的slider滑块控件的时候,firefox遇到了event is not defined 的情况.追究原因是因为layui的layui.js 的滑块功能依赖于silder.js,而官 ...
- Centos大文件切割和合并
现在很多公司都会把项目放在云服务器上,当我想把云服务器里面的代码和生成的文件 “sz 文件名称” down下来的时候,发现太大.云服务器不支持下载很大的文件.那么这种情况就需要使用split命令切割文 ...
- 安装ale_python_interface时遇到make错误
1. 首先按照https://pypi.org/project/ale-python-interface/0.0.1/来安装,直接python3 -m pip 但提示缺少一个头文件ale_c_wrap ...
- PhoneGap Geolocation结合百度地图api获取地理位置api
一.使用百度地图API 1.地址:http://developer.baidu.com/map/ 2.在js DEMO中获取反地址解析的DEMO 3.修改这个DEMO的密钥,去创建应用就能创建密钥,然 ...
- hdu-1792 A New Change Problem---数论&剩余系
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1792 题目大意: 给定A和B,A和B互质,求最大不能组合数,和不能组合数的个数. 解题思路: 由于g ...
- bzoj3609 [Heoi2014]人人尽说江南好
Description 小 Z 是一个不折不扣的 ZRP(Zealot Round-game Player,回合制游戏狂热玩家),最近他 想起了小时候在江南玩过的一个游戏. 在过去,人们是要边玩 ...
- iOS - CocoaPods 和 Carthage 的比较
CocoaPods 好处? 开发 iOS 项目不可避免地要使用第三方开源库,CocoaPods 的出现使得我们可以节省设置和更新第三方开源库的时间 在引入第三方库时它可以自动为我们完成各种各样的配置, ...
- Time Zone 【模拟时区转换】（HDU暑假2018多校第一场）
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6308 Time Zone Time Limit: 2000/1000 MS (Java/Others) ...
- 处理java多线程时线程安全问题 - ThreadLocal和Synchronized
多线程在自动化测试中用的不多,也就是说我们用单线程可以完成大部分的自动化测试脚本. 主要有两个原因,首先是因为自动化测试首要考虑的是脚本的稳定性,所以一般会牺牲效率以保证脚本稳定,其次是由于局限于我们 ...