サービスワーカー-jsチュートリアル-php.cn

サービスワーカー

WBOY

リリース： 2024-08-09 07:28:42

オリジナル

1105 人が閲覧しました

Service Worker は、ブラウザ、アプリケーション、インターネット間で「特定の」目的に使用できる Web API です。

Service Workers

Service Worker は、ブラウザのメインスレッドとは別に、Web アプリケーションのバックグラウンドで実行されるスクリプトです。これらにより、プッシュ通知、バックグラウンド同期、オフライン機能が可能になります。 Service Worker は、Web アプリケーション、ブラウザー、ネットワークの間の仲介者として機能します。 Service Worker をいつどのように使用できるかの例を次に示します。

1. オフラインサポート:

ユーザーが初めて Web サイトにアクセスしたときに、Service Worker は重要なリソース (HTML、CSS、JavaScript、画像) をキャッシュします。
次回のアクセス時にキャッシュから取得できるため、継続的なオフライン機能が提供されます。

2. プッシュ通知:

Service Worker を使用すると、Web アプリケーションが開いていない場合でもプッシュ通知を配信できます。
通知は、外部イベントまたはサーバーの更新によってトリガーできます。

3. バックグラウンド同期:

Service Worker はバックグラウンド同期を有効にし、アプリケーションがバックグラウンドでデータを更新したり、新しいコンテンツを取得したりできるようにします。
これは、リアルタイムのデータ更新に役立ちます。

4. 動的コンテンツキャッシュ:

Service Worker は、Web ページ上のユーザーの行動に基づいてコンテンツを動的にキャッシュできます。
これにより、頻繁にアクセスされるコンテンツを迅速に配信できます。

5. パフォーマンスの最適化:

Service Worker は、アセットとリソースを事前にキャッシュすることで、Web ページのパフォーマンスを大幅に向上させます。
読み込みプロセスを最適化することで、ユーザーの行動に基づいてリソースを選択的に読み込むことができます。

6. バックグラウンドフェッチ:

Service Worker はバックグラウンド読み込みを有効にし、大きなファイルやリソースでもダウンロードできるようにします。

通常、Web ページにアクセスすると、Web ページはサーバーにリクエストを送信し、サーバーはデータをユーザーに送り返します。

Service Workers

Service Worker を登録している場合、Web ブラウザとサーバー間のミドルウェアとして追加されます。

Service Workers

サーバーへのリクエストを停止し、リクエストがサーバーに送信されるかオフラインで動作するかを決定します。この場合、「404 Not Found」ページが表示される代わりに、ページ全体をオフラインで表示できるようになります。 Service Worker を使用してカスタムのオフラインページを作成することもできます。

通常、コンピュータにインターネットが接続されていない場合は、エラーページが表示されます。

インターネットがない場合でも、サービスワーカーがWebページにアクセスします。

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