服务人员
Aug 09, 2024 am 07:28 AMService Worker 是可用于浏览器、应用程序和 Internet 之间“特定”目的的 Web API。
Service Worker 是在 Web 应用程序后台运行的脚本,与主浏览器线程分开。它们支持推送通知、后台同步和离线功能。 Service Worker 充当 Web 应用程序、浏览器和网络之间的中介。以下是如何以及何时使用 Service Worker 的示例:
1. 离线支持:
- 当用户首次访问网站时,Service Worker 会缓存重要资源(HTML、CSS、JavaScript、图像)。
- 下次访问时可以从缓存中检索,提供持续离线功能。
2. 推送通知:
- 即使 Web 应用程序未打开,Service Worker 也允许您发送推送通知。
- 通知可以由外部事件或服务器更新触发。
3.后台同步:
- 服务工作人员启用后台同步,这允许应用程序在后台更新数据或获取新内容。
- 这对于实时数据更新很有用。
4.动态内容缓存:
- Service Worker 可以根据网页上的用户行为动态缓存内容。
- 这有助于快速提供经常访问的内容。
5、性能优化:
- 通过预先缓存资产和资源,Service Workers 显着提高了网页性能。
- 他们可以通过优化加载过程,根据用户行为选择性地加载资源。
6.后台获取:
- Service Worker 启用后台加载,甚至允许下载大型文件或资源。
通常,当您访问网页时,网页会向服务器发送请求,服务器将数据发送回给您:
如果您注册了 Service Worker,它将被添加为网络浏览器和服务器之间的中间件:
它停止对服务器的请求,并决定是否将请求发送到服务器或离线工作。在这种情况下,您将能够离线查看整个页面,而不是显示 404 Not Found 页面。您还可以使用 Service Worker 创建自定义离线页面。
通常,如果您的计算机上没有互联网,它会向您显示错误页面。
即使没有互联网,我们也会通过 Service Worker 访问网页。
Service Worker 生命周期和事件
注册→安装→激活→获取
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Home</title> <!-- Scripts --> <script src="main.js" defer></script> </head> <body> <!-- istalgan kodlaringizni yozishingiz mumkin... --> </body> </html>
登录后复制
我们将 main.js 文件连接到 html。
main.js
// service worker browser tomonidan support qilinishini tekshirib olamiz if ('serviceWorker' in navigator) { // web sahifa browserga yuklanishi bilan ishlashini aytib o'tamiz window.addEventListener('load', () => { // 1. service workerni registratsiyadan o'tkazamiz. navigator.serviceWorker .register('sw.js') // bizda sm.js file ochib olishimiz kerak bo'ladi. va bu yerdagi register ushani target qiladi. .then((registration) => console.log('Service Worker registered with scope:', registration.scope) ) .catch((error) => { console.error('Service Worker registration failed:', error); }); }); }
登录后复制
sw.js
// browser kashda qanday nom nilan saqlanishini bildirish uchun nom beramiz const cacheName = 'my-cache-v1'; // Qaysi fayllarni kashlashini aytib o'tib ketamiz const cacheFiles = ['index.html', 'posts.html', 'css/style.css', 'js/main.js']; // 2. INSTALL qilamiz self.addEventListener('install', (event) => { event.waitUntil( // kashdan biz bergan nom bilan joy ochadi va bizni fayllarimizni joylaydi. caches.open(cacheName).then((cache) => cache.addAll(cacheFiles)) ); }); // 3. ACTIVATE qilish self.addEventListener('activate', () => { console.log('Server worker activated'); }); // 4. FETCH, ya'ni oflayn holatimizda kashlangan fillarni ko'rsatish uchun olish self.addEventListener('fetch', (event) => { event.respondWith( caches .match(event.request) .then((response) => response || fetch(event.request)) ); });
登录后复制
执行此操作后,如果我们转到浏览器的开发工具部分中的应用程序列并查看服务工作人员部分,我们可以看到激活已发生。
当我们进入缓存存储部分时,我们将得到我们用我们给定的名称标记的文件。
看完这些,我们可以看到结果:
如您所见,它现在可以离线使用。在离线状态下,Service Worker 会从它在缓存存储中为我们打开的位置获取它。
@abdulakhatov-dev
@AbdulakhatovDev
以上是服务人员的详细内容。更多信息请关注PHP中文网其他相关文章!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章
击败分裂小说需要多长时间?
3 周前
By DDD
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前
By 尊渡假赌尊渡假赌尊渡假赌

热门文章
击败分裂小说需要多长时间?
3 周前
By DDD
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前
By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)