Workbox 缓存
介绍 https://developers.google.cn/web/tools/workbox/guides/get-started
先注册一个service worker
<script>
// Check that service workers are registered
if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}
</script>
并在 sw.js里面写入
console.log('Hello from sw.js');
打开页面你就会看到service worker文件中的日志
您应该看到您的service worker已注册。
现在我们已经注册了service worker,让我们来看看我们如何使用Workbox。
修改我们的 service worker,可能由于网络原因你无法访问 cdn
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
if (workbox) {
console.log(`Yay! Workbox is loaded
Workbox 缓存的更多相关文章
- Workbox使用策略
1.什么是Workbox Strategies? 当service workers 首次被引入时,可以设定一组常见的缓存策略. 缓存策略是一种模式,用于确定service workers 在收到fet ...
- 创建一个离线优先,数据驱动的渐进式 Web 应用程序
原文地址:Build an offline-first, data-driven PWA 译文出自:我的个人博客 概述 在本文中,您将学习如何使用 Workbox 和 IndexedDB 创建离线优先 ...
- 重识 PWA 进阶到 workbox3
看到PWA,似曾相识,但又感觉很模糊,于是乎,又重新翻阅文档,学习了一遍,顺便把相关知识学习了一下,比如service worker,workbox3. PWA 概念: 全称:Progressive ...
- ionic3 懒加载在微信上缓存的问题
1.懒加载是什么? 在ionic2中所有的组件.模块.服务.管道等都堆积在app.module.ts模块中,在页面初始化的时候会一次性加载所有的资源,导致资源过大,页面渲染缓慢,也导致app.modu ...
- PWA - service worker - Workbox(未完)
Get Started(开始) 只有get请求才能cache缓存吗? Create and Register a Service Worker File(创建和注册 Service Worker) B ...
- Service worker (@nuxtjs/workbox) 采坑记
PWA(Progressive Web App)是前端的大趋势,它能极大的加快前端页面的加载速度,得到近乎原生 app 的展示效果(其实难说).PWA 其实是多种前端技术的组合,其中最重要的一个技术就 ...
- 探究javascript对象和数组的异同,及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- 哪种缓存效果高?开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- ASP.NET Core 中间件之压缩、缓存
前言 今天给大家介绍一下在 ASP.NET Core 日常开发中用的比较多的两个中间件,它们都是出自于微软的 ASP.NET 团队,他们分别是 Microsoft.AspNetCore.Respons ...
随机推荐
- UVA 12293 - Box Game(博弈)
UVA 12293 - Box Game 题目链接 题意:两个盒子,一開始一个盒子有n个球.一个仅仅有1个球,每次把球少的盒子中球消掉,把多的拿一些球给这个盒子.最后不能操作的输(球不能少于1个),A ...
- Oracle 12c RMAN备份文档
创建备份目录,查看剩余空间 [cistest@cistest ~]$ df -h df: '/home/oratest/.gvfs': Permission denied Filesystem Siz ...
- iOS中自动登录的设计
1.//这是登录控制器页面 - (void)viewDidLoad { [super viewDidLoad]; //lt.iSNextAutoLogin是单利中的一个属性,用来保存下次是否自动登录 ...
- apacheh2.4和php5.5集成环境遇到的问题
装了wampserver64位,里面的php是5.5,apache是2.4 1.配置虚拟主机时碰到问题:apache AH01630: client denied by server configur ...
- linux/unix命令参考
- TurboCAD Pro for Mac(二维绘图和三维建模工具)破解版安装
1.软件简介 TurboCAD Pro 是 macOS 系统上一款二维绘图和三维建模工具,具备强大的绘图和设计特性,加上强大的创建复杂的三维模型的工具,三维 OpenGL 的渲染,和超过 11, ...
- EasyUI tab问题记录
1. 关闭当前tab 此代码放在 布局页中,然后所有的页面都可以随时关闭tab了,适当的根据你的项目,更改下js <script> function closetab(subtitle ...
- 12C配置EM Express的https端口
1.启动监听并查看监听信息 $ lsnrctl stat ora12 LSNRCTL for Linux: Version 12.1.0.2.0 - Production on 07-FEB-2017 ...
- ThreadPoolExecutor 线程池浅析
作为Executor框架中最核心的类,ThreadPoolExecutor代表着鼎鼎大名的线程池,它给了我们足够的理由来弄清楚它. 下面我们就通过源码来一步一步弄清楚它. 内部状态 线程有五种状态:新 ...
- C++/C 宏定义(define)中# ## 的含义(转)
http://hi.baidu.com/kiraversace/item/1148ee057147981a4ac4a3e9 C++/C 宏定义(define)中# ## 的含义 define 中的# ...