knuspermagier.de
Since 2005.

Web Push im iOS 16.4 Safari leicht gemacht

Seit ein paar Wochen unterstützt der mobile Safari nun ja auch Push Notifications. Natürlich musste ich das direkt mal ausprobieren und natürlich klappte es nicht sofort, daher hier nochmal kurz zusammengefasst, was man braucht:

  1. Erstmal braucht man VAPID Keys, das ist einfach nur ein Keypair, das man sich selber generieren kann, da muss man sich nirgendwo für Anmelden, oder so. Ich verlinke mal keine dieser shady Seiten, wo man das in einem Web-Formular machen kann.
  2. Einen Service-Worker. Tatsächlich habe ich mich bisher auch immer sehr gut um dieses Thema drücken können. Das ist so ein bisschen JavaScript, das eine Seite registrieren kann und was der Browser im Hintergrund ausführen kann, auch wenn die Seite nicht offen ist. Das ist essentiell, denn der Service-Worker bekommt die Notification vom System übermittelt und muss selbst dafür sorgen, dass und wie sie angezeigt wird. Hier eine Beispielimplementierung.
  3. Ein bisschen JavaScript, dass den Service-Worker registriert und die Anmeldung für Push-Notifications übernimmt. Unter iOS ist hier wichtig, dass die Nachfrage nach den Permissions in einem onclick-Handler passiert und nicht direkt beim Öffnen der Seite
  4. Ein Backend, das die Endpoints und Tokens speichert, die man vom Browser bekommen hat.
  5. Die App muss auf den Homescreen installiert sein und braucht eine manifest.json. Ich nutzte standalone für das display-Feld im Manifest, sonst klappte es nicht, aber kann sein, dass es auch ohne geht.
  6. Eine Backend-Komponente um Pushs zu verschicken. Für PHP benutzte ich da die minishlik/web-push Library.

Fertig, damit funktioniert es! Wenn man weiß wie, ist es ganz einfach.

Kommentare, Feedback und andere Anmerkungen?
Schreib mir eine E-Mail 🤓