メインコンテンツへスキップ

サービスワーカー

サービスワーカー は、ブラウザー内の PHPRequestHandler を使用して HTTP トラフィックを処理するために使用されます。

PHP スクリプトが次のページを iframe ビューポート にレンダリングするとします。

<html>
	<head>
		<title>ジョンのウェブサイト</title>
	</head>
	<body>
		<a href="/">ホーム</a>
		<a href="/blog">ブログ</a>
		<a href="/contact">お問い合わせ</a>
	</body>
</html>

ユーザーが例えば「Blog」リンクをクリックすると、ブラウザは通常、リモートサーバーに HTTP リクエストを送信し、「/blog」ページを取得して、現在の iframe コンテンツの代わりに表示します。しかし、私たちのアプリはリモートサーバー上で実行されていません。ブラウザは 404 ページを表示するだけです。

サービスワーカー を使用します。これは、HTTP リクエストをインターセプトしてブラウザ内で処理するツールです。

Service worker data flow

サービスワーカーのセットアップ​

/index.html にあるメインアプリケーションは、サービスワーカーの登録を担当します。

最小限の設定は次のとおりです。

/app.js:

import { registerServiceWorker } from '@php-wasm/web';

function main() {
	await registerServiceWorker(
		phpClient,
		"default", // PHPインスタンススコープ
		"/sw.js",  // 有効な Service Worker 実装を指定する必要があります。
		"1"        // スクリプトの再読み込みに使用されるService Workerのバージョン。
	);

}

また、HTTP リクエストを実際にインターセプトしてルーティングする /service-worker.js ファイルも別途必要です。最小限の実装は次のようになります。

/service-worker.js:

import { initializeServiceWorker } from '@php-wasm/web';

// 現在のドメイン上のすべての HTTP トラフィックをインターセプトし、
// ワーカー スレッドに渡します。
initializeServiceWorker();