Progressive Web Apps (PWA): Websites werden zu Apps

Ein Gastbeitrag von Nico Martin, Gründer der Agentur Say Hello

Hinter Progressive Web Apps (PWA) verbirgt sich eine neue Technologie, die es Websites erlaubt, Features zu nutzen, die man bis anhin nur von Mobile-Apps kennt.

Progressive Web Apps (PWA)

Aber machen wir erstmal einen Schritt zurück: Das Web macht es möglich, dass irgendjemand irgendwo auf der Welt einen Inhalt veröffentlichen kann und ich noch in derselben Minute darauf zugreifen kann. Dabei spielt es keine Rolle, wo ich bin, welches Gerät ich nutze, welches Betriebssystem ich verwende, es ist sogar egal, welche Bildschirmgrösse ich habe. Es funktioniert einfach. Grossartig, oder?

Mit dem Aufkommen von Smartphones gewannen nun Apps immer mehr an Popularität. Und das völlig zu Recht. Sie boten auf Smartphones langersehnte neue Möglichkeiten der Nutzerinteraktion. Allen voran zum Beispiel Push-Nachrichten oder Offline-Verfügbarkeit. Der Nachteil: Apps sind immer an ein Betriebssystem gebunden, sie sind teuer in der Entwicklung und bieten viele Hürden in der Verteilung.

Die Lösung: Progressive Web Apps

2015 stellte das Google-Chrome-Team unter dem Namen «Progressive Web Apps» eine neue Generation von webbasierten Applikationen vor, die folgende Kriterien erfüllen sollten:

  • Fast: Die Ladezeit sollte auf ein absolutes Minimum reduziert werden.
  • Integrated: Es sollte sich anfühlen, als wäre die Applikation Teil des Geräts.
  • Reliable: Verfügbarkeit bei schlechter oder fehlender Internetverbindung.
  • Engaging: Der Nutzer kann gezielt zu einer Interaktion animiert werden, auch wenn er die App zur Zeit nicht nutzt.

Um diese Punkte zu erfüllen, muss der Browser natürlich neue, wichtige Funktionen unterstützen.

Das Web App Manifest

Ein Web App Manifest enthält grundlegende Informationen zu der Website. Unter anderem zum Beispiel den Titel, eine Beschreibung, verschiedene Icons für den Homescreen und Anzeigeeinstellungen für die App-Ansicht.

Der Service Worker

Der Service Worker (SW) ist ein JavaScript-Dokument, welches in einem speziellen Geltungsbereich im Browser installiert wird. Dort kontrolliert er eine Website (einen Scope) und führt im Hintergrund Aufgaben aus, dessen Resultate er wiederum an die Website oder das Gerät weitergeben kann.

Ein einfaches Beispiel: Der SW überwacht alle Netzwerkanfragen und kann diese gegebenenfalls manipulieren. Sobald der Browser zum Beispiel eine Datei anfragt, entscheidet der SW, ob die Anfrage effektiv an den Server geleitet wird, oder lokal (noch auf dem Gerät) verarbeitet werden soll. Und auch bei der Antwort entscheidet dann der SW, ob diese direkt zum Browser soll, oder ob er zum Beispiel zusätzlich eine Kopie in den Application Storage, also einen lokalen Speicher legen möchte. All das ermöglicht uns nun also, gewisse Funktionalitäten und Inhalte auch offline (aus dem Application Storage) zur Verfügung zu stellen.

Das ist aber noch nicht alles. Der SW wird ganz automatisch registriert, wenn ein Nutzer die Website besucht. Danach arbeitet er, auch wenn die Website oder der Browser längst geschlossen wurde. Indirekt arbeitet die Website also weiter, auch wenn sie gar nicht aktiv ist.

Möglichkeiten von PWA

Moderne Websites und Webapplikationen stehen nativen Apps schon seit langem in kaum etwas nach. JavaScript-Schnittstellen erlauben einen ziemlich umfangreichen Zugriff auf die Gerätefunktionen und moderne Frontend-Frameworks erlauben eine sehr app-ähnliche Nutzerführung.

