Progressive Web Apps ohne HTTPS auf Mobilgeräten testen

Progressive Web Apps (bzw. Service Worker) funktionieren nicht ohne HTTPS und das ist auch gut so. Wir haben 2017 und Webstandards sollten wahrlich Secure By Default sein. HTTPS ist kein Hexenwerk, bedeutet aber doch einen gewissen Aufwand, gerade wenn man als Entwickler nur mal schnell einen Prototyp zusammenschrauben möchte. Daher lassen Browser für die lokale Entwicklung praktischerweise Service Worker auch ohne HTTPS zu – wenn in der Adressleiste irgendwas mit localhost oder 127.x.y.z steht, geht's auch ohne grünes Schlösschen. Also alles in Butter? Nicht ganz! Denn „lokale Entwicklung“ von PWA dürfte in so ziemlich allen Fällen auch das Testen auf Mobilgeräten beinhalten. Und bei deren Browsern wird, auch wenn sie im lokalen WLAN hängen, ganz sicher etwas in der Adressleiste stehen, das den Service Worker HTTPS verlangen lassen wird.

Es gibt diverse browserspezifische Wege, die das Problem zu umschiffen. Die Firefox-Config kennt den Flag devtools.serviceWorkers.testing.enabled, der das HTTPS-Requirement abschaltet und Chrome kann man mit komischen Flags starten oder den Mobile-Browser in lokale Devtools einklinken … alles ziemlich kompliziert und speziell für bestimmte Browser. Es geht aber auch einfacher.

Die HTTPS-Ausnahme für lokale Entwicklung greift, sobald in der Browser-Adressleiste localhost oder 127.x.y.z steht. Also warum nicht einfach einen kleinen Proxy-Server auf dem Entwicklungs-Rechner laufen lassen, der alle Anfragen auf den lokalen App-Server umbiegt? Wenn man diesen Proxy-Server auf dem Mobilgerät verwendet und localhost eingibt, landet man auf dem App-Server und genießt dabei die HTTPS-Ausnahmeregelung. Mit dem Node-Modul http-proxy ist der Proxy-Server schnell gebaut:

// npm install http-proxy
require("http-proxy").createProxyServer({
  target: "http://localhost/projekte/foo/" // lokale App läuft hier
}).listen(8001);

Dann noch Mobilgerät und Entwicklungs-Rechner in ein gemeinsames Netzwerk pflanzen, die IP des Entwicklungs-Rechners mit dem passenden Port als Proxy auf dem Mobilgerät eintragen und schon funktionieren nicht nur Service Worker, sondern auch mit andere Web-APIs, die normalerweise HTTPS brauchen.

Kommentare (0)

Noch keine Kommentare zu diesem Artikel.

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon