Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » Rezepte für Webentwickler: Deine erste PWA mit dem Service Worker Cookbook

Rezepte für Webentwickler: Deine erste PWA mit dem Service Worker Cookbook

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 2. Januar 2018

Inhaltsverzeichnis

PWA, Progressive Web Apps, setzen sich nur dann als Standard gegen die nativen Mobil-Apps durch, wenn sie möglichst breite Unterstützung finden. Dabei kann jede Web-App eine progressive Web-App sein.

Was ist eine Progressive Web App?

Progressive Web Apps, eben noch in unserer 2018er Übersicht zum Trend erhoben, sind mobil nutzbare Webangebote, die sich an die Fähigkeiten des sie nutzenden Gerätes und Browsers anpassen können. Je leistungsfähiger das Gerät und der Browser, desto leistungsfähiger die App. Zur Erstellung werden ausschließlich offene Webstandards verwendet. Progressive Web Apps können aber derzeit noch nicht auf alle Gerätefunktionen zugreifen, weshalb sie für manche Anwendungsfälle ungeeignet sind.

StockSnap HP2MPJT5B6 Rezepte für Webentwickler: Deine erste PWA mit dem Service Worker Cookbook
Die mobile Nutztung des Web wächst stetig. (Foto: Stocksnap)

Im Grunde sind PWA also zunächst einmal Websites. Es ist deine Entscheidung, ob du aus deiner normalen Website eine progressiv arbeitende machst, denn eine PWA ist nichts anderes als eine aufgebohrte Version bisher schon existierender Websites, die mobil funktionieren. Aufgebohrt in diesem Sinne bedeutet, dass sie über Features und Fähigkeiten verfügt, die man bislang nur aus dem Bereich der nativen Entwicklung kannte. Diese neue Generation von Web-Apps ist also in der Lage, viele der Fähigkeiten heutiger Mobilapps zu bieten, so dass letztere in weiten Teilen unnötig werden.

Abgesehen davon, dass man mit einer PWA im Vergleich zu einer nativen App das Web wieder ein Stück offener und freier macht, hat eine Web-App natürlich ganz eigene Vorteile. Eine Web-App wird über die Google-Suche gefunden und kann aufgerufen und genutzt werden. Es ist nicht erforderlich, sie in einem der App-Stores zu lokalisieren und von dort zu installieren. Web-Apps müssen nicht für jedes Update erneut durch die Prozesse des App-Stores laufen und dann zumeist umfangreich als Update installiert werden.

PWA vereinen also die Vorteile nativer Apps hinsichtlich der Schnittstellennutzung, der lokalen Datenhaltung, der Möglichkeit, Benachrichtigungen einzublenden und einige Details mehr, mit der unkomplizierten schnellen Verfügbarkeit web-basierender Angebote und deren unmittelbare Aktualität, die keiner Updateprozesse bedarf.

Das Wörtchen „progressiv“ im Namen bedeutet, dass die App im Kern erstmal eine mobile Ansicht einer URL zeigt und dann auf die Fähigkeiten des aufrufenden Gerätes und Browsers reagiert. Auf diese Weise bleibt sichergestellt, dass eine Progressive Web App ganz grundsätzlich auf jedem Gerät und Browser funktioniert, allerdings in unterschiedlichem Umfang, eben progressiv angepasst an die aufrufende Umgebung.

Service Worker to the Rescue

Herzstück jeder PWA sind die Service Workers, die fortgeschrittene Funktionalitäten erst möglich machen. Ein Service Worker ist – verkürzt gesagt – ein JavaScript, das, anders als bislang möglich, im Hintergrund einer Webanwendung arbeiten kann. Das funktioniert sogar dann, wenn die Website gar nicht geöffnet ist.

serviceworkerscookbook Rezepte für Webentwickler: Deine erste PWA mit dem Service Worker Cookbook
Service Workers Cookbook: Landing Page (Screenshot: Dr. Web)

Da Service Worker keine Optik haben, ist es sinnvoll, sich einen Fundus an Scripten anzulegen, die diverse Basisfunktionalitäten abdecken. Solche Rezepte findest du etwa im Service Worker Cookbook von Mozilla, das inzwischen ein erhebliches Repertoire an Standard-Funktionalitäten abzudecken weiß.

Dazu gehören vor allem Features, über die jede PWA verfügen muss, wie etwa das Cachen von Daten oder Fallback-Techniken bei nicht bestehender Online-Verbindung. Alle Rezepte des Cookbook sind aus der Tüte verwendbar, dabei aber überaus ausführlich dokumentiert. Die Demos sind so angelegt, dass die Firefox Entwicklertools ebenfalls nützliche Informationen preisgeben, wenn du sie parallel zur Demo laufen lässt.

Willst du dich zunächst intensiver mit den Grundlagen auseinandersetzen, bietet sich die kleine Übersicht zu Lernressourcen namens Awesome Service Workers an. Am 19. Dezember 2017 brachte Microsoft Service Workers in einem Windows-Update zum Edge-Browser. Die Redmonder gehen damit davon aus, dass PWA weitaus stärker als bisher in Windows 10 eine Rolle spielen werden. Warten wir das mal ab.

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Netzhelfer Agentur Ostfildern Stuttgart Logo. Die Partner für das Internet.

NETZhelfer GmbH

Ostfildern

orange services webdesign agentur esslingen logo

Orange Services

München

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

Coco logo.

COCO Content Marketing

München

360 grad konzept logo werbeagentur hannover.

Werbeagentur Hannover | 360 Grad Konzept

Hannover

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

2 Antworten zu „Rezepte für Webentwickler: Deine erste PWA mit dem Service Worker Cookbook“
— was ist Deine Meinung?

  1. stooni sagt:
    2. Januar 2018 um 17:35 Uhr

    Am 19. Dezember 2018 brachte Microsoft Service Workers — sollte wohl 2017 heissen!!!

    Alles Gute zum Neuen Jahr, Kommentar kann nachher wieder gelöscht werden!!

    Antworten
    1. Dieter Petereit sagt:
      3. Januar 2018 um 11:41 Uhr

      Da hast du natürlich vollkommen Recht. Danke für den Hinweis!

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