服务人员-js教程-PHP中文网

服务人员

WBOY

发布： 2024-08-09 07:28:42

原创

1087 人浏览过

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