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

ServiceWorker と Worker Threads を使用してブラウザで PHP アプリを実行する

大まかに言うと、WordPress Playground は Web ブラウザー内で次のように動作します。

  • playground.wordpress.net の index.html ファイルは、<iframe src="/remote.html"> を介して remote.html ファイルを読み込みます。
  • remote.html は Worker スレッドと Service Worker を起動し、ダウンロードの進捗情報を返します。
  • Worker スレッドは PHP を起動し、SQLite で動作するようにパッチされた WordPress をファイルシステムに設定します。
  • Service Worker はすべての HTTP リクエストを傍受し、Worker スレッドに転送し始めます。
  • remote.html は <iframe src="/index.php"> を作成し、Service Worker は index.php のリクエストを Worker スレッドに転送し、そこで WordPress のホームページがレンダリングされます。

視覚的には次のようになります。

Architecture overview

高レベルのアイデア​

@php-wasm/web は、次のアイデアに基づいて構築されています。

  • ブラウザタブがすべてをオーケストレーション – ブラウザタブがメインプログラムです。タブを閉じたりリロードしたりすると、実行環境全体が破壊されます。
  • iframeベースのレンダリング – PHPサーバーが生成するすべてのレスポンスはiframeでレンダリングする必要があります。これにより、ユーザーがリンクをクリックしてもブラウザタブがリロードされるのを防ぎます。
  • PHP ワーカースレッド – PHPサーバーは処理が遅いため、Webワーカーで実行する必要があります。そうしないと、リクエスト処理中にウェブサイトのUIがフリーズしてしまいます。
  • サービス ワーカー ルーティング – iframe内で発生するすべてのHTTPリクエストはService Workerによって傍受され、レンダリングのためにPHPワーカーに渡されます。