介绍 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 缓存的更多相关文章

  1. Workbox使用策略

    1.什么是Workbox Strategies? 当service workers 首次被引入时,可以设定一组常见的缓存策略. 缓存策略是一种模式,用于确定service workers 在收到fet ...

  2. 创建一个离线优先,数据驱动的渐进式 Web 应用程序

    原文地址:Build an offline-first, data-driven PWA 译文出自:我的个人博客 概述 在本文中,您将学习如何使用 Workbox 和 IndexedDB 创建离线优先 ...

  3. 重识 PWA 进阶到 workbox3

    看到PWA,似曾相识,但又感觉很模糊,于是乎,又重新翻阅文档,学习了一遍,顺便把相关知识学习了一下,比如service worker,workbox3. PWA 概念: 全称:Progressive ...

  4. ionic3 懒加载在微信上缓存的问题

    1.懒加载是什么? 在ionic2中所有的组件.模块.服务.管道等都堆积在app.module.ts模块中,在页面初始化的时候会一次性加载所有的资源,导致资源过大,页面渲染缓慢,也导致app.modu ...

  5. PWA - service worker - Workbox(未完)

    Get Started(开始) 只有get请求才能cache缓存吗? Create and Register a Service Worker File(创建和注册 Service Worker) B ...

  6. Service worker (@nuxtjs/workbox) 采坑记

    PWA(Progressive Web App)是前端的大趋势,它能极大的加快前端页面的加载速度,得到近乎原生 app 的展示效果(其实难说).PWA 其实是多种前端技术的组合,其中最重要的一个技术就 ...

  7. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  8. 哪种缓存效果高?开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  9. ASP.NET Core 中间件之压缩、缓存

    前言 今天给大家介绍一下在 ASP.NET Core 日常开发中用的比较多的两个中间件,它们都是出自于微软的 ASP.NET 团队,他们分别是 Microsoft.AspNetCore.Respons ...

随机推荐

  1. UVA 12293 - Box Game(博弈)

    UVA 12293 - Box Game 题目链接 题意:两个盒子,一開始一个盒子有n个球.一个仅仅有1个球,每次把球少的盒子中球消掉,把多的拿一些球给这个盒子.最后不能操作的输(球不能少于1个),A ...

  2. Oracle 12c RMAN备份文档

    创建备份目录,查看剩余空间 [cistest@cistest ~]$ df -h df: '/home/oratest/.gvfs': Permission denied Filesystem Siz ...

  3. iOS中自动登录的设计

    1.//这是登录控制器页面 - (void)viewDidLoad { [super viewDidLoad]; //lt.iSNextAutoLogin是单利中的一个属性,用来保存下次是否自动登录 ...

  4. apacheh2.4和php5.5集成环境遇到的问题

    装了wampserver64位,里面的php是5.5,apache是2.4 1.配置虚拟主机时碰到问题:apache AH01630: client denied by server configur ...

  5. linux/unix命令参考

  6. TurboCAD Pro for Mac(二维绘图和三维建模工具)破解版安装

    1.软件简介    TurboCAD Pro 是 macOS 系统上一款二维绘图和三维建模工具,具备强大的绘图和设计特性,加上强大的创建复杂的三维模型的工具,三维 OpenGL 的渲染,和超过 11, ...

  7. EasyUI tab问题记录

    1.  关闭当前tab 此代码放在  布局页中,然后所有的页面都可以随时关闭tab了,适当的根据你的项目,更改下js <script> function closetab(subtitle ...

  8. 12C配置EM Express的https端口

    1.启动监听并查看监听信息 $ lsnrctl stat ora12 LSNRCTL for Linux: Version 12.1.0.2.0 - Production on 07-FEB-2017 ...

  9. ThreadPoolExecutor 线程池浅析

    作为Executor框架中最核心的类,ThreadPoolExecutor代表着鼎鼎大名的线程池,它给了我们足够的理由来弄清楚它. 下面我们就通过源码来一步一步弄清楚它. 内部状态 线程有五种状态:新 ...

  10. C++/C 宏定义(define)中# ## 的含义(转)

    http://hi.baidu.com/kiraversace/item/1148ee057147981a4ac4a3e9 C++/C 宏定义(define)中# ## 的含义 define 中的#  ...