Progressive Web App Entwicklung [Teil 2]

In Teil 1 ging es ja vorrangig darum, wieso eine PWA Sinn macht. Im zweiten Teil wird jetzt auf die eigentliche PWA eingegangen. Welche Vorraussetzungen gegeben sein müssen, welche Software man braucht um loszulegen und dann eben auch die erste eigene PWA.

Erste Schritte – Node JS

Insofern noch nicht geschehen, benötigt man zum Entwickeln der PWA Node.Js. Grundsätzlich geht es darum, einen Server zu simulieren um die PWA ausgiebig testen zu können. Da die Entwicklung lokal stattfindet.

Durch einen Klick auf das Node.js Logo kannst du dir den latest build herunterladen.

Node.js

Workspace Setup

Um an dem Projekt arbeiten zu können muss der Package Manager installiert werden. Dazu nutzt man das Terminal oder die Powershell (im Administrationsmodus). In meinem Fall habe ich das Terminal im Atom Editor (bekommst du hier) integriert. Du navigierst in den passenden Ordner deines Projektes und führst den Befehl:

npm install

aus.

Mhm.. und mit welchen Daten arbeiten wir?

Das beigefügte ZIP File beinhaltet das Übungsprojekt aus dem Kurs. Ich habe vorher die Lizenz angeschaut und es handelt sich dabei um die ISC-Lizenz, von daher sollte einer Veröffentlichung auch nichts im Wege stehen.

Wenn du die Daten herunter geladen hast kannst du in dem Editor deiner Wahl den Ordner als Projektordner angeben und mit “npm install” weitermachen.

ZipFile Icon
Lade Dir die Übungsdaten herunter
npm install – wurde bereits erfolgreich ausgeführt (Atom Terminal Eweiterung)

Den Development Server starten

Wenn der Package Manager installiert wurde, besteht der nächste Schritt darin, den Entwicklungsserver zu starten. Der Befehl dazu ist relativ simpel:

npm start
Der Entwicklungsserver wurde gestartet

Die App aufrufen

Um die App aufzurufen öffnet man nun Google Chrome und gibt in der Adresszeile: 127.0.0.1:3000 (alternativ auch localhost:3000) ein. Als nächstes öffnet man die Chrome Developer Tools (F12) und schaltet zunächst auf die mobile Ansicht. Außerdem macht es Sinn den Cache für die Zeit der Entwicklung zu deaktivieren um weitere Funktionen testen zu können.

Google Chrome Developer Tools im Einsatz
Google Chrome Developer Tools

Turn it into a PWA

Alles was man jetzt zu sehen bekommt, ist eine völlig normale Webseite. Weit entfernt von einer PWA. Eine entscheidene Zeile Code fehlt noch in den Demodaten. Um das zu beheben fügt man in der Datei app.js (im js Ordner des Projektes) in Zeile 5 folgenden Code ein:

navigator.serviceWorker.register('/sw.js');

Diese Zeile sorgt dafür, dass die sw.js Datei als Service Worker registriert wird. Nachdem die Datei gespeichert wurde kann man die App erneut auf Funktionalität testen.

In den Developer Tools wird, nachdem ihr die Seite neu geladen habt folgendes angezeigt:

ServiceWorker Anzeige unter Applications
Der Service Worker ist aktiv und wurde geladen

Damit man die Funktionalität des Service Workers testen kann, schaltet man die Seite auf Offline und lädt sie neu.

Wenn jetzt die Inhalte dennoch laden zeigt es, dass die App auch Offline funktioniert. Wer das nicht glauben mag, kann den Service Worker einmal “unregistern” und die Seite neu laden.

Was man dann zu sehen bekommt ist der Offline Modus von Google.

Laufende Saurier im Google Offline Modus
Mein Google Offline Dinosaur Run Highscore liegt bei 4359

Fazit:

Die Integration von Node.js, das Herunterladen der Dateien und das Starten des Development Servers stellen keine größere Herausforderung dar. Dennoch zeigen die Demodaten eine erste Funktionalität der PWA.

Alles in allem freue ich mich schon darauf den nächsten Abschnitt zu beginnen.

Ptrogressive Web App
Zurück zu PWA Entwicklung Teil 1
Vernetz Dich

Benjamin

Head of Development bei Samemission UG (haftungsbeschränkt)
Ich arbeite mit Computern seit ich vier Jahre alt bin. Angefangen mit den C64 über den Amiga, zum PC10 und weitergemacht beim x486er bis zum neumodischen PC..SEO und Onlinemarketing sind nunmehr seit über 10 Jahren meine Passion
Benjamin
Vernetz Dich