服务人员

WBOY原创: 2024-08-09 07:28:421070浏览

Service Worker 是可用于浏览器、应用程序和 Internet 之间“特定”目的的 Web API。

Service Workers

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 Workers

如果您注册了 Service Worker，它将被添加为网络浏览器和服务器之间的中间件：

Service Workers

它停止对服务器的请求，并决定是否将请求发送到服务器或离线工作。在这种情况下，您将能够离线查看整个页面，而不是显示 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 Workers

当我们进入缓存存储部分时，我们将得到我们用我们给定的名称标记的文件。

Service Workers

看完这些，我们可以看到结果：

如您所见，它现在可以离线使用。在离线状态下，Service Worker 会从它在缓存存储中为我们打开的位置获取它。

@abdulakhatov-dev
@AbdulakhatovDev

以上是服务人员的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html Error register Event Thread JS background

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Why TypeScript is Better Than JavaScript: Top Benefits for Modern Web Development下一篇：React - Server Actions

查看更多