PWA - service worker - Workbox(未完)
2024-09-03 04:05:15
Get Started(开始)
- 只有get请求才能cache缓存吗?
Create and Register a Service Worker File(创建和注册 Service Worker)
- Before we can use Workbox, we need to create a service worker file and register it to our website.(在使用Workbox之前,我们需要创建一个服务工作者文件并将其注册到我们的网站。)
<script>
if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant(使用窗口加载事件保持页面加载性能)
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
- Looking in the “Application” tab in Chrome DevTools you should see your service worker registered.(在chrome devtools中的“application”选项卡中,您应该看到服务工作者已注册。)
- Click the “Update on reload” checkbox to make it easier to develop with your new service worker.(单击 “Update on reload” 复选框,以便与新的 service worker 一起开发。)
Importing Workbox(导入工作框)
- To start using Workbox you just need to import the workbox-sw.js file in your service worker.(要开始使用Workbox,只需在服务工作者中导入Workbox-sw.js文件。)
- Importing workbox-sw.js will create a workbox object inside of your service worker, and that instance is responsible for importing other helper libraries, based on the features you use.(导入workbox-sw.js将在服务工作者内部创建一个workbox对象,该实例负责根据您使用的功能导入其他助手库。)
- Due to restrictions in the service worker specification, these imports need to happen either inside of an install event handler, or synchronously in the top-level code for your service worker.(由于 service worker 规范中的限制,这些导入需要在安装事件处理程序内部或在服务工作者的顶级代码中同步进行。?)
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js'); // 同步的
if (workbox) {
console.log(`Yay! Workbox is loaded
最新文章
- html标准
- 图解集合4:HashMap
- myeclipse下拷贝的项目,tomcat下部署名称和导出为war包的名称默认值修改
- Samba配置
- Git的搭建和使用技巧完整精华版
- Swing中弹出对话框的几种方式(转)
- 快速构建Windows 8风格应用33-构建锁屏提醒
- 仿腾讯微博的一个弹出框 v0.1 beta
- 章节十、2-用Linktext和PartialLinkText、ClassName、TagName定位元素
- Python中星号的本质和使用方式
- No principal was found in the response from the CAS server
- C/C++:.hpp与.h区别
- ACM-彩票
- mybatis下的分页,支持所有的数据库
- SQL Server 数值四舍五入,小数点后保留2位
- 线程池大小设置,CPU的核心数、线程数的关系和区别,同步与堵塞完全是两码事
- 认识k_BackingField,微软自己的序列化和反序列化
- Python 在字符串中处理html 和xml
- 通达信k线颜色设置
- thinkphp5.0URL访问
热门文章