Progressive Web Apps gleichen nun noch die letzten Nachteile gegenüber mobilen Apps aus:

  • Installierbar: PWAs können auf dem Gerät «installiert» werden, sie können aber gleichwohl über einen URL aufgerufen und geteilt werden. Ein komplizierter Upload-Prozess kann damit einfach umgangen werden.
  • Offline Nutzung: PWAs können unabhängig von der Netzwerkverbindung verwendet werden.
  • Push Notifications: PWAs können Push Notifications empfangen und anzeigen.
  • Background Sync: PWAs können lokal Daten speichern und mit dem Server abgleichen, sobald eine aktive Internetverbindung vorhanden ist.

Browser-Support

Wie bereits angetönt, setzen PWAs einige Funktionen voraus, die noch nicht flächendeckend unterstützt werden. Während Android als Vorreiter in allen Browsern einen umfangreichen PWA-Support bietet, tut sich Apples iOS noch etwas schwer. Seit der Version 11.3 macht iOS glücklicherweise immer wieder grosse Schritte hin zu PWAs, allerdings funktionieren sie noch nicht ganz, wie erwartet. Wichtige Funktionen wie Background Syncs und Push Notifications sind leider noch immer nicht möglich und auch der Application Storage ist alles Andere als zuverlässig.

Das tolle an PWAs ist jedoch, dass jedes Feature als sogenanntes «Progressive Enhancement» geplant wurde. Wird es unterstützt, kann es genutzt werden, wenn nicht, dann funktioniert alles andere aber trotzdem problemlos.

Progressive Web Apps und WordPress

Das Konzept hinter PWAs hat mich schon von Anfang an fasziniert. Nach meinen ersten Gehversuchen in Verbindung mit Single-Page-Applikationen, entschieden wir uns dazu, unsere eigene WordPress-Website als Progressive Web App auszugeben. Nach vielen sehr positiven Rückmeldungen nahm ich den nächsten Schritt in Angriff. Ein PWA-WordPress-Plugin, welches unabhängig des Themes PWA-Funktionen in eine klassische WordPress-Website bringt.

Das Ergebnis kann sich sehen lassen. Das Web-App-Manifest kann ganz ohne Programmierkenntnisse erstellt und bearbeitet werden, der Service Worker ermöglicht eine netzwerkunabhängige Nutzung und es können sogar Push Notifications bequem über den WP-Admin-Bereich verfasst und an alle registrierten Geräte verschickt werden.

Damit ist es zu diesem Zeitpunkt das umfangreichste PWA-Plugin im offiziellen WordPress-Plugin-Verzeichnis!

Progressive WordPress (PWA)

Fazit

Werden PWAs die App-Plattformen ersetzen? Ich denke nicht. Aber das ist auch gar nicht notwendig. Auch mit PWA wird es immer wieder gute Gründe geben, native Apps zu bauen.

PWAs setzen aber dort an, wo native Funktionen grundsätzlich gar nicht notwendig sind. Und das sind mehr, als man denkt: E-Mail-Clients, Social-Media-Profile, Mediaplayer, Messenger, News-Plattformen, etc. Viele dieser Apps stehen heute noch im Appstore, könnten aber problemlos auch direkt über die Webplattform verteilt werden. In diesem Sinne hoffe ich stark, dass mit PWAs wieder mehr Aufmerksamkeit auf das Open-Web gelenkt wird.

TYPO3camp Schweiz 2019: Die TYPO3-Community trifft sich

Vom Donnerstag 23.05. bis Samstag 25.05.2019 findet in Bern das zweite TYPO3camp Schweiz statt. Am TYPO3camp, der Name verrät’s, dreht sich alles um das mächtige Open-Source-CMS TYPO3, das sich in der deutschsprachigen Region grosser Beliebtheit erfreut.

TYPO3camp Schweiz

