PWA のインストールを LAN 内で完結させたかった

はじめに

同一 LAN 内の PC に立てた Web サーバーにアクセスして、手元の Android に PWA (Progressive Web Apps) をインストールしたかった。
というのも、

• 社内レギュレーションなどの都合で、Web サーバーをインターネット上に公開したくない
• ソースコードの更新のたびにわざわざデプロイするのが面倒だ

からです。

2019/03/29 追記

Mac/Windows Chrome 73 以降で利用可能な Desktop PWA についても検証してみたところ、下記 1〜7 いずれの方法でもインストール不可（8 の方法ではインストール可）でした。

TL;DR

Android を PC に USB デバッグ接続し、Chrome の Port forwarding 機能で Android から localhost にアクセスすれば十分かも。

検証

PWA として認識される（Service worker が動く）条件に、

• HTTPS または localhost であること

があるらしいので、いろいろ試してみます。

ちなみに、Android から同一 LAN 内の PC に立てた Web サーバーに localhost としてアクセスするには、以下２つの方法があるようです。

• Android の Wi-Fi 設定で、手動でプロキシ（<PC のローカル IP アドレス>:<Web サーバーのポート番号>）を設定し、http://localhost にアクセスする¹
• Android を PC に USB デバッグ接続し、Chrome の Port forwarding 機能で <任意のポート番号> を localhost:<Web サーバーのポート番号> に forward して、http(s)://localhost:<任意のポート番号> にアクセスする²

環境

• Android 8.0.0
• (Android 6.0.1)

結果

|#|接続|信頼する証明書|Web サーバーの指定||結果|
|--:|:--|:--|:--|:--|:-:|:-:|
|1|HTTP|--|PC のローカル IP アドレス||×|
|2|HTTPS|なし|PC のローカル IP アドレス||×|
|3|HTTPS|オレオレ証明書|PC のローカル IP アドレス||△|
|4|HTTP|--|localhost (Proxy)||△|
|5|HTTP|--|localhost (Port forwarding)||○|
|6|HTTPS|なし|localhost (Port forwarding)||○|
|7|HTTPS|オレオレ証明書|localhost (Port forwarding)||○|
|||||||
|8|HTTPS|パブリック証明書|ドメイン（インターネット上にデプロイした通常の運用）||◎||

凡例	ホーム画面に追加時の振る舞い3	実際に追加されるアイコン4	起動するアプリ5	オフライン（Web サーバー停止）時の表示
×	ショートカット	ショートカット	Chrome	表示されない
△	ショートカット	ショートカット	Chrome	再読み込みするまで表示される
○	PWA	ショートカット	PWA6	再読み込みした後も表示される
◎	PWA	PWA	PWA	再読み込みした後も表示される

どうやら信頼されていない Web サーバーへの HTTPS 接続ではダメっぽいですね（当たり前といえば当たり前か）。
オレオレ証明書（自己署名証明書）か否かもしっかり判断しているみたい…？？？？

むすびに

いろいろ検証した結果、（少なくとも自分の実力では）インターネット上にデプロイした PWA と等価なインストールを LAN 内で完結させることができませんでした。
とは言うものの、PWA の特長である“オフラインでも動作する”点を享受するには、上記の「○」、すなわち、

• Android を PC に USB デバッグ接続し、Chrome の Port forwarding 機能で Android から localhost にアクセスする

ので十分かもしれません。

「ここ間違ってるよ」とか「こういう方法もあるよ」という方がいましたら、ぜひコメントにてご指摘ください。

1. How to serve your local development application on local network using localhost domain to enable Service Worker, Push Notifications, etc. ↩

2. Access Local Servers ↩

3. ショートカットだとすぐにアイコンが作成されるが、PWA だとしばらく時間がかかって（キャッシュを保存して？）からアイコンが作成される。 ↩

4. ショートカットには、アイコン右下部に Chrome マークが表示される。Android 6.0.1 だとアイコンに違いは見られない。 ↩

5. タスク一覧でアプリを確認した際に表示される名前。 ↩

6. Android 6.0.1 では Chrome が起動する。 ↩