PWA

Eine Progressive Web App (▸ PWA) setzt eine manifest.json- und eine service-worker.js voraus. PWAs enable websites to function more like native mobile apps in exchange for some flexibility. You get native mobile app functionality (or close to it) without all the overhead of app store approvals and tons of platform-specific native code. Users can install a progressive web app to their home screen and launch it just like a native app. However, the app is launched into a pseudo-app frame that has some restrictions and only allows access to pages that are sub-paths of the initial path of the progressive web app. They also must be served over HTTPS.

Der Imagefilm ist ein Screenshot, den ich mit Screenflow darum quadratisch aufgenommen habe, damit er genau unter die ▸ Maske passt. Dieses CSS-Masking ermöglicht es, einen Film nicht einfach nur rechteckig anzeigen / spielen zu lassen. Dabei sind den geometrischen Figuren keine Grenzen gesetzt.

Diese Website ist darum eine einzige Webseite, ein sogenannter Onepager, damit sie auch als PWA tadellos funktioniert. Die Navigation geschieht mit dem Inhaltsverzeichnis (Anker/Sprungmarken siehe den Quelltext dieser Seite), welches sich in Bildschirmen >Tablet in der vertikel linken Hälfte des jeweiligen Browserfensters und in Bildschirmen <=Tablet in der 'ersten' Seite der Website befindet.



▲

How 2

Lass' dir von claudee.ai (es muss ja nicht immer ChatGPT sein) zuerst eine minimale ▸ manifest.json und grad auch noch eine service-worker.js schreiben - oder kopiere die beiden Dateien dieser Subdomain in deine Domain. Achte darauf, dass du sie in der obersten Ebene belässt. Dann verlinkst du die manifest.json in deiner index-Datei. Ist deine Website ein OnePager und besteht somit aus einer einzigen Webseite, musst du in der manifest.json nur die index-Datei und die Bilder erwähnen, die in der PWA angezeigt werden sollen. Sonst führst du alle Seiten auf, die in der PWA gespielt werden sollen.

Vor der Präsentation deiner PWA rufts du sie online auf und fügst sie deinem Home-Bildschirm bei. Dann öffnest du sie, immer noch online, und blätterst alle Seiten durch, die während der Präsentation gespielt werden sollen. Dann gehst du offline und rufst die PWA über das dem Home-Bildschirm hinzugefügte Icon auf. Thats all. Beachte: schaltest du nach diesem Prozedere, aber vor der Präsentation aus und wieder ein, musst du das Prozedere wiederholen.

▲

Kontakt

Du findest mich unter imnusshof.ch, unter lernenunterwegs.ch, unter thaynger.ch, unter ... und/oder in den asozialen Medien.



▲