HTTP経由でサービスワーカーをテストするためのオプション
サービスワーカーをテストしたいのですが、仮想ホストがセットアップされており、localhostでhttpsを有効にできないようです。
ローカル仮想ホストのURLをホワイトリストに登録して、localhostでService Workerを登録しようとするたびにService Workerをテストするにはどうすればよいですか？ Chromeは、Service Workerを有効にするにはhttpsが必要であると言います。少なくともローカルテストについては、どうすればこの制限を回避できますか。
一般に、Service Workerを使用するには、ページとService Workerスクリプトの両方をHTTPS経由で提供する必要があります。理論的根拠は 強力な新機能のためにセキュアオリジンを好む で説明されています。
ローカル開発を促進するためのHTTPS要件には例外があります。http://localhost[:port]またはhttp://127.x.y.z[:port]を介してページおよびサービスワーカースクリプトにアクセスする場合、それ以上のアクションなしでサービスワーカーを有効にする必要があります。
何らかの理由で、localhostまたは127.x.y.z以外のホスト名を使用してローカルWebサーバーにアクセスする必要がある場合、またはをテストする必要がある場合 HTTPSをサポートしていないリモートWebサーバーでは、手動で回避策を使用できます。コマンドラインからChromeを起動し、--user-data-dirフラグと--unsafely-treat-insecure-Origin-as-secureフラグの両方を使用する必要があります。
このバグ には、Chromeの起動方法の 完全な例 など、詳細が含まれています。
Firefox 同様の機能を提供 、devtools.serviceWorkers.testing.enabled設定により。
この機能はonlyであることに注意してくださいサイトの製品バージョン。これらのフラグを有効にする手順を実際のユーザーに依頼しないでください！
プログレッシブWebアプリの実際の動作テストのために、プラグインされたモバイルデバイスのサービスワーカーをデバッグする場合、ssl chrome開始オプションは役に立たず、証明書を購入する必要はありません。
@ chris-ruppelはプロキシソフトウェアのインストールについて言及しましたが、実際にはポート転送を使用する簡単な方法があります：
Chromeを使用してデバイスを接続してデバッグすると仮定します。
- Chrome Dev Toolsで「リモートデバイス」を開き「設定」および「ポート転送」ルールを追加します。
- Localhostセットアップがlocalhost：80で実行されている場合、
- ルールを追加するだけです "Device port 8080"（1024を超える非特権ポートでもかまいません）
- およびローカルアドレス「localhost：80」（またはmytestserver.sometestdomainwithoutssl.company:8181など）
それをした後、あなたのmobileでURL " http：// localhost：808 "を呼び出すことができますdeviceそして、実際のPC /テストサーバー上の「localhost：80」によって応答されます。モバイルで実行されているローカルマシンのように、サービスワーカーと完全に連携します。
モバイルデバイスで非特権ポートを使用することを忘れない限り、複数のポート転送および異なるターゲットドメインでも機能します。スクリーンショットを参照してください： 
この情報のソースは、Googleリモートデバイスのドキュメントです。 https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server （ただし2017年4月現在この簡単な答えを読むのはあまり明確ではありません）
私はしばしば実際のデバイスでデバッグとテストを行いたいです。私が思いついた方法の1つは、ローカル開発中に Charles Proxy を介して電話のネットワークトラフィックをルーティングすることです。すべてのChrome固有のソリューションとは異なり、これは携帯電話のどのブラウザーでも動作します。
- ラップトップでCharlesを実行します（これはService WorkerでWebサイトを提供します）。 Charlesが実行されたら、ステップ2のIP /ポートに注意してください。
- ラップトップをプロキシとして使用するようにモバイルデバイスを構成します。
- Androidの場合は、設定でWiFiをタップアンドホールドする>ネットワークの変更>詳細設定>ProxyManualを使用して、IP /ポートを設定します。
- IOSの場合、（i）アイコン>HTTPプロキシセクションをクリックします。 Manualを選択し、IP /ポートを設定します。
- モバイルデバイスで
localhostにアクセスすると、Service Workerを登録してテストできるようになりました。
ジェフが最初の応答で述べたように、Service Workerをテストするためにlocalhostレベルでhttpsは必要ありません。 HTTPSを使用せずにlocalhostドメインにアクセスする限り、Service Workerは正常に登録および動作します。
Localhostでアプリケーションをテストし、実際にhttpsでどのように機能するかを確認したい場合、最も簡単なアプローチはアプリをGitHubにアップロードすることです。無料でパブリックドメインを作成できます（HTTPSを使用！）。
手順は次のとおりです。 https://pages.github.com/
LocalhostでWebサーバーを実行できないクライアントデバイスでService Workerをテストする場合、一般的な手法は次のとおりです。
- サーバーにホスト名を付けます。
- このホスト名に証明書を与えます。
- この証明書を発行したCAをIPが信頼するようにします。
しかし、これは言うより簡単です。 Redditの2016年11月のAMAで、Let's Encryptの担当者 承認済み は、プライベートLAN上のHTTPSは「非常に難しい質問であり、満足のいく答えをこれまでに出していないと思います。」
コンピューターにホスト名を付ける一般的な方法には、毎日またはインターネットゲートウェイアプライアンスの電源を入れ直すたびに変わるものではなく、安定した内部IPアドレスを与えることが含まれます。特定のプライベートアドレス（通常10/8または192.168/16内）をMACと関連付ける「予約」を設定するには、ネットワーク（通常はゲートウェイ内）にDHCPサーバーを構成する必要があります。開発ワークステーションのイーサネットカードのアドレス。これについては、ゲートウェイのマニュアルをお読みください。
開発ワークステーションのIPアドレスが安定しているため、時間とお金のトレードオフがあります。 DNSおよびOpenSSLの高度な使用法を学習し、テストする予定のすべてのデバイスにルート証明書をインストールする場合：
- ネットワークで内部DNSサーバーを実行します。これは、ゲートウェイまたは開発ワークステーションにあります。
- DNSサーバーを、一部の構成済みTLDに対して権限を持ち、他のTLDに対して再帰的になるように構成します。
- 開発ワークステーションのプライベートIPアドレスに安定した名前を付けます。これにより、内部名が付けられます。
- DHCPサーバーを設定して、このDNSサーバーのアドレスをリースを取得している他のデバイスに提供します。
- 開発ワークステーションで、OpenSSLを使用して プライベート認証局 とWebサーバーのキーペアを生成します。
- OpenSSLを使用して、CAのルート証明書とWebサーバーの内部名の証明書を発行します。
- この証明書を使用して、開発ワークステーションのWebサーバーでHTTPSを構成します。
- すべてのデバイスにCAのルート証明書を信頼できるルート証明書としてインストールします。
- すべてのデバイスで、この内部名にアクセスします。
ルート証明書を追加できない、またはローカルDNSを制御できない場合（他者が所有するデバイス（BYOD）、または主要なものなど、ユーザーが信頼できるルート証明書を追加できないロックダウンされたブラウザーでテストする場合など）ビデオゲーム機の場合、完全修飾ドメイン名（FQDN）が必要です。
- APIでDNSを提供するレジストラ からドメインを購入します。これは、TLD内で直接行うことも、パブリックサフィックスリストに登録した動的DNSプロバイダーのいずれかから行うこともできます。 （非PSLダイナミックDNSプロバイダーは、 Let's Encryptによって課されるレート制限 のために受け入れられません。）
- このドメインのゾーンファイルで、開発ワークステーションのプライベートIPアドレスで
Aレコードをポイントします。これにより、開発ワークステーションにFQDNが付与されます。 dns-01チャレンジをサポートするACMEクライアントである Dehydrated を使用して、Let's Encrypt認証局からこのFQDNの証明書を取得します。- この証明書を使用して、開発ワークステーションのWebサーバーでHTTPSを構成します。
- すべてのデバイスで、この名前にアクセスします。
私の場合、pwaをテストする最も簡単な方法は、ngrokを使用することでした。 https://ngrok.com/download ログインし、urトークンを取得して設定します！
./ngrok http {your server port}を実行するときは、上記のコマンドを実行した後にターミナルに表示されるhttpsを使用していることを確認してください。
https://surge.sh を使用することもできます。これは、静的Webページをホストするためのものです。ここにアクセスすると、 https://surge.sh/help/securing-your- custom-domain-with-ssl は、SSL証明書の設定方法を確認できます