Last month, we shipped PWA support for <a class="prose-link" target="_blank" href="https://www.campsite.co">Campsite</a> after tons of user requests for a mobile app. Having Campsite on our home screens and receiving push notifications immediately convinced us it was worth it, and our users were happy.<post-attachment id="cr7n82vd36op" file_type="image/jpeg" width="1290" height="395"></post-attachment>We really want a native app for Campsite, but we’re still a small team on the hunt for product-market fit. Adding more platform overhead would slow us down.At the same time, we’ve found that supporting a PWA on iOS takes a ton of time — no matter how hard we try, there are too many bugs and missing features for us to ever feel like we’ve met our bar for craft and quality.<h2>Web Push: the good</h2>Apple added <a class="prose-link" target="_blank" href="https://developer.apple.com/documentation/usernotifications/sending_web_push_notifications_in_web_apps_and_browsers">Safari Web Push to PWAs in iOS 16.4</a>. This API is incredibly easy to use — you don’t even need a developer account.Campsite is a Rails API with a NextJS frontend. All we needed to do to get web push working:<ol><li>Detect if we’re running in a PWA environment via <code>window.matchMedia(&apos;(display-mode: standalone)&apos;)</code> and prompt to enable push.</li><li>We request push permissions and register a service worker. <a class="prose-link" target="_blank" href="https://pushpad.xyz/service-worker.js">Pushpad’s service worker</a> helped us get started. The worker sends the registered push endpoint and p256dh &amp; auth tokens to our API.</li><li>When a pushable event happens, we queue a Sidekiq job to send a push using <a class="prose-link" target="_blank" href="https://github.com/pushpad/web-push">Pushpad’s forked web-push gem</a>. If Apple returns a 410 response, we destroy the push subscription.</li></ol>And with that, we can send pushes for high-signal notifications and chats in Campsite.<post-attachment id="mj41z883tcie" file_type="image/png" width="1290" height="641"></post-attachment><h2>Web Push: the bad</h2>If you’re used to building native push notifications, there will be a lot of missing features and gotchas with Safari Web Push.The most surprising thing we found is that you must always display the notification on the device when it is received. This is done in the service worker, so you technically could skip displaying it. But if you do, Apple will revoke your push endpoint. From the <a class="prose-link" target="_blank" href="https://developer.apple.com/documentation/usernotifications/sending_web_push_notifications_in_web_apps_and_browsers#3975534">docs</a>:<blockquote>Present push notifications to the user immediately after your service worker receives them. If you don’t, Safari revokes the push notification permission for your site.</blockquote><a class="prose-link" target="_blank" href="https://www.reddit.com/r/PWA/comments/127p7s1/ios_pwa_web_push_notification_behaviours/">Users on Reddit</a> found that permissions were revoked the third time a notification wasn’t displayed.That means that if you’re viewing a chat thread on your PWA and you get a new message, you can’t suppress the new-message push. This is incredibly annoying for users.We work around this by delaying sending notifications by 10 seconds so that chats can be marked read while you look at them. Native apps can control whether or not to display a push.Here’s a bunch of other frustrations we have with Safari Web Push on iOS:<ul><li>There are no <a class="prose-link" target="_blank" href="https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/pushing_background_updates_to_your_app">silent pushes</a>, so we can only update the app icon badge with a displayed push. Ideally, if you clear your notifications elsewhere, we automatically remove the badge on your phone. This isn’t possible with PWAs via push.</li><li>Notifications can’t be removed from notification center unless you tap on them. You can <a class="prose-link" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/getNotifications">get notifications</a>, but calling <code>notification.close()</code> does nothing. Users have to clear Campsite pushes manually.</li><li>You can’t remove the “from Campsite” byline.</li><li>There is no <a class="prose-link" target="_blank" href="https://developer.apple.com/documentation/watchos-apps/grouping-notifications">notification grouping</a> or <a class="prose-link" target="_blank" href="https://medium.com/orion-innovation-techclub/whats-new-in-ios-15-notifications-7486e712df40">communication notifications</a>.</li></ul><h2>Bugs &amp; missing features</h2>We have dynamic light and dark mode support in Campsite driven by <a class="prose-link" target="_blank" href="https://github.com/pacocoursey/next-themes">next-themes</a> and simply:<pre><code>window.matchMedia(&apos;(prefers-color-scheme: dark)&apos;)</code></pre>While your PWA will render in light or dark mode, it will not switch until the app is killed.<post-attachment id="xkk98il3euec" file_type="video/quicktime" width="886" height="1920"></post-attachment>This broke with the release of iOS 17. That was over 6 months ago as of writing this post, and it appears broken in the 17.4 beta still. Developers have been reporting issues <a class="prose-link" target="_blank" href="https://www.reddit.com/r/webdev/comments/178073i/ios_17_bug_pwas_no_longer_react_to_darklight_mode/#">for</a> <a class="prose-link" target="_blank" href="https://forums.developer.apple.com/forums/thread/739154">some</a> <a class="prose-link" target="_blank" href="https://stackoverflow.com/questions/77450440/the-event-listener-added-by-window-matchmediaprefers-color-scheme-dark-is">time</a>.There are a few more annoying bugs that we run into frequently:<ul><li>We use CSS sticky to keep elements pinned to the top/bottom of the viewport (nav bars, chat input, etc). After a while, sticky elements break and freely scroll around the page. This is only fixed by killing the app.</li><li>The keyboard is incredibly fickle, too. It pushes sticky elements off the screen, and sometimes it just stops appearing in the PWA, and the only fix is to restart your phone.</li><li>There are no APIs for haptics, PIP, or contact sync. (<a class="prose-link" target="_blank" href="https://twitter.com/therealjfrantz/status/1758212307128119563">Thanks for pointing these out Jacob</a>)</li></ul><h2>Where do we go from here?</h2>I stand by our decision to build a PWA. We discovered that app icon badges and push notifications help us stay more connected. Our users agree — some are now spending half their time on Campsite from their phones!Unfortunately, PWAs on iOS don’t meet our bar for craft and quality at Campsite, and the latest news about <a class="prose-link" target="_blank" href="https://www.macrumors.com/2024/02/08/ios-17-4-nerfs-web-apps-in-the-eu/">Apple restricting PWA use in Europe</a> is also concerning. We fully intend on building a native app as soon as we lock in Campsite’s core features.If your users are asking for a native app, building basic PWA support will help you learn quickly. Just don’t expect your PWA to come close to a native experience.

PWAs won't replace native iOS apps