LoginSignup
13
11

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-16

はじめに

同一 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 としてアクセスするには、以下2つの方法があるようです。

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

環境

  • 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 が起動する。 

13
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
11