Web Push with Mobile Safari (iOS 16.4) made easy

Since a few weeks the mobile Safari now supports Push Notifications. Of course I had to try it out and of course it didn't work right away, so here is a short summary of what you need:

1. First of all you need VAPID Keys, that's just a keypair you can generate yourself, you don't have to register anywhere, like for push notifications for Apple App Store Apps. I won't link to any of those shady sites where you can do that in a web form. You can do it via OpenSSL.
2. A service worker. That is some JavaScript that a page can register and which the browser can run in the background, even if the page is not open. This is essential, because the service worker gets the notification from the system and then has to make sure that and how it is displayed. Here is a sample implementation. Actually, that is the first time I need to use one on those!
3. A bit of JavaScript that registers the service worker and handles the registration for push notifications. On iOS, the important thing here is that the request for permissions happens in an onclick handler and not directly when the page is opened
4. A backend that stores the endpoints and tokens obtained from the browser.
5. The app must be installed on the homescreen and needs a manifest.json. I used standalone for the display field in the manifest.
6. A backend component to send pushes. For PHP I used the minishlik/web-push library.

Done! If you know how it works, it's quite easy, right?