Service Worker をテストしたいのですが、仮想ホストをセットアップしていて、localhost で https を有効にできないようです。
ローカルホストで Service Worker に登録しようとするたびに Service Worker をテストするために、ローカル仮想ホストの URL をホワイトリストに登録するにはどうすればよいですか? Chrome によると、Service Worker を有効にするには https が必要です。少なくともローカル テストでは、どうすればこの制限を回避できますか。
一般に、サービス ワーカーを使用するには、ページとサービス ワーカー スクリプトの両方を HTTPS 経由で提供する必要があります。根拠は、Prefer Secure Origins For Powerful New Featuresで説明されています。
ローカルでの開発を容易にするための HTTPS 要件には例外があります。http://localhost[:port]、または を介してページと Service Worker スクリプトにアクセスする場合はhttp://127.x.y.z[:port]、それ以上の操作を行わずに Service Worker を有効にする必要があります。
Chrome の最近のバージョンでは、この回答で説明されているようにchrome://flags/#unsafely-treat-insecure-origin-as-secure、ローカル開発中にこの要件を回避できます。
Firefoxは、設定を介して同様の機能を提供しますdevtools.serviceWorkers.testing.enabled。
この機能は、他の方法では実行できないテストを容易にすることのみを目的としており、サイトの本番バージョンを提供するときは常に HTTPS の使用を計画する必要があることに注意してください。これらのフラグを有効にする手順を実際のユーザーに求めないでください。
実際のデバイスでデバッグしてテストしたいことがよくあります。私が思いついた方法の 1 つは、ローカル開発中に電話のネットワーク トラフィックをCharles Proxy経由でルーティングすることです。すべての Chrome 固有のソリューションとは異なり、これは携帯電話のどのブラウザーでも機能します。
localhostモバイル デバイスでアクセスすると、Service Worker を登録してテストできるようになりました。私は ngrok を使用して、ローカル IP (Google Colab にあるため、実際にはそうではありません) をパブリック IP にトンネリングしました。
ngrok コンソールに移動すると、作成されたすべてのトンネルが表示されます。localhost:port 用のトンネルを 1 つだけ作成しましたが、ここには 2 つあり、1 つは HTTP 用で、もう 1 つは HTTPS 用です (いいですね?)。
Web アプリの https アドレスにアクセスすると、コンソールに
しかし、httpアドレスにアクセスすると、コンソールに表示されます
Q:トンネルを介してリモート マシンへの HTTP を必要とする Service Worker と連携できますか?
A:どうやらそうです！
その登録の背後にあるコードは次のとおりです (失敗した場所を知ることが重要です)。
// Here we register the SERVICE WORKER
IndexController.prototype._registerServiceWorker = function() {
console.log("1.Starting SW function.");
if (!navigator.serviceWorker) {
console.log("2.Browser is NOT compatible with SW or something is not working.");
return; }
console.log("2.Browser is compatible with SW.");
navigator.serviceWorker.register('/sw.js').then(function() {
console.log('3.Registration worked!');
}).catch(function() {
console.log('3.Registration failed!');
});
};
さらに複雑にするために、Service Workers を使用する私の Web アプリは Colab ( Google Colab ) 内で実行されています。Web アプリは、Colab 内の Node.js で実行されています。
localhost から作業している場合は、(理論によれば) localhost への接続時に https 要件が適用されないため、より簡単になるはずです。[A] と[B]
ローカルホストで実行されているという理由だけで、ブラウザーがアプリに適しているというわけではありません。
注：上記の私の実験..
私が得たhttps Webアプリに行く：
IndexController.js:49 Mixed Content: The page at 'https://0a4e1e0095b0.ngrok.io/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://0a4e1e0095b0.ngrok.io/updates?since=1602934673264&'. This request has been blocked; this endpoint must be available over WSS.
IndexController._openSocket @ IndexController.js:49
IndexController @ IndexController.js:10
(anonymous) @ index.js:16
loadScripts @ loadScripts.js:5
46.../utils/loadScripts @ index.js:15
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous) @ _prelude.js:1
IndexController.js:49 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
at IndexController._openSocket (https://0a4e1e0095b0.ngrok.io/js/main.js:2251:12)
私が得たhttp Webアプリに行く：
Navigated to http://0a4e1e0095b0.ngrok.io/
IndexController.js:17 1.Starting SW function.
IndexController.js:19 2.Browser is NOT compatible with SW or something is not working.
localhost 上になく、https を使用できない場合は、ブラウザーでこれらの設定を変更する必要がある場合があります。
すでに説明した人もいますが、ここでもう一度。
クロム：
これにより、すべてのChrome ウィンドウが再起動されることに注意してください。トンネルが作成されるたびに名前が変更され、毎回多数のウィンドウを再起動できないため、これは私にとっては解決策ではありません。
ファイアフォックス / ウォーターフォックス
Firefox/Waterfox おそらく以下の変更を行う必要はありませんが、私は変更しました (私のブラウザは少し古いかもしれません)。詳細はこちら。
about:config で
有効にしました
dom.serviceWorkers.testing.enabled
dom.serviceWorkers.enabled
このhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workersおよび同じサイトの関連ページを参照することを強くお勧めします。
ngrok のセットアップに興味がある場合は、非常に簡単です (python バージョン)。
# Install pyngrok python package on your Google Colab Session
!pip install pyngrok
# Set up your ngrok Authtoken (requires free registration)
!ngrok authtoken YOUR_TOKEN_HERE
# Invoke ngrok from Python and start tunneling/connecting
from pyngrok import ngrok
# Open a HTTP tunnel on the default port 80 if not specified
ngrok_tunnel = ngrok.connect('8888')
# You can print it, or go to the ngrok console on https://dashboard.ngrok.com/status/tunnels
print (ngrok_tunnel.public_url)
localhost で Web サーバーを実行できないクライアント デバイスで Service Worker をテストする場合、一般的な手法は次のとおりです。
しかし、これは言うは易く行うは難しです。2016 年 11 月の Reddit の AMA で、Let's Encrypt の代表者は、プライベート LAN での HTTPS は「非常に難しい質問であり、これまでのところ誰も満足のいく答えを見つけていないと思います」と認めました。
コンピュータにホスト名を付ける一般的な方法は、インターネット ゲートウェイ アプライアンスの電源を入れ直すたびに、または毎日変更されるものではなく、安定した内部 IP アドレスをコンピュータに与えることです。10/8ネットワーク (通常はゲートウェイ) で DHCP サーバーを構成して、特定のプライベート アドレス (通常はまたは内192.168/16) を開発ワークステーションのイーサネット カードの MAC アドレスに関連付ける「予約」を設定する必要があります。これについては、ゲートウェイのマニュアルをお読みください。
開発用ワークステーションに安定した IP アドレスが割り当てられたので、時間とお金のトレードオフがあります。高度な DNS と OpenSSL の使用法を学び、テストする予定のすべてのデバイスにルート証明書をインストールする場合:
ルート証明書を追加したり、ローカル DNS を制御したりできない場合。たとえば、他人が所有するデバイス (BYOD) でテストする予定がある場合や、ユーザーが信頼できるルート証明書を追加することを許可しない、よりロックダウンされたブラウザーを使用してテストする予定がある場合などです。ビデオ ゲーム コンソールの場合は、完全修飾ドメイン名 (FQDN) が必要です。
Aで、開発ワークステーションのプライベート IP アドレスのレコードをポイントします。これにより、開発ワークステーションに FQDN が与えられます。dns-01して、Let's Encrypt 認証局からこの FQDN の証明書を取得します。