Werkstatt-Tagebuch #02: Freiwerkerei als PWA mit Push-Benachrichtigungen Werkstatt-Tagebuch #02: Freiwerkerei als PWA mit Push-Benachrichtigungen

Die Freiwerkerei ist jetzt nicht mehr nur eine Website, die du im Browser öffnest.

Sie funktioniert jetzt auch als PWA. Das heißt: Du kannst die Freiwerkerei wie eine kleine App auf dein Handy legen, direkt vom Homescreen starten und dich auf Wunsch bei neuen Artikeln per Push-Benachrichtigung informieren lassen.

Für mich ist das ein wichtiger Werkstatt-Schritt. Nicht, weil ich jetzt so tun will, als wäre eine PWA automatisch eine fertige App. Sondern weil genau diese kleinen technischen Bausteine später darüber entscheiden, ob aus einer Website wirklich ein Werkzeug wird.

Was ist eine PWA überhaupt?

PWA steht für Progressive Web App.

Einfach gesagt: Eine normale Website bekommt ein paar App-Fähigkeiten dazu.

Bei der Freiwerkerei bedeutet das aktuell:

• du kannst die Seite auf dem Homescreen installieren,
• sie öffnet sich dann wie eine eigene App,
• wichtige statische Dateien werden zwischengespeichert,
• es gibt eine einfache Offline-Fallback-Seite,
• und du kannst Push-Benachrichtigungen aktivieren, wenn du bei neuen Artikeln Bescheid bekommen willst.

Das ersetzt keinen App-Store. Aber für ein Projekt wie die Freiwerkerei ist es genau der richtige erste Schritt: leicht, schnell, unabhängig und ohne unnötigen App-Ballast.

Warum ich das eingebaut habe

Ich will die Freiwerkerei nicht als Seite bauen, die man einmal liest und dann vergisst.

Mein Ziel ist eher: eine digitale Werkstatt, zu der man zurückkommt.

Neue Artikel. Neue Werkzeuge. Neue Leadmagneten. Fortschritte aus der Werkstatt. Irgendwann vielleicht Community, Beta-Zugänge und eigene Produkte.

Dafür ist Push spannend. Nicht als Nerv-System. Nicht jeden Tag ein Alarm. Sondern gezielt:

Ein neuer sinnvoller Artikel ist online. Ein neues Werkzeug ist fertig. Ein echter Fortschritt aus der Werkstatt ist passiert.

Genau dafür möchte ich Push nutzen.

So installierst du die Freiwerkerei als App

Auf dem iPhone

1. Öffne freiwerkerei.de in Safari.
2. Tippe unten auf das Teilen-Symbol.
3. Wähle Zum Home-Bildschirm.
4. Bestätige den Namen Freiwerkerei.
5. Danach liegt die Seite wie eine App auf deinem iPhone.

Wichtig: Auf iOS funktionieren Push-Benachrichtigungen normalerweise nur sauber, wenn du die Seite vorher als PWA auf den Homescreen gelegt hast.

Auf Android

1. Öffne freiwerkerei.de in Chrome.
2. Tippe auf das Menü mit den drei Punkten.
3. Wähle App installieren oder Zum Startbildschirm hinzufügen.
4. Bestätige die Installation.

Danach kannst du die Freiwerkerei direkt wie eine App starten.

Auf Desktop

In Chrome, Edge oder anderen Chromium-Browsern erscheint je nach Browser ein Installationssymbol in der Adressleiste. Alternativ findest du die Option oft im Browsermenü unter Installieren.

Das ist nicht zwingend nötig, aber praktisch, wenn du die Freiwerkerei regelmäßig am Rechner liest.

So aktivierst du Push-Benachrichtigungen

Unter neuen Artikeln und jetzt auch im Werkstatt-Tagebuch findest du einen Button:

„Bei neuen Artikeln benachrichtigen“

Wenn du darauf klickst, fragt dein Browser nach Erlaubnis. Erst wenn du zustimmst, wird die Benachrichtigung aktiviert.

Wichtig:

• kostenlos,
• keine E-Mail nötig,
• jederzeit im Browser wieder abschaltbar,
• kein Newsletter-Ersatz,
• keine Dauerbeschallung.

Ich will damit keine Aufmerksamkeit klauen. Ich will nur einen sauberen Weg schaffen, damit interessierte Leser neue Werkzeuge nicht verpassen.

Wie ich das technisch gebaut habe

Die Freiwerkerei läuft mit Astro auf Vercel. Das Ziel war deshalb: möglichst leicht bleiben, keine schwere App-Struktur, keine unnötige JavaScript-Maschine.

Ich habe dafür mehrere Bausteine eingebaut.