TYPO3camps sind typische Barcamps, die vom Engagement der Teilnehmerinnen und Teilnehmern leben. Vorträge, Präsentationen, Workshops und Diskussionsrunden von und mit den teilnehmenden Personen bestimmen das Tagesprogramm. Die Themen der Sessions werden zu Beginn des Tages durch die Anwesenden festgelegt und sollen sowohl Einsteiger als auch Fortgeschrittene gleichermassen ansprechen.

3 Tage TYPO3 pur

Los geht’s dieses Jahr bereits am Donnerstagabend mit einem Warm-Up-Event, wo sich die Teilnehmerinnen und Teilnehmer vorab kennenlernen können. Aber auch alte Bekannte können den Abend dazu nutzen, ihre Freundschaften zu pflegen. Der perfekte Startpunkt also für ein gelungenes TYPO3camp.

Die beiden folgenden Tage sind dann vollgepackt mit Sessions, für die in der Regel jeweils ein Zeitfenster von 45 Minuten reserviert ist. Während einer Session werden Vorträge gehalten oder Diskussionen geführt. Natürlich dreht es sich bei den Sessions hauptsächlich ums Thema TYPO3, aber auch generellere Einblicke in Gebiete wie die Web-Entwicklung sind gerne gesehen.

Sie haben eine Idee für ein Thema, zu dem Sie selbst etwas beitragen können? Oder haben Sie einen Wunsch, über welches Thema Sie gerne mehr erfahren möchten? Dann ist die offizielle Sessions-Seite der richtige Ort für Sie. Dort können Sie ein Session-Angebot oder einen Session-Wunsch per Formular abschicken. Inspiration dazu gibt’s zum Beispiel in den Sessions aus dem vergangenem Jahr.

Mit cyon ans TYPO3camp Schweiz 2019

Die regulären Tickets für den Event sind für CHF 75.- auf der TYPO3camp-Website zu haben, gelten für die beiden Camp-Tage und beinhalten Verpflegung, Getränke und ein T-Shirt.

Mit etwas Glück schicken wir Sie gratis an den Event. Wir verlosen nämlich 2 x 1 Ticket fürs TYPO3camp Schweiz 2019. Und so nehmen Sie an der Verlosung teil: Hinterlassen Sie einen Kommentar unter diesem Beitrag und verraten Sie uns, zu welchem Thema Sie am liebsten eine Session besuchen würden. Idealerweise reichen Sie diese Idee auch direkt als Session-Angebot oder -Wunsch auf der TYPO3camp-Website ein ;)

Kommentare, die bis 02.05.2019 um 12:00 Uhr eintreffen, nehmen automatisch an der Verlosung teil. Die Gewinnerinnen und Gewinner werden von uns per E-Mail benachrichtigt. Wir wünschen viel Glück und vor allem viel Spass am TYPO3camp 2019.

Update 06.05.2019: Herzlichen Glückwünsch an unsere Gewinner Peter und Florian. Viel Spass am TYPO3camp :)

Einfach gut: Sichere Passwörter dank Passwort-Manager

Die Schweizer Bevölkerung fühlt sich im Internet sicher. Das ist das Ergebnis einer repräsentativen Umfrage von ICTSwitzerland, die vergangene Woche vorgestellt wurde. Alles also super, sicher und paletti in diesem Internet? Leider nicht.

Einfach gut: Sichere Passwörter dank Passwort-Manager

Denn auf den zweiten Blick geben die Umfrageergebnisse zu denken. Zum Beispiel deshalb, weil ziemlich genau 50 Prozent der Befragten angaben, «immer» oder «manchmal» dasselbe Passwort für verschiedene Dienste zu nutzen. Selbst unter denjenigen Personen, die sich als «eher oder sehr gut informiert» in Sachen Cyberrisiken bezeichneten, gaben 12 Prozent an, nur ein einziges Passwort für alle ihre Anwendungen zu verwenden. Ein klares No-Go. Denn haben Angreifer erst einmal das eine Passwort erbeutet, können sie so ohne Aufwand auf weitere Konten zugreifen. Immer wieder tauchen zudem grosse Sammlungen aus sogenannten «Breaches» (also Einbrüchen bei einem Anbieter) mit E-Mail-Passwort-Kombinationen im Netz auf und werden von Angreifern knallhart ausgenutzt.

Passwortverwaltung leicht gemacht

Klar ist aber auch: Sich für jede Website ein anderes Passwort zu merken, ist unmöglich. Aber auch gar nicht nötig. Entweder, man hat eine schlaue Passwort-Technik – in unserem Supportartikel «Sicheres Passwort» erfahren Sie mehr dazu, was ein sicheres Passwort ausmacht – oder man vertraut auf einen der zahlreichen Passwort-Manager, die einem die Denkarbeit komplett abnehmen.

Zum Beispiel auf die (kostenpflichtige) Safer-Code-App aus der Schweiz, bei der man sich nur ein einziges Icon merken muss. Noch bequemer sind Passwort-Manager, die wie ein Tresor funktionieren. An den (verschlüsselten) Inhalt, in diesem Falle die eigenen Benutzernamen und Passwörter für Websites, kommt man nur, wenn man das Master-Passwort kennt. Das hat den Vorteil, dass man sich nur ein einziges Passwort wirklich merken muss und dieses so dann auch entsprechend kompliziert gestalten kann. Hat man die Daten im «Passwort-Tresor» damit erst mal freigegeben, kann man die hinterlegten Logins und Passwörter dank entsprechender Browser-Plugins intuitiv per Mausklick nutzen und sich einloggen.

Passwortmanager gibt es sowohl als Offline- als auch als Online-Variante. So liegen die Daten zum Beispiel bei LastPass oder 1Password auf einem Server oder in der Cloud, beim «Offliner» und Open-Source-Vertreter KeePass hingegen auf dem eigenen Computer. Allerdings kann der «Tresor» dort beispielsweise mit Dropbox wie bei den «Onlinern» ebenfalls mit anderen Geräten synchronisiert werden. Denn nur, wenn ein Passwort-Manager auf allen genutzten Geräten auf die aktuellen Login-Daten zugreifen und diese auch aktualisieren können, macht deren Einsatz Sinn.

Vorteile überwiegen Nachteile

Natürlich ist es nicht von der Hand zu weisen, dass eine Software, die alle persönlichen Login-Daten einer Person verwaltet, potentiell eine Gefahr darstellt. Wird das «Master-Passwort» geknackt oder gibt die Software die Logins anderweitig preis, können theoretisch gleich alle Login-Daten abgegriffen werden. Wichtig ist deshalb, dass die Software stets auf dem aktuellen Stand gehalten wird und das «Master-Passwort» ein nur schwer zu knackendes Passwort ist.

Am Ende ist der Einsatz von Passwort-Managern aber doch eine sinnvolle Sache, insbesondere wenn deren Einsatz die Nutzer davor bewahrt, massenhaft schwache, mehrfach verwendete oder generische Passwörter einzusetzen. Für welches Programm man sich am Ende entscheidet, ist vor allem auch Geschmackssache.

SPF & DKIM: 7 Buchstaben für vertrauenswürdige E-Mails

Wer sich mit Themen wie E-Mails und Spam beschäftigt, stolpert unweigerlich über die Abkürzungen SPF und DKIM. SPF steht für den Begriff «Sender Policy Framework» und bezeichnet einen Abwehrmechanismus gegen Spam-Nachrichten. DKIM kürzt den Begriff «DomainKeys Identified Mail» ab und steht für einen Standard, mit dem das Fälschen von Absenderdaten in E-Mails – dem sogenannten Spoofing – verhindert werden soll. Gleichzeitig soll sichergestellt werden, dass die wesentlichen Teile der E-Mail nicht verändert wurden.

SPF & DKIM: 7 Buchstaben für vertrauenswürdige E-Mails

SPF: Zutritt nur mit Platz auf der Gästeliste

Mithilfe von SPF definiert die Inhaberin einer Domain, welche Server E-Mails für diese Domain verschicken dürfen und was mit E-Mails geschehen soll, die von einem nicht autorisierten Server stammen. Diese SPF-Regeln werden mittels eines DNS-Eintrags definiert, den Server beim Entgegennehmen der E-Mails prüfen können. Damit ist sichergestellt, dass E-Mails für die gewünschte Domain nur dann angenommen werden, wenn sie von einem «freigeschalteten» Server stammen. Natürlich vorausgesetzt, der empfangende Server prüft den SPF-Eintrag, was nicht zwingend der Fall sein muss.

DKIM: Mittel gegen Spoofing und Phishing

Neben SPF lässt sich mit DKIM die Vertrauenswürdigkeit von E-Mails weiter verbessern. Unterstützt der Mailserver der Empfängerin nämlich DKIM, kann dieser so feststellen, ob die E-Mail von einem Server stammt, den die Absenderin als legitime Quelle definiert hat und ob der Inhalt der E-Mail unterwegs verändert wurde. Ziel dieses Verfahrens ist es, Spammern und Phishern ihre kriminellen Vorhaben zu erschweren.

Damit die Empfängerin zweifelsfrei feststellen kann, ob die E-Mail aus legitimer Quelle stammt, wird vom sendenden Mailserver für jede ausgehenden E-Mail eine digitale Signatur («Hash») erstellt. Diese Signatur wird aus einem privaten Schlüssel sowie dem Inhaltstext der E-Mail generiert und im Header der E-Mail abgelegt. Mit dem öffentlichen Schlüssel, der als DNS-Eintrag des Domainnamens abgelegt ist, kann der empfangende Mailserver daraufhin diesen «Hash» verifizieren.

Ist die Signatur gültig, stammt die E-Mail tatsächlich von der behaupteten Domain. Ist die Signatur ungültig, wurde die Absenderadresse oder der Inhalt der E-Mail manipuliert. Die Empfängerin kann diese Informationen verwenden, um die Bewertungssysteme und Filtertechniken ihrer Spamfilter wirkungsvoller zu gestalten.

Mehr Vertrauen für E-Mails von Mailchimp und Co.

SPF und DKIM sorgen auch bei externen E-Mail-Diensten dafür, dass darüber verschickte E-Mails weniger oft im Spam-Ordner der Empfängerinnen landen. E-Mail-Marketing-Provider wie Mailchimp oder mailXpert bieten an, E-Mails mit SPF und DKIM noch vertrauenswürdiger zu machen. Die Einrichtung ist in der Regel unkompliziert, wie das Beispiel Mailchimp zeigt.

Um SPF und DKIM für den beliebten E-Mail-Marketing-Anbieter zu aktivieren, sind 3 einfache Schritte nötig:

  1. Als erstes muss die eigene Domain von Mailchimp verifiziert sein. Dazu loggen Sie sich in die Mailchimp-Administrationsoberfläche ein und starten den Verifikationsprozess, der in der passenden Mailchimp-Anleitung Schritt-für-Schritt beschrieben ist. Mailchimp schickt im ersten Schritt eine E-Mail, die Sie mit einem Klick auf den Link in der E-Mail bestätigen müssen.
  2. Danach hinterlegen Sie in der DNS-Zone Ihrer Domain den DKIM-Eintrag, was im DNS-Editor Ihres my.cyon-Kontos in etwa folgendermassen aussieht:
    Einfach eingerichtet: DNS-Eintrag um DKIM für Mailchimp zu aktivieren

    Einfach eingerichtet: DNS-Eintrag um DKIM für Mailchimp zu aktivieren

  3. Zu guter Letzt hinterlegen Sie noch den von Mailchimp angezeigten SPF-Eintrag im DNS-Editor. Erweitern Sie in diesem Fall einfach den bereits bestehenden Eintrag mit include:servers.mcsv.net. Und schon sind E-Mails, die Sie ab diesem Zeitpunkt über Mailchimp versenden, um ein Stückchen vertrauenswürdiger.
    Mit dem passenden SPF-Eintrag sind E-Mails von Mailchimp noch vertrauenswürdiger.

    Mit dem passenden SPF-Eintrag sind E-Mails von Mailchimp noch vertrauenswürdiger.

Der Einsatz von SPF und DKIM wirkt sich positiv auf die Zustellbarkeit der E-Mails aus und sorgt in der Regel dafür, dass Ihre Versände weniger in den Spamfiltern der Empfängerinnen und Empfänger landen. Zudem wird mit SPF und DKIM dann auch der Einsatz von «Domain-based Message Authentication, Reporting and Conformance», kurz DMARC genannt, möglich. DMARC hilft dabei, den Missbrauch von E-Mails noch weiter zu reduzieren. Wir werden Ihnen die Technologie in den kommenden Wochen in einem weiteren Blogbeitrag genauer vorstellen.

Internet-Pionierin Elizabeth Feinler: Warum aus .com fast .bus geworden wäre

Wer im Internet surft, kommt über kurz oder lang mit dem Domain Name System, kurz DNS, in Kontakt. Zumindest im Hintergrund, denn ausser uns Technikfreaks weiss keiner so genau, was es mit dem DNS wirklich auf sich hat. Vereinfacht gesagt dienen DNS-Server als Übersetzer, sie liefern zum Beispiel einem Webbrowser die zur aufgerufenen Domain gehörige IP-Adresse zurück. Gibt also jemand in seinem Webbrowser https://www.cyon.ch ein, muss der Computer des Nutzers erst wissen, welche IP-Adresse zu www.cyon.ch gehört. Erst wenn ihm diese bekannt ist, weiss der Computer, mit welchem Server er sich verbinden muss, um die Website anzuzeigen.

Internet-Pionierin Elizabeth Feinler: Warum aus .com fast .bus geworden wäre

Was heute automatisch und in Bruchteilen von Sekunden im Hintergrund passiert, machte Elizabeth Feinler früher in echter Handarbeit. «Jake», wie sie von Ihren Freunden genannt wird, war von 1972 bis 1989 für das Network Information Center (NIC) des Stanford Research Institute verantwortlich, wo sie damals auch die sogenannte Host-Tabelle führte – von Hand und auf Papier. Elizabeth, die am 2. März 2019 ihren 88. Geburtstag feiert, ist damit eine wahre Pionierin des Internets, auch wenn sie namentlich nur Insidern bekannt sein dürfte.

Denn: Jake erledigte das in Handarbeit. Kam ein neuer Computer dazu oder fiel einer weg, korrigierte sie die papierene Liste, am Schluss mehrmals wöchentlich. Und nicht nur das: Wer wollte, konnte auch beim NIC anrufen und entsprechende Auskünfte bekommen. Jeder Computer-Administrator erhielt eine jeweils aktualisierte Hostnamen-Liste auf Papier, um auch mal selber nachschlagen zu können. Erst später wurde dieser Prozess automatisiert, indem die Liste als ASCII-Datei mit dem Namen «hosts.txt» zur Verfügung gestellt wurde. Computer-Administratoren wurden angehalten, mehrmals wöchentlich die aktuelle Version der «hosts.txt» via FTP herunterzuladen. Und wer das nicht tat und damit für Fehler im Netzwerk sorgte, bekam es mit Jake zu tun, die Stunden damit verbrachte, Sysadmins davon zu überzeugen, dass regelmässige Updates nötig sind.

Auszug aus dem ARPANET-Directory 1974

Auszug aus dem ARPANET-Directory 1974 (Quelle: hyfen.net)

Wie .com sich doch noch gegen .bus durchsetzte

Feinler und das NIC waren es auch, die später beschlossen haben, ARPANET, den Vorgänger des heutigen Internets, aus administrativen Gründen in verschiedene Top-Level-Domains aufzuteilen. Künftig sollte es also die Top-Level-Domains .mil, .gov, .edu, .org und .bus für «Business» geben. Erst im letzten Moment realisierten die Beteiligten, dass der Begriff «bus» bereits in Zusammenhang mit Hardware-Controllern genutzt wurde und entschieden sich am Ende für die Endung .com («Commercial»). Rückwirkend eine ziemlich spannende Anekdote, wenn man bedenkt, dass es heute über 134 Millionen registrierte .com-Domains gibt.