サービスワーカーから始めます

サービスワーカー：オフラインのWebアプリおよびそれ以降

この記事では、サービスワーカー、プッシュ通知などの機能を有効にするバックグラウンドスクリプト、およびネットワークリクエストを傍受してオフライン機能を有効にするバックグラウンドスクリプトを調査します。 登録、キャッシュ、更新、およびデバッグテクニックをカバーします

重要な概念：

バックグラウンド操作：
• サービスワーカーは、サイトが閉じている場合でも、Webページとは独立して運営されています。 彼らは。を介してページと通信します postMessage
安全な起源：
• サービスワーカーには、セキュリティ上の理由でHTTPS（または）が必要です。 複数の登録は、ブラウザによって自動的に処理されます。 （検査の場合）。 localhostchrome://serviceworker-internalsイベントの取り扱い：
彼らは
• 、、などのイベントに応答し、キャッシュとネットワークの要求を制御できるようにします。 installactivateキャッシング：fetchサービスワーカーキャッシュWebページコンポーネントをキャッシュし、その後の訪問でオフラインアクセスを可能にします。
• デバッグ：デバッグは実験機能です（Chrome Devtoolsで有効になります）。 手動の非登録は、。
で可能です
• 始めましょう：登録chrome://serviceworker-internals/

サービスワーカーの登録には、ブラウザのサポートをチェックし、

を使用する必要があります。 パラメーターは、ワーカーが制御するURLパスを定義します。

navigator.serviceWorker.register() scope

インストールとアクティベーション：

<code class="language-javascript">if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './about'})
        .then(registration => console.log(registration))
        .catch(e => console.error(e));
} else {
    console.log('Service Worker not supported.');
}</code>

イベントは、最初の出会いでトリガーされます。

がコントロールを取る労働者を意味します。 サービスワーカー内でのロギングには、devtoolsでのデバッグを有効にする必要があることに注意してください。

ネットワークリクエストの傍受：

install activate

イベントでは、リクエストを傍受できます。 キャッシュされたコンテンツまたはフォワードリクエストをサーバーに提供できます。

<code class="language-javascript">self.addEventListener('install', event => console.log(event));
self.addEventListener('activate', event => console.log(event));</code>

外部スクリプトをロードします（例：より広い互換性のためにキャッシュポリフィル）

キャッシュの更新：

fetchキャッシュを更新するには、importScripts()を増やす必要があります。 新しいサービスワーカーは、すべての制御されたページが閉じるまでアクティブになる前に待機し、

イベントで古いキャッシュバージョンをクリーンアップします。

<code class="language-javascript">importScripts('js/cache-polyfill.js');
const CACHE_VERSION = 'app-v1';
const CACHE_FILES = [ '/', 'images/background.jpeg', 'js/app.js', 'css/styles.css', 'https://fonts.googleapis.com/css?family=Roboto:100' ];

self.addEventListener('install', event => {
    event.waitUntil(caches.open(CACHE_VERSION).then(cache => cache.addAll(CACHE_FILES)));
});

self.addEventListener('fetch', event => {
    event.respondWith(caches.match(event.request).then(res => res || requestBackend(event)));
});

function requestBackend(event) {
    const url = event.request.clone();
    return fetch(url).then(res => {
        if (!res || res.status !== 200 || res.type !== 'basic') return res;
        const response = res.clone();
        caches.open(CACHE_VERSION).then(cache => cache.put(event.request, response));
        return res;
    });
}</code>

デバッグ：CACHE_VERSION activate

Chrome Devtoolsでのサービスワーカーのデバッグ（フラグ、実験）を有効にします。 リソースパネルには登録労働者が表示され、手動の登録解除が可能です

よくある質問：

このセクションには、サービスワーカーに関する一般的な質問への回答、Webワーカーの違い、テスト戦略、HTTPリクエスト処理、更新メカニズム、リアルタイムデータの適合性、デバッグメソッド、API互換性、セキュリティの側面、ブラウザーサポート、および登録の解決が含まれます手順。

この改訂された出力は、元の画像の場所とフォーマットを維持し、一方、テキストを大幅に言い換えて、明確さと流れを改善し、直接的な盗作を回避します。 重要な情報は同じままです。

以上がサービスワーカーから始めますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。