Optionen zum Testen von Servicemitarbeitern über HTTP

93

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?

Aman Satija
quelle

Antworten:

136

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!

Jeff Posnick
quelle
danke jeff wird es sofort versuchen. Auf jeden Fall benutze ich dies nur zum Testen .. brauchte vorerst eine verzweifelte Problemumgehung ... !! Ich kenne keine ideale Praxis .. aber Verzweiflungszeiten erfordern Verzweiflungsmaßnahme ... !! Könnten Sie mir bitte meine hart verdienten 4 Punkte zurückgeben ... !! Ich werde die Frage löschen, wenn Sie der Meinung sind, dass sie nicht angemessen ist, und sie wird zu falschem Verhalten führen
Aman Satija
1
Verwenden von Service Worker in localhost, aber beim Versuch, die Datei sw.js vom Server abzurufen, wird net :: ERR_INSECURE_RESPONSE,
sp1rs
1
Vielen Dank! Ich habe den Hauptteil zum Lesen aktualisiert devtools.serviceWorkers.testing.enabled.
Jeff Posnick
4
Für alle, die Probleme hatten, die oben genannten zu finden - öffnen Sie FF - Dev Tools - Einstellungen Zahnrad - erweiterte Einstellungen - aktivieren Sie sw over http. Dann können Sie zu ungefähr gehen: Debuggen von # Workern in der URL oder von Tools - Web Dev - Service Workern in der Symbolleiste. Starten Sie den Arbeiter!
Sten Muchow
@StenMuchows Antwort funktioniert für mich in Chrome Mac und Windows
Mohamed Hussain
51

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: Im Screenshot finden Sie einige konfigurierte Ports, die den PC anrufen, wenn sie auf dem Mobiltelefon aufgerufen werden

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)

Christopher Lörken
quelle
Sieht vielversprechend aus, hat aber bei mir nicht funktioniert. Sagt nur "Diese Site kann nicht erreicht werden", wenn Sie versuchen, localhost unter Android 5.0.2 zu besuchen, nachdem Sie die Portweiterleitung eingerichtet haben.
Jackson
Sie benötigen also kein https auf localhost? Wird SW gut funktionieren?
Machado
2
Das sollte die akzeptierte Antwort sein, es funktioniert gut
Miquel
Schnell und einfach! Vergessen Sie nicht, das USB-Debugging auf Ihrem Telefon zu aktivieren und zu akzeptieren und es über USB an Ihren PC anzuschließen. Danke, Mann!
Marcos R
Wenn Sie jedoch nur für http Ressourcen über https anfordern, werden diese nicht zwischengespeichert.
Legenden
24

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.
Chris Ruppel
quelle
4
Ich stehe auch vor diesem Problem, vielen Dank. Das Testen von Mobilgeräten ist ohne Proxy völlig unmöglich. Dieser Beitrag benötigt mehr Stimmen.
Phyo Arkar Lwin
1
@ chris-ruppel Tatsächlich gibt es eine Möglichkeit, dies ohne zusätzliche Proxy-Software zu tun, indem Sie die Portweiterleitung für Remote-Geräte von Chrome Dev Tools verwenden. Ich habe in diesem Thread eine detaillierte Antwort hinzugefügt.
Christopher Lörken
"Mobil zu testen ist völlig unmöglich;" aber das ist ein kleines Versehen. Lassen Sie uns die Leute begrüßen, die Servicemitarbeiter spezifizierten ...
Jackson
Chris, kannst du näher auf "1. Charles auf meinem Laptop ausführen" eingehen? Man kann Charles Proxy installieren. Auf seinem Computer läuft ein Server unter localhost: 8080. Dann was? Sie sagen auch "IP / Port notieren". Wo?
Jackson
1
@ChrisRuppel Ich bin zu ngrok.com gewechselt : Kostenlos, erstellt eine öffentliche HTTPS-Site für meine lokale App und funktioniert wie ein Zauber! Der erste Lauf dauerte eine Weile, bis die Verbindung hergestellt war. Ich empfehle nur, die Regionen zu wechseln, wenn Sie sich nicht in den USA befinden ( ngrok.com/docs#config-options , Parameter "Regionen").
Karsten Silz
10

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

Alex
quelle
Lief wie am Schnürchen! Vielen Dank für die tolle Empfehlung!
Karsten Silz
Dies hilft auch, obwohl ich Probleme habe, einen Bericht mit Leuchtturm zu
erstellen
3

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/

Miguel Guardo
quelle
1
Die folgende Frage wäre eine für Softwareempfehlungen: Welche Webserver für iOS und Android werden zum Testen auf einem mobilen Gerät mit der localhost-Methode empfohlen?
Damian Yerrick
Ich verwende Erlang HTTP Server, aber jeder Server sollte funktionieren. Ich habe vor dem 200 HTTP-Server von Chrome verwendet, auf den Sie über den Google Marketplace zugreifen können.
Miguel Guardo
3

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.
Damian Yerrick
quelle
1

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.

Sushil
quelle