スコープ

スコープを使用すると、2 つの異なるブラウザ タブでアプリを開いたときにアプリが動作し続けます。

サービスワーカーは、インターセプトした HTTP リクエストをレンダリングのために PHPRequestHandler に渡します。技術的には、BroadcastChannel を介してメッセージを送信し、アプリケーションが開いているすべてのブラウザタブに配信されます。これは望ましくない動作であり、処理速度が遅く、予期しない動作につながります。

残念ながら、サービスワーカーは関連するワーカースレッドと直接通信できません。詳細については、PR #31 および issue #9 を参照してください。

スコープにより、各ブラウザ タブで次の操作が可能になります。

• 送信 HTTP リクエストに固有のタブ ID を付与する
• 異なる ID を持つ「 BroadcastChannel 」メッセージを無視する

技術的には、スコープとは PHPRequestHandler.absoluteUrl に含まれる文字列です。例えば、次のようになります。

• スコープなしアプリでは、/index.php は http://localhost:8778/wp-login.php で利用できます。
• スコープ付きアプリでは、/index.php は http://localhost:8778/scope:96253/wp-login.php で利用できます。

サービス ワーカーはこの概念を認識しており、リクエスト URL にある /scope: を関連する BroadcastChannel 通信に添付します。

スコープ付きの absoluteUrl で開始されたワーカー スレッドは、スコープ付き であると言われます。

import {
	PHP,
	setURLScope,
	exposeAPI,
	parseWorkerStartupOptions,
} from '@php-wasm/web';

// absoluteURL を直接使用しないでください:
const absoluteURL = 'http://127.0.0.1'

// 代わりに、最初にスコープを設定します。
const scope = Math.random().toFixed(16)
const scopedURL = setURLScope(absoluteURL, scope).toString()

const { phpVersion } = parseWorkerStartupOptions<{ phpVersion?: string }>();
const php = await PHP.load('8.0', {
	requestHandler: {
		documentRoot: '/',
		absoluteUrl: scopedSiteUrl
	}
});

// API を app.ts に公開します。
const [setApiReady, ] = exposeAPI( php );
setApiReady();