Web Advent Calendar 2025

KDDI株式会社

ブラウザで「Isolated Web Apps」を試す（Direct Sockets API を使うための下準備）【Web：2】

Last updated at 2025-12-04Posted at 2025-12-04

（この記事は Web Advent Calendar 2025 の記事【2つ目】です）

はじめに

この記事は、ブラウザで TCP・UDP の通信を直接扱うことができる API の「Direct Sockets API」を試したくて、その下準備を進めた話です。具体的には、「Isolated Web Apps」を試します。

「Direct Sockets API」について

ブラウザで直接扱えるプロトコルとして「HTTP(S)」「WebSocket」「WebRTC」などがあり、それらは TCP／UDP を使っていますが、ブラウザが TCP・UDP を直接扱うことは基本的にできません。

しかし、制約がつくものの、ブラウザでも直接 TCP・UDP の通信を扱えるブラウザの API があり、それが試したいと思っている「Direct Sockets API」です。

「Isolated Web Apps」の話

上記のとおり、ブラウザで「Direct Sockets API」を使うためには、制約があります。ブラウザで「Direct Sockets API」を使えるようにする方法の 1つとして、今回の記事で扱う以下の「Isolated Web Apps」があります。

●デベロッパー向けの独立したウェブアプリの許可リスト | Isolated Web Apps (IWA) | Chrome for Developers
　https://developer.chrome.com/docs/iwa/allowlist?hl=ja

以下で、「Isolated Web Apps」のちょっとしたお試し用手順を書いていきます。

Isolated Web Apps の開発の手順

Isolated Web Apps の開発手順について、今回はとりあえず少し試せれば良いので、簡易な手順を用います。

手順の概要

詳細はこの後に書いていきますが、ここでいったん開発手順（今回用の簡易なもの）の概要を示します。

開発手順（簡易な手順）
1. 適当なフォルダを準備
2. 上記フォルダ内に HTML・JavaScript のファイルと、マニフェストファイルを準備
3. HTML・JavaScript・マニフェストファイルの内容を実装
4. 上記フォルダを起点に、何らかの方法でローカルサーバーをたてる
5. 上記フォルダで、Chrome を引数付きでコマンドで実行
6. 動作確認

実際のお試し

ここから、手順などの詳細について書いていきます。

テストアプリを用意して Isolated Web Apps として動かす

今回、簡単なテスト用アプリを準備して、 Isolated Web Apps として動かしてみます。

「Isolated Web Apps」を「Direct Sockets API」と組み合わせて試せそうな以下のサンプルもありますが、自分の理解のために Isolated Web Apps を試す環境・コードなどは自前で用意してみます。

●GoogleChromeLabs/telnet-client
　https://github.com/GoogleChromeLabs/telnet-client?tab=readme-ov-file

マニフェストファイルを準備する

上で開発手順の概要を書いていた中で、マニフェストファイルの話を出していました。まずは、そのマニフェストファイルを以下などを参考にしつつ準備します。

【Named and versioned】 Isolated Web Apps | ChromeOS.dev
　https://chromeos.dev/en/web/isolated-web-apps#named-and-versioned

まず上記の情報から、マニフェストファイル・置くべきパスの名前が指定されていることがわかります。今回の自分の手順では、マニフェストファイルは HTML・JavaScript のファイルを置く場所のルート（なおかつ、ローカルサーバーをたてる起点の場所）に対して /.well-known/manifest.webmanifest というパス・ファイル名となるように準備することになるようです。

さらに以下を見てみると、マニフェストファイルで何を記載するか、という話が書いてありそうです。

【Web app manifest】 Isolated Web Apps | ChromeOS.dev
　https://chromeos.dev/en/web/isolated-web-apps#web-app-manifest

今回自分が用意するものは、項目数は上記のサンプルよりちょっとだけ少なめの、以下で進めました。

.well-known/manifest.webmanifest

{
  "name": "My Test IWA",
  "version": "1.0.0",
  "start_url": "/",
  "icons": [
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

上記のマニフェストファイルでは、512x512 の PNG画像を使う指定をしています。とりあえず、適当な画像があれば今回は良いと思ったため、以下のダミー画像作成サービスで https://placehold.co/512x512.png?text=IWA と指定したものを使うことにしました。

●Placehold | A simple, fast and free image placeholder service
　https://placehold.co/

HTML・JavaScript のファイルを準備

次に、アプリが動くかどうかだけを確認するための HTML・JavaScript のファイルを用意します。それぞれ以下のとおりです。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>My Test IWA</title>
  </head>
  <body>
    <h1>My Test IWA</h1>
    <p id="status">ロード中...</p>
    <button id="btn">クリック</button>

    <script type="module" src="/app.js"></script>
  </body>
</html>

app.js

const statusEl = document.getElementById("status");
const btn = document.getElementById("btn");

statusEl.textContent = "IWA 上で動作中";

btn.addEventListener("click", () => {
  alert("IWA からのアラートです");
});

「ボタンを押すとアラートが表示される」というだけのものです。

ローカルサーバーをたてる

ローカルサーバーを何らか用意するところは、自分は VS Code の「Live Server」を使いました。これを使うことで、「 http://127.0.0.1:5500 」でローカルサーバーが立ち上がります。

Chrome を起動オプション付きで実行する

Isolated Web Apps を使えるように、Chrome を起動オプション付きで実行します。合わせて、先ほど用意したローカルサーバーからアプリのインストールも行います。

具体的には、以下を実行します（※ 環境は Mac です）。

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --user-data-dir=/tmp/iwa-profile \
  --enable-features=IsolatedWebApps,IsolatedWebAppDevMode \
  --install-isolated-web-app-from-url=http://127.0.0.1:5500/

上記では、Isolated Web Apps用のオプションに加えて、今回のお試し用のプロファイルを用いる設定を加えています（ --user-data-dir=/tmp/iwa-profile の部分）。

Isolated Web Apps の動作確認

あとは、アプリの動作確認です。

各種確認

アプリを動作させてみる前に、Chrome が意図通りの状態になっているかなどを確認してみます。

最初の状態

先ほどの Chrome関連のコマンドを実行すると、Chrome が立ち上がりつつ、Finder も表示されました。

この時点で Chromeアプリができているようです。

この時、以下のメッセージが出ていますが、今回は意図して行っているので気にしないで進めます。

引数の指定関連

ここで上記手順で指定した引数が、きちんと有効になっているかを確認してみます。

アドレスバーに chrome://version と入力してページを開き、その中で「コマンドライン」という欄を見てみます。該当箇所を見てみると、意図した状態になっているようでした。

アプリ一覧

次にアプリ一覧のページを見てみます。「 chrome://apps/ 」を開くと、以下の部分に今回用意したアプリが表示されていました。

上記のアプリを実行した後の画面が以下です。とりあえず、アプリは問題なく起動しました。

その後、上記のページ内のボタンを押すと、意図通りに以下のアラートが表示されることも確認できました。

とりあえず無事に、Isolated Web Apps を試すことができました。

別途、今回の内容をもとに「Direct Sockets API」も試せればと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up