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.

Folgt mir!