服務人員

WBOY原創: 2024-08-09 07:28:421101瀏覽

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

上一篇：為什麼 TypeScript 比 JavaScript 更好：現代 Web 開發的主要優勢下一篇：為什麼 TypeScript 比 JavaScript 更好：現代 Web 開發的主要優勢

看更多