ホームページ >ウェブフロントエンド >jsチュートリアル >サービスワーカー
サービスワーカー
- WBOYオリジナル
- 2024-08-09 07:28:421106ブラウズ
Service Worker は、ブラウザ、アプリケーション、インターネット間で「特定の」目的に使用できる Web API です。
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 Worker を登録している場合、Web ブラウザとサーバー間のミドルウェアとして追加されます。
サーバーへのリクエストを停止し、リクエストがサーバーに送信されるかオフラインで動作するかを決定します。この場合、「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 Worker はキャッシュ ストレージ内で開いた場所からデータを取得します。
@abdulakhatov-dev
@AbdulakhatovDev
以上がサービスワーカーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。