I’ve been working on elm-pwa, a small package that wires browser PWA APIs to your Elm app through a single pair of ports.
It covers: service worker lifecycle (install, update, cache strategies), install prompt, online/offline detection, and push notifications.
What it provides:
Elm module (Pwa) — typed events, decoder, and command helpers
JS module (init) — wires browser events to the ports
Build function (generateSW) — generates a configurable service worker
The generated service worker supports cache-first, network-first, and network-only strategies, SPA navigation fallback, push notifications, and automatic update checking.
I’d love to get feedback on the API design and overall approach. Also, if you could try the demo on your device/browser and report whether it works (install prompt, offline mode, push notifications), that would be very helpful!
Of course elm-indexeddb will be complementary to provide the local data storage
EDIT: screenshot after a few iterations with feedback (thank you!)
Up to now, feedback I got say that notifications with chrome on Android work, but iOS does not. So if you are and Elm dev with access to an iPhone, I’m really interested in your feedback and potential contribution.
Install the PWA, then open it, subscribe to notifications and let me know if you receive notifications or not. And if you want to help, there are a few ways.
One is simply finding clear resources on how to make web push notifications work on iOS. Best would be resources that prove what they say by showing the code and having an example app that works.
They don’t show Safari versions on iOS. But I’m on 26.1 now version of iOS, iPhone 17.
I subscribed to notifications and it requested it via native dialog, then subscribe to push. Then send a message via form. It showed green succes sent message.
just after installation, show a banner to suggest opening the dedicated PWA instead of staying in browser.
later, when opening the browser while the PWA is installed, display a hint that the pwa is installed.
These are possible through web apis only available on chrome unfortunately, so will only work on android mobiles. On desktop macos, I have only (1) working, but not (2) even with chrome. And on iOS, unfortunately none of these two are possible.
Also updated the example demo app to be able to set the tag field and silent toggle, as well as always send the notification with the icon field set to the app icon so that it’s visible in the notification.
The tag field is convenient to be able to replace notifications (with same tag) instead of staking many of them. Very useful when many notifications would be sent, so that the receiver only have 1 notification in their notification center.