Repository für den Progressive Web-App Code im Grundast der Interaktiven Medien. Progressive Web-Apps (PWA) sind normale Websites basierend auf HTML, CSS, Javascript, MySQL und PHP. Die Websites sind angereichert durch die Möglichkeit, dass sie auf dem Smartphone (oder Desktop) installiert werden können. Dabei werden die Inhalte (wie Bilder, Stylesheet etc.) auch lokal gespeichert. Das heisst, die PWA können auch offline (d.h. ohne Internetverbindung) genutzt werden.
- Um Progressive Web-Apps auf einem Endgerät zu installieren wird eine manifest.json-Datei benötigt, die im head-Bereich der Startseite der PWA verlinkt sein muss. Die Manifest-Datei enthält alle Informationen über die App, die benötigt werden, um die PWA erfolgreich zu installieren. Dazu gehören Name, App-Icons und der Pfad zur Startdatei der PWA.
- Ein Service-Worker ist JavaScript-Code, der separat vom Browser im Hintergrund ausgeführt werden kann. Es handelt sich im Wesentlichen um eine JavaScript-Datei, die separat vom Hauptbrowser-Thread ausgeführt wird, Netzwerkanforderungen abfängt, Ressourcen zwischenspeichert oder aus dem Cache abruft und Push-Nachrichten übermittelt. Da Worker getrennt vom Hauptthread ausgeführt werden, sind Service-Worker unabhängig von der Anwendung, der sie zugeordnet sind. Die wesentlichen Elemente des Service-Workers sind bei Mozilla beschrieben.
Falls der PWA-Builder nicht funktioniert, können mit Firebase auch Manifest und Icons erstellt werden. Diese ZIP-Datei wird vom PWA-Builder generiert. Auch diese kann verwendet und angepasst werden.
Dieser Ordner ist die Ausgangslage für das Selbststudium. Es handelt sich um eine validierte, responsive Website. Sie muss im Selbststudium in eine PWA umgewandelt werden. Zu Anschaungszwecken steht die Ausgangslage auch im Netz zur Verfügung.
Dieser Ordner ist das fertig umgewandelte PWA. Zu Anschaungszwecken steht die Lösung auch im Netz zur Verfügung.
In diesem Ordner befinden sich einige Dateien, welche für die Umwandlung der Websote in eine PWA benötigt werden.
Die erste Übung innerhalb der Blockwoche ist eine Repetition des grundsätzlichen Vorgehens zur Erstellung einer PWA. Sie finden in der PDF der Übungs-Datei die einzelnen Schritte beschrieben. Zu Anschaungszwecken steht die Ausgangslage auch im Netz zur Verfügung.
Dieser Ordner ist das fertig umgewandelte PWA. Zu Anschaungszwecken steht die Lösung auch im Netz zur Verfügung.
In der zweiten Übung innerhalb der Blockwoche soll zuerst eine einfache Website mit Flexboxen gebaut werden. Die Inhalte stammen aus einer gegebenen JSON-Datei. Anschliessend wird das PWA eingebaut.
Dieser Ordner ist das fertig umgewandelte PWA. Zu Anschaungszwecken steht die Lösung auch im Netz zur Verfügung.
In der dritten Übung innerhalb der Blockwoche greifen wir auf eine Datenbank zu. Die Datei Datenbank_pokemon.sql beinhaltet die zu importierenden Daten.
Das Vorgehen ist identisch mit dem Beispiel «finale_Version_ausfuehrlich_kommentiert» des 3. Semesters. Machen Sie sich zuerst wieder mit dem Zusammenspiel der Dateien und Funktionen vertraut. Anschliessend löschen Sie alle überflüssigen Dateien und Funktionen. Es werden nur Inhalte der Datenbank angezeigt. Funktionen für Buttons, das Login, Hinzufügen, Bearbeiten und Löschen von Datensätzen braucht es nicht. Es sollen nur Datensätze angezeigt werden.
Dieser Ordner ist das fertig umgewandelte PWA der Datenbank. Zu Anschaungszwecken steht die Lösung auch im Netz zur Verfügung.
In der vierten Übung innerhalb der Blockwoche experimentieren wir mit Push-Nachrichten. Die Unterlagen sind eine visuelle Zusammenfassung des Tutorial: Web Push notification using Firebase.
Das Beispiel basiert auf der ersten, fertigen PWA-Übung.
Dieser Ordner ist das fertige Push-Nachrichten-Beispiel. Allerdings fehlen die individuellen Parameter von Firebase. Diese müssen laut Tutorial erstellt werden. Zu Anschaungszwecken steht die Lösung auch im Netz zur Verfügung.