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.enabled
Einstellung ä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!
devtools.serviceWorkers.testing.enabled
.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:
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)
quelle
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.
localhost
auf meinem Mobilgerät kann der Service Worker jetzt registriert und getestet werden.quelle
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
quelle
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/
quelle
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:
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/8
oder192.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:
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):
A
die private IP-Adresse Ihrer Entwicklungsarbeitsstation. Dadurch erhält Ihre Entwicklungsarbeitsstation einen vollqualifizierten Domänennamen.dns-01
Herausforderung , um ein Zertifikat für diesen vollqualifizierten Domänennamen von der Let's Encrypt-Zertifizierungsstelle zu erhalten.quelle
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.
quelle