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

Webfont Performance, FOUT, FOIT und Usability

Webfonts Performancevergleich

Webfonts haben sich in den letzten knapp 6 Jahren zu einem mehr oder weniger fixen Bestandteil des modernen Webdesign entwickelt. Neben gestalterischen Fortschritten, hat sich auch sehr viel in der Art und Weise, wie wir Webfonts einbinden, getan. Die @font-face Syntax ist mehrere Entwicklungsschritte durchgegangen, es gibt einige Services, die Webfonts anbieten, und eine neue API ist im Anmarsch.

Inspiriert durch Bram Steins Talk auf der Smashing Conference 2015 in Freiburg habe ich mich die letzten Tage mit dem Laden von Webfonts und den damit verbundenen Aspekten hinsichtlich der Usability und Performance beschäftigt. Ich habe mir angesehen, wie sich Browser verhalten während Webfonts geladen werden und wie man darüber Kontrolle ergreifen kann, um ein möglichst konsistentes Verhalten in allen Browsern zu erreichen und dabei auch die Webfont Performance zu verbessern. Weiters habe ich unterschiedliche Optionen getestet Webfonts zu laden und die Ergebnisse zusammengefasst.

(mehr …)

Mehr lesen

Dateigröße von Bildern ohne Verluste reduzieren

Dateigröße von Bildern ohne Verluste reduzieren mit ImageOptim

2014 waren Webseiten im Schnitt knapp unter 2MB groß, davon haben Bilder fast 64% ausgemacht. Die restlichen ~36% sind HTML, JS, CSS und Sonstiges. Das liegt zum einen daran, dass oft sehr viele Bilder verwendet werden, zum anderen daran, dass die Bilder nicht optimal abgespeichert worden sind. Es ist schon mal nicht schlecht, wenn man Bilder in Photoshop für Web speichert, aber das allein reicht nicht aus.

(mehr …)

Mehr lesen

Ungenutztes CSS entfernen mit uncss (gulp)

Google Chrome - Audits Tab

Die Größe von CSS-Dokumenten ist 2014 im Durchschnitt um 24% von 46kb auf 57kb gestiegen. Ein Anstieg um fast ein Viertel der Gesamtgröße ist echt nicht ohne. Natürlich könnte man sagen, dass sich CSS stark weiterentwickelt hat und wir viel mehr Möglichkeiten haben Aufgaben, die wir vorher mit Javascript gelöst hätten, mit CSS umzusetzen. Leider ist nur die Größe von Javascript-Dokumenten ebenfalls gestiegen, um 7% im Schnitt.

What surprises me most is CSS’s 11Kb rise. Responsive Web Design and CSS3 animations could account for some of this increase but there’s not been a drop in JavaScript.

http://www.sitepoint.com/average-page-weight-increases-15-2014/

Es handelt sich hierbei um eine negative Entwicklung der wir zumindest ein bisschen entgegenwirken können. Zuerst müssen wir erkennen, ob und warum unsere CSS Dateien so groß sind und schließlich was wir dagegen tun können.

(mehr …)

Mehr lesen

Unsere Websites sind zu fett: Optimierung der Frontend Performance

Frontend Performance optimieren

Wir befinden uns in einer Zeit, in der Performance eine sehr wichtige Rolle spielt. Zwar werden Bandbreiten immer größer und auf mobilen Geräten bekommt man auch schon beachtliche Downloadgeschwindigkeiten zusammen, aber nicht immer hat man die beste Übertragungsrate. Oft steht nur GPRS oder Edge (bspw. in der U-Bahn) zur Verfügung oder man befindet sich in einem öffentlichen WLAN, in dem die Geschwindigkeit deutlich gedrosselt wird.

(mehr …)

Mehr lesen