Service Worker ohne HTTPS auf einem Virtual Host in Chrome

Es ist so weit, ich mache zum ersten Mal ein Projekt mit Service Worker Offline verfügbar. Sehr weit bin ich noch nicht, weil es gleich zu Anfang eine Hürde zu bewältigen gab.

Um Service Worker verwenden zu können, benötigt man eine verschlüsselte Verbindung. Lokal ist das grundsätzlich kein Problem, wenn die Site über localhost oder 127.0.0.1 angesteuert wird, weil diese Ausnahmen darstellen (siehe hier für weitere Ausnahmen). In meinem Fall haut das aber nicht hin, weil ich mit Virtual Hosts arbeite.

Die Lösung

Zumindest für Chrome habe ich aber eine Lösung gefunden: Man öffnet den Browser über die Kommandozeile und behandelt http://meinesite.dev als sichere Quelle, obwohl sie unsicher ist. Dafür muss man zwei Flags übergeben.

Zuerst schließt man alle Instanzen von Chrome oder in meinem Fall von Chrome Canary, öffnet Terminal oder iTerm und gibt folgende Zeile ein.

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --user-data-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=http://meinesite.dev

Bevor man mit Enter bestätigt, muss man natürlich http://meinesite.dev noch durch die passende Domain ersetzen und Google\ Chrome\ Canary mit Google\ Chrome falls man Chrome und nicht Chrome Canary öffnen möchte.
Wenn alles gut gegangen ist, öffnet sich Chrome und man kann Service Worker auf einem Virtual Host verwenden.

Für Firefox gibt es wohl auch eine Lösung: Service Worker ohne HTTPS auf einem Virtual Host in Firefox (Habe es aber nicht getestet)

Offline ist bei mir noch nichts verfügbar, aber Service Worker läuft jetzt zumindest auf meinem Virtual Host. Mal sehen, wie es weitergeht ;)

Quellen

Mehr lesen

Meine Top Picks der letzten Woche #2

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

The A11Y Project

http://a11yproject.com/
How-Tos, Checklisten, Patterns, Tests, Tipps und Mehr zum Thema Accessibility.

vienna.js

http://www.meetup.com/viennajs/
Ich war letzte Woche das erste Mal beim vienna.js Meetup und kann es nur empfehlen!

BEM with Emmet

https://pawelgrzybek.com/bem-with-emmet/
Emmet Filter für den BEM Syntax.

Critical Web Fonts

http://www.zachleat.com/web/critical-webfonts/
Kritische Buchstaben zuerst laden und dann erst den Rest.

Mehr lesen