1. Web-App-Manifest

Im manifest.webmanifest steht, wie die App heißen soll, welche Icons genutzt werden, welche Farbe der Browser nehmen soll und wo die App startet.

Das ist der Teil, der dem Browser sagt:

Diese Website darf wie eine App installiert werden.

Bei der Freiwerkerei sind dort Name, Kurzname, Start-URL, Theme-Farbe und Icons hinterlegt.

2. App-Icons

Damit die App auf dem Homescreen sauber aussieht, braucht sie eigene Icons. Ich habe dafür die Freiwerkerei-Optik in mehrere Größen gebracht:

• normales Icon,
• größeres Icon,
• maskierbares Icon,
• Apple-Touch-Icon.

Klingt langweilig. Ist aber wichtig, weil eine installierte App sofort billig wirkt, wenn das Icon schlecht sitzt.

3. Service Worker

Der Service Worker ist im Hintergrund der eigentliche technische Hebel.

Er sorgt bei der Freiwerkerei dafür, dass Navigationen zuerst aus dem Netz geladen werden, aber bei Problemen eine Offline-Seite greifen kann. Statische Dateien wie Icons oder Bilder können aus dem Cache kommen und im Hintergrund aktualisiert werden.

Wichtig war mir dabei: API-Anfragen werden nicht gecacht.

Lead-Formulare, Bestätigungen und Push-Endpunkte dürfen nicht versehentlich aus irgendeinem Cache beantwortet werden. Das wäre technisch unsauber.

4. Web Push mit VAPID

Für Push-Benachrichtigungen braucht man nicht einfach nur einen Button. Der Browser erstellt ein Push-Abo, und dieses Abo muss irgendwo gespeichert werden.

Bei der Freiwerkerei läuft das über:

• eine öffentliche VAPID-ID im Frontend,
• einen privaten VAPID-Key als Vercel-Secret,
• API-Endpunkte zum Anmelden und Abmelden,
• und einen geschützten Versand-Endpunkt.

Der Versand ist bewusst geschützt. Es soll nicht jeder einfach eine Nachricht an alle Abonnenten schicken können.

5. Speicherung der Push-Abos

Die Push-Abos werden nicht in irgendeiner lokalen Datei gesammelt, sondern über eine kleine Redis-Struktur gespeichert.

Das ist pragmatisch:

• schnell,
• leichtgewichtig,
• passend für Vercel,
• und ausreichend für den aktuellen Stand.

Später kann man das sauber erweitern, wenn aus der Freiwerkerei wirklich eine größere Community wird.

Was daran noch nicht perfekt ist

Ich will hier nicht so tun, als wäre das jetzt eine perfekte App.

Eine PWA hat Grenzen:

• iOS ist bei Push und PWA-Funktionen strenger als Android,
• Browser verhalten sich nicht immer identisch,
• Nutzer müssen Benachrichtigungen bewusst erlauben,
• und eine PWA ersetzt keine vollwertige native App, wenn man sehr tiefe Handy-Funktionen braucht.

Für die Freiwerkerei ist das aber im Moment genau richtig.

Ich brauche keine App-Store-Bürokratie, um erste echte Funktionen zu testen. Ich brauche ein schnelles System, das Leser näher an die Werkstatt bringt.

Warum das für die Freiwerkerei wichtig ist

Die Freiwerkerei soll keine tote Content-Seite werden.

Sie soll Schritt für Schritt zeigen, wie ich mir neben Familie, Schichtdienst und Alltag etwas Eigenes aufbaue. Mit KI. Mit Technik. Mit Finanzwissen. Mit Gesundheit. Mit echten Werkzeugen.

Eine installierbare PWA mit Push ist dafür ein kleiner, aber wichtiger Baustein.

Weil sie aus „ich habe da mal einen Artikel gelesen“ eher macht:

Ich habe diese Werkstatt auf dem Handy und bekomme mit, wenn etwas Neues entsteht.

Genau das ist der Punkt.

Mein Fazit

Die Freiwerkerei ist jetzt ein Stück näher an dem, was sie werden soll: keine reine Website, sondern ein praktischer Begleiter.

Noch klein. Noch im Aufbau. Aber technisch sauber genug, um echte Gewohnheiten möglich zu machen.

Wenn du willst, installiere die Freiwerkerei auf deinem Homescreen und aktiviere Push. Dann bekommst du mit, wenn neue Artikel, Werkzeuge oder Werkstatt-Fortschritte online gehen.

Ich nutze diesen Eintrag auch als Erinnerung an mich selbst: Nicht alles muss sofort riesig sein. Aber jedes gute System braucht Bausteine, auf denen man weiterbauen kann.

— Daniel