HTTP経由でService Workerをテストするためのオプション

Service Workerをテストしたいのですが、仮想ホストがセットアップされていて、localhostでhttpsを有効にできないようです。

ローカルホストでService Workerを登録しようとするたびに、Service Virtual Workerをテストするためにローカル仮想ホストのURLをホワイトリストに登録するにはどうすればよいですか？Chromeでは、Service Workerを有効にするにはhttpsが必要であると述べています。どうすれば、少なくともローカルテストでこの制限を回避できますか。

一般に、Service Workerを使用するには、HTTPSを介してページとService Workerスクリプトの両方を提供する必要があります。理論的根拠は、強力な新機能のために安全なオリジンを優先するで説明されています。

ローカル開発を容易にするために設けられている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の使用を計画する必要があります。実際のユーザーにこれらのフラグを有効にする手順を実行するよう依頼しないでください。

プログレッシブウェブアプリの実際の動作テストのために、プラグインされたモバイルデバイスのサービスワーカーをデバッグする場合、ssl chromeの起動オプションは役に立たず、証明書を購入する必要はありません。

@ chris-ruppelはプロキシソフトウェアのインストールについて述べましたが、実際にはポート転送を使用する簡単な方法があります。

Chromeを使用してデバイスに接続してデバッグすると仮定します。

• ではクローム開発ツール「リモートデバイス」オープン「設定」と追加「ポート転送」ルールを。
• localhostセットアップがlocalhost：80で実行されている場合、
• 「デバイスポート8080」というルールを追加するだけです（1024以上の特権のないポートを使用できます）。
• およびローカルアドレス "localhost：80"（またはmytestserver.sometestdomainwithoutssl.company:8181など）

その後、モバイルデバイスでURL " http：// localhost：8080 "を呼び出すと、実際のPC /テストサーバーの "localhost：80"が応答します。モバイルで実行されているローカルマシンのように、Service Workerと完全に連携します。

モバイルデバイスで非特権ポートを使用することを覚えている限り、複数のポート転送と異なるターゲットドメインでも機能します。スクリーンショットを見る：

この情報のソースは、Googleリモートデバイスのドキュメントです：https : //developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server （2017年4月の時点では、これを読むのはあまり明確ではありませんそれから簡単な答え）

実際のデバイスでデバッグおよびテストしたいことがよくあります。私が思いついた1つの方法は、ローカル開発中にCharles Proxyを介して電話のネットワークトラフィックをルーティングすることです。すべてのChrome固有のソリューションとは異なり、これは携帯電話のどのブラウザでも機能します。

1. 私のラップトップでチャールズを実行します（サービスワーカーと一緒に私のウェブサイトにもサービスを提供します）。Charlesが実行されたら、ステップ2のIP /ポートをメモします。
2. ラップトップをプロキシとして使用するようにモバイルデバイスを構成します。
   • Androidの場合は、[設定] > [ネットワークの変更] > [ 詳細設定] > [ プロキシ]で WiFiを押し続けます。使用マニュアル IP /ポートを設定します。
   • iOSの場合は、（i）アイコン> [ HTTPプロキシ]セクションをクリックします。[ 手動]を選択し、IP /ポートを設定します。
3. 訪問localhost私のモバイルデバイス上で今サービス労働者が登録してテストすることができます。

私の場合、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証明書の設定方法を見る

Jeffが最初の応答で述べたように、Service Workersをテストするためにローカルホストレベルでhttpsは必要ありません。サービスワーカーは、ローカルホストドメインにアクセスする限り、HTTPSなしで登録して正常に動作します。

ローカルホストでアプリケーションをテストし、実際にhttpsでどのように機能するかを確認したい場合、最も簡単な方法は、アプリをGitHubにアップロードすることです。パブリックドメインを無料で（そしてHTTPSで！）作成できます。

手順は次のとおりです。https：//pages.github.com/

localhostでWebサーバーを実行できないクライアントデバイスでService Workerをテストする場合、一般的な手法は次のとおりです。

1. サーバーにホスト名を付けます。
2. このホスト名に証明書を与えます。
3. この証明書を発行したCAをIPに信頼させる。

しかし、これは言うより簡単です。Redditの2016年11月のAMAで、Let's Encryptの担当者は、プライベートLANでのHTTPSは「本当に難しい質問であり、今のところ誰も満足できる答えを出していないと思います」と認めました。

コンピュータにホスト名を与える一般的な方法には、毎日またはインターネットゲートウェイアプライアンスの電源を入れ直すたびに変わるアドレスではなく、安定した内部IPアドレスを与えることです。特定のプライベートアドレス（通常は10/8または内192.168/16）を開発ワークステーションのイーサネットカードのMACアドレスに関連付ける「予約」を設定するには、ネットワーク（通常はゲートウェイ）のDHCPサーバーを構成する必要があります。これについては、ゲートウェイのマニュアルを読んでください。

開発ワークステーションに安定したIPアドレスが割り当てられたので、時間とお金のトレードオフがあります。DNSとOpenSSLの高度な使用法を学び、テストする予定のすべてのデバイスにルート証明書をインストールする場合：

1. ネットワークで内部DNSサーバーを実行します。これは、ゲートウェイまたは開発ワークステーションにある可能性があります。
2. 作成された一部のTLDに対して権限を持ち、他のTLDに対して再帰的になるようにDNSサーバーを構成します。
3. 開発ワークステーションのプライベートIPアドレスに安定した名前を付けます。これにより、内部名が付けられます。
4. DHCPサーバーを構成して、このDNSサーバーのアドレスを、リースを取得する他のデバイスに提供します。
5. 開発ワークステーションで、OpenSSLを使用して、プライベート認証局とWebサーバーのキーペアを生成します。
6. OpenSSLを使用して、CAのルート証明書とWebサーバーの内部名の証明書を発行します。
7. この証明書を使用して、開発ワークステーションのWebサーバーでHTTPSを構成します。
8. CAのルート証明書を信頼できるルート証明書としてすべてのデバイスにインストールします。
9. すべてのデバイスで、この内部名にアクセスします。

ルート証明書を追加したり、ローカルDNSを制御したりできない場合（他のユーザーが所有しているデバイス（BYOD）でテストする場合や、メジャーな証明書など、ユーザーが信頼されたルート証明書を追加できない、よりロックダウンされたブラウザーでテストする場合などビデオゲームコンソールでは、完全修飾ドメイン名（FQDN）が必要です。

1. DNSとAPIを提供するレジストラからドメインを購入します。これは、TLD内に直接存在するか、パブリックサフィックスリストに追加された動的DNSプロバイダーの1つから存在する可能性があります。（非PSL動的DNSプロバイダーは、Let's Encryptによって課せられたレート制限のために受け入れられません。）
2. このドメインのゾーンファイルAで、開発ワークステーションのプライベートIPアドレスにレコードを指定します。これにより、開発ワークステーションにFQDNが提供されます。
3. 使用脱水し、サポートしているACMEクライアントdns-01レッツ・暗号化、認証局からこのFQDNの証明書を取得するために、挑戦を。
4. この証明書を使用して、開発ワークステーションのWebサーバーでHTTPSを構成します。
5. すべてのデバイスで、この名前にアクセスします。

サービスワーカーをテストする最も簡単な方法は、無料のホスティングプロバイダーを見つけることだと思います。今日、無料のホスティングを提供する多くのサイトがあります。この無料のサーバーでアプリを簡単にホストできます。

私は主にherokuとnetlifyを使用しています。これは無料で使いやすいです。