Optionen zum Testen von Servicemitarbeitern über HTTP

Ich möchte Servicemitarbeiter testen, habe jedoch ein virtuelles Host-Setup und kann anscheinend https auf localhost nicht aktivieren.

Wie kann ich meine lokale virtuelle Host-URL auf eine Whitelist setzen, um Servicemitarbeiter zu testen, wenn ich versuche, mich für den Servicemitarbeiter auf dem lokalen Host zu registrieren? Laut Chrome ist https erforderlich, um den Service Worker zu aktivieren. Wie kann ich diese Einschränkung zumindest für lokale Tests überwinden?

Im Allgemeinen müssen Sie sowohl Ihre Seite als auch Ihr Service Worker-Skript über HTTPS bereitstellen, um Service Worker verwenden zu können. Die Gründe dafür finden Sie unter Bevorzugen sicherer Ursprünge für leistungsstarke neue Funktionen .

Es gibt eine Ausnahme von der HTTPS-Anforderung zur Erleichterung der lokalen Entwicklung: Wenn Sie über http://localhost[:port]oder über auf Ihr Seiten- und Service-Worker-Skript zugreifen , http://127.x.y.z[:port]sollten Service-Worker ohne weitere Aktionen aktiviert werden.

In neueren Versionen von Chrome können Sie diese Anforderung während der lokalen Entwicklung über umgehen chrome://flags/#unsafely-treat-insecure-origin-as-secure, wie in dieser Antwort erläutert .

Firefox bietet über die devtools.serviceWorkers.testing.enabledEinstellung ähnliche Funktionen .

Bitte beachten Sie, dass diese Funktionalität nur dazu gedacht ist, Tests zu ermöglichen, die sonst nicht möglich wären. Sie sollten immer die Verwendung von HTTPS einplanen, wenn Sie die Produktionsversion Ihrer Site bereitstellen. Bitten Sie echte Benutzer nicht, die Schritte zum Aktivieren dieser Flags auszuführen!

Wenn Sie den Servicemitarbeiter eines angeschlossenen Mobilgeräts für einen echten Verhaltenstest einer progressiven Web-App debuggen möchten, helfen die Startoptionen für SSL-Chrome nicht und Sie müssen definitiv keine Zertifikate kaufen.

@ chris-ruppel erwähnte die Installation von Proxy-Software, aber es gibt tatsächlich eine einfachere Möglichkeit, die Portweiterleitung zu verwenden :

Angenommen, Sie stellen eine Verbindung her und debuggen Ihr Gerät mit Chrome:

• Öffnen Sie in den Chrome Dev Tools "Remote-Geräte" "Einstellungen" und fügen Sie eine Regel "Portweiterleitung" hinzu .
• Wenn Ihr localhost-Setup auf localhost ausgeführt wird: 80,
• Fügen Sie einfach eine Regel "Geräteport 8080" hinzu (kann ein beliebiger nicht privilegierter Port> 1024 sein).
• und lokale Adresse "localhost: 80" (oder mytestserver.sometestdomainwithoutssl.company:8181 oder was auch immer)

Nachdem Sie das getan hat, können Sie die URL aufrufen „ http: // localhost: 8080 “ auf Ihrem mobilen Gerät und es wird durch die „localhost: 80“ beantwortet werden auf Ihrem aktuellen PC / Test - Server . Funktioniert perfekt mit Servicemitarbeitern, als wäre es Ihr lokaler Computer, der auf Ihrem Handy ausgeführt wird.

Funktioniert auch für mehrere Portweiterleitungen und verschiedene Zieldomänen, solange Sie daran denken, nicht privilegierte Ports auf Ihrem Mobilgerät zu verwenden. Siehe Screenshot:

Quelle dieser Informationen ist die Dokumentation zu Google Remote-Geräten: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (ab April 2017 ist dies jedoch nicht sehr klar zu lesen einfache Antwort daraus)

Ich möchte oft auf einem realen Gerät debuggen und testen. Eine Methode, die ich mir ausgedacht habe, besteht darin, den Netzwerkverkehr des Telefons während der lokalen Entwicklung über Charles Proxy zu leiten . Im Gegensatz zu allen Chrome-spezifischen Lösungen funktioniert dies mit jedem Browser auf Ihrem Telefon.

1. Führen Sie Charles auf meinem Laptop aus (der auch meine Website mit dem Service Worker bedient). Notieren Sie nach dem Ausführen von Charles die IP / den Port für Schritt 2.
2. Konfigurieren Sie das mobile Gerät so, dass mein Laptop als Proxy verwendet wird.
   • Für Android tippen Sie einfach auf Ihr WLAN unter Einstellungen> Netzwerk ändern > Erweiterte Einstellungen > Proxy . Verwenden Sie Manual , um die IP / den Port einzustellen.
   • Klicken Sie für iOS auf den Abschnitt (i)> HTTP-Proxy . Wählen Sie Manuell und stellen Sie dann die IP / den Port ein.
3. Durch den Besuch localhostauf meinem Mobilgerät kann der Service Worker jetzt registriert und getestet werden.

Der einfachste Weg, pwa zu testen, war in meinem Fall die Verwendung von ngrok. https://ngrok.com/download Melden Sie sich an, holen Sie sich Ihr Token und legen Sie es fest!

Stellen Sie beim Ausführen ./ngrok http {your server port}sicher, dass Sie https verwenden, das im Terminal angezeigt wird, nachdem Sie diesen Befehl oben ausgeführt haben.

Sie können auch https://surge.sh verwenden , es dient zum Hosten einer statischen Webseite, wenn Sie hier besuchen: https://surge.sh/help/securing-your-custom-domain-with-ssl kann Sehen Sie, wie Sie ein SSL-Zertifikat einrichten

Wie Jeff in der ersten Antwort erwähnt hat, benötigen Sie auf localhost-Ebene kein https, um Service Worker zu testen. Servicemitarbeiter registrieren sich und arbeiten einwandfrei, solange Sie auf die localhost-Domäne zugreifen - ohne HTTPS.

Sobald Sie Ihre Anwendung auf localhost getestet haben und sehen möchten, wie sie mit https wirklich funktioniert, ist es am einfachsten, Ihre App auf GitHub hochzuladen. Sie können kostenlos eine Public Domain erstellen (und mit HTTPS!).

Hier sind die Anweisungen: https://pages.github.com/

Wenn Sie Servicemitarbeiter auf einem Clientgerät testen möchten, auf dem kein Webserver auf localhost ausgeführt werden kann, lautet die allgemeine Technik wie folgt:

1. Geben Sie Ihrem Server einen Hostnamen.
2. Geben Sie diesem Hostnamen ein Zertifikat.
3. Stellen Sie sicher, dass IPs der Zertifizierungsstelle vertrauen, die dieses Zertifikat ausgestellt hat.

Das ist aber leichter gesagt als getan. In einer AMA zu Reddit im November 2016 gab ein Vertreter von Let's Encrypt zu , dass HTTPS in einem privaten LAN "eine wirklich schwierige Frage ist, und ich denke, bisher hat niemand eine zufriedenstellende Antwort gefunden."

Zu den gängigen Methoden, um Ihrem Computer einen Hostnamen zu geben, gehört die Angabe einer stabilen internen IP-Adresse, die sich nicht täglich oder jedes Mal ändert, wenn Sie Ihre Internet-Gateway-Appliance aus- und wieder einschalten. Sie müssen den DHCP-Server in Ihrem Netzwerk konfigurieren, normalerweise den in Ihrem Gateway, um eine "Reservierung" einzurichten, die eine bestimmte private Adresse (normalerweise innerhalb 10/8oder 192.168/16) mit der MAC-Adresse der Ethernet-Karte Ihrer Entwicklungsarbeitsstation verknüpft . Lesen Sie dazu das Handbuch Ihres Gateways.

Jetzt, da Ihre Entwicklungsarbeitsstation eine stabile IP-Adresse hat, gibt es einen Zeit-Geld-Kompromiss. Wenn Sie bereit sind, die erweiterte Verwendung von DNS und OpenSSL zu erlernen und ein Stammzertifikat auf allen Geräten zu installieren, mit denen Sie testen möchten:

1. Führen Sie einen internen DNS-Server in Ihrem Netzwerk aus. Dies kann sich auf Ihrem Gateway oder auf Ihrer Entwicklungsarbeitsstation befinden.
2. Konfigurieren Sie Ihren DNS-Server so, dass er für einige erfundene TLDs autorisierend und für andere TLDs rekursiv ist.
3. Geben Sie der privaten IP-Adresse Ihrer Entwicklungsarbeitsstation einen stabilen Namen. Dies gibt ihm einen internen Namen.
4. Konfigurieren Sie Ihren DHCP-Server so, dass er die Adresse dieses DNS-Servers an andere Geräte weitergibt, die Leases erhalten.
5. Verwenden Sie auf Ihrer Entwicklungsarbeitsstation OpenSSL, um Schlüsselpaare für eine private Zertifizierungsstelle und den Webserver zu generieren .
6. Stellen Sie mit OpenSSL ein Stammzertifikat für die Zertifizierungsstelle und ein Zertifikat für den internen Namen des Webservers aus.
7. Konfigurieren Sie HTTPS auf dem Webserver auf Ihrer Entwicklungsarbeitsstation mithilfe dieses Zertifikats.
8. Installieren Sie das Stammzertifikat der Zertifizierungsstelle als vertrauenswürdiges Stammzertifikat auf allen Geräten.
9. Greifen Sie auf allen Geräten auf diesen internen Namen zu.

Wenn Sie kein Stammzertifikat hinzufügen oder lokales DNS nicht steuern können, z. B. wenn Sie vorhaben, mit Geräten anderer Benutzer (BYOD) oder mit gesperrten Browsern zu testen, bei denen Benutzer keine vertrauenswürdigen Stammzertifikate hinzufügen können, z Für Videospielkonsolen benötigen Sie einen vollqualifizierten Domainnamen (FQDN):

1. Kaufen Sie eine Domain bei einem Registrar, der DNS mit einer API anbietet . Dies kann direkt innerhalb einer TLD oder von einem der dynamischen DNS-Anbieter erfolgen, die es in die öffentliche Suffixliste geschafft haben. (Dynamische DNS-Anbieter ohne PSL sind aufgrund der von Let's Encrypt auferlegten Ratenbeschränkungen nicht akzeptabel .)
2. Zeigen Sie in der Zonendatei dieser Domain auf an A die private IP-Adresse Ihrer Entwicklungsarbeitsstation. Dadurch erhält Ihre Entwicklungsarbeitsstation einen vollqualifizierten Domänennamen.
3. Verwenden Sie Dehydrated , einen ACME-Client, der das unterstütztdns-01 Herausforderung , um ein Zertifikat für diesen vollqualifizierten Domänennamen von der Let's Encrypt-Zertifizierungsstelle zu erhalten.
4. Konfigurieren Sie HTTPS auf dem Webserver auf Ihrer Entwicklungsarbeitsstation mithilfe dieses Zertifikats.
5. Greifen Sie auf allen Geräten auf diesen Namen zu.

Ich denke, der einfachste Weg, einen Servicemitarbeiter zu testen, besteht darin, einen kostenlosen Hosting-Anbieter zu finden. Heutzutage gibt es viele Websites, die kostenloses Hosting anbieten. Sie können Ihre App ganz einfach auf diesen kostenlosen Servern hosten.

Ich benutze meistens Heroku und Netlify . Diese sind kostenlos und einfach zu bedienen.