r/PWA

Sharing JointTracker, a PWA I built for tracking cannabis consumption (sessions, spending, stats), vanilla JS + Supabase, no framework. Wanted to share some PWA-specific stuff in case it's useful to others going down this path.

**Offline support:** service worker caches the shell so the app opens and shows last-synced data even with no connection, with a banner telling the user they're viewing cached data. Changes made offline still need to sync later — handling that gracefully without silently losing data was trickier than the caching itself.

**Push notifications:** Web Push + VAPID keys, triggered server-side via Supabase Edge Functions on a cron schedule (daily reminders, low-stock alerts). Getting subscriptions to survive across reinstalls/updates and cleaning up dead ones (410/404 responses) took some iterating.

**Install experience:** manifest + icons + install prompt handling. The iOS side was the most annoying part — no native install prompt API like Chrome's `beforeinstallprompt`, so you're stuck guiding users through the manual "Add to Home Screen" flow, and some things (like push notifications) only work at all on iOS 16.4+ *and* only once the app's already installed to the home screen. Easy to miss testing that properly.

Repo's public/open source if anyone wants to see how any of it's wired up: joint-tracker.vercel.app . Happy to compare notes if others have fought similar iOS PWA battles.

Live: joint-tracker.vercel.app · Code: github.com/poggimatteo2005-prog/joint_tracker_

Genuinely interested if publishing to the App Store is necessary.

What if you just make a PWA (Progressive Web App) and let people use it.

Think about it… No download, just a couple clicks, works the same way, looks the same way etc.

What’re your thoughts on this?

Posting this because it took me embarrassingly long to find and it's the kind of thing that only bites installed PWAs.

Setup: fitness app, standalone display, service worker precaches the seven app shells at install, then caches things at runtime. Runtime cache had one cap, evicting oldest-first. Textbook.

The bug: after a long session of using the app normally, a cold start would land straight on my offline fallback page, with a full cache and a working connection. Reloading fixed it. It never happened on a fresh install, which is exactly the tell.

Why it happened: Cache.keys() returns insertion order. The shells go in first, at install. So they are permanently the oldest entries in the cache. Every workout day pulls down demo images for the exercises, maybe 50 of them in a normal week, and each one pushed the cap over and deleted the oldest entry. Which was always a shell. Browse enough workouts and the eviction walks straight through all seven shells one by one, in order. Then the next cold start has no cached navigation to serve, and the offline HTML is what's left.

So the cache was doing precisely what I told it to. My eviction policy quietly outranked my precache.

What I changed:

1. Three separate budgets inside the one cache, keyed by what the entry is: navigations (24), demo images (60), everything else JS/CSS/fonts (80). Trim runs per bucket, oldest-first within a bucket only. Images can now only evict other images.
2. The install list is a pinned bucket the trimmer never considers at all, since those are exactly the routes the offline fallback looks up.
3. Shell-referenced JS and CSS moved into their own cache that the trimmer doesn't touch. Same failure one level down: a cached navigation that renders a blank screen because its bundle got evicted is arguably worse than the offline page, because it looks like your app is broken rather than offline.
4. Install uses per-asset puts instead of addAll, so one flaky route can't fail the whole install and leave someone with no offline support at all while reporting success.

Takeaway I'd give my past self: a precache and an LRU in the same cache are in direct conflict, and insertion order means the LRU wins every time. Bucket by role, or keep them in separate caches.

App is flexscan.app if the context matters, a physique-scan and workout thing, launched two days ago. Happy to paste the trim function if anyone wants it. Curious whether people here separate caches by role from the start or also learned this the hard way.

How and where do you guys market your pwa and get users for it?
I currently am „stuck“ promoting on Facebook in some groups but it doesn’t seem to do the trick. Been doing that for about 2 months now and don’t really have any users.

Hi everyone,

I'm looking for closed testers for my app, FinMan (a financial tracking app). I need users to join the Google Group, opt-in for testing, and keep the app installed for at least 14 days with occasional usage so Google can approve it for production release.

Here are the steps to join:

Join the Google Group first:

https://groups.google.com/g/finman-testers

Become a tester & install the app from Google Play:

Web link: https://play.google.com/apps/testing/com.vhworx.finman

Android link: https://play.google.com/store/apps/details?id=com.vhworx.finman

Please leave the app installed and open it every now and then over the next 2 weeks.

If you leave a screenshot in the comments, I'll be more than happy to join your group and test your app in return!

Thanks a lot for your help!

Hello everyone

🌋 Just launched a new project: an intuitive, clean dashboard dedicated to some volcanoes in the world​!

It’s currently in **beta** and I'm still adding more data, but I’d love to hear what you think and what could be improved!

✨ **Key Features:**

• Completely **ad-free** and **no registration** required.

• Advanced features and offline support available if you install it as a **PWA** (Progressive Web App) on your device.

🔗 Check it out here: https://volkan.site/beta/

What would you like to see added next? 👇

Hi,

I read a lot here about the comparison between PWA standalones (not on the App Store/Play Store) and native apps from the stores. The difference in reach & marketing is huge. That is clear.

But what about a PWA wrapped inside a native Capacitor app, built as an APK, AAB, or IPA, and uploaded to the App Store/Play Store like any other mobile app?
How does this compare to a Native App, while, again, both are uploaded to the App Store/Play Store?

Pros / Cons?
Any huge difference? I Don't want to use the phone camera, location, health data, etc.?

Navigate to chrome://flags and enable Web App Short Edges Cutout Mode.

I stumbled upon this while perusing flags (as you do), which was a pleasant surprise after patiently waiting since edge-to-edge support landed in Chrome a year and a half ago:

https://developer.chrome.com/docs/css-ui/edge-to-edge

PWAs on Android were stuck with opaque system bars, but finally look polished now. Credit where credit is due—Safari shipped this nine years ago:

https://webkit.org/blog/7929/designing-websites-for-iphone-x

Here’s the family portrait:

Edge-to-edge PWA on Android and iOS

Hi,

I wanted to share my approach to supporting data creation while offline and reliably synchronizing it once a connection is available again.

I build PWAs with Angular and NgRx. In my original implementation, I found that persisting and replaying actions that trigger API requests worked well as an offline queue.

This library is based on that working implementation. I used Codex to help extract the reusable functionality and turn it into an open-source library.

It’s still in alpha, and I’d appreciate feedback on the idea and API.

Interactive demo:

https://poodlelab.github.io/ngrx-offline/

Repository:

https://github.com/poodlelab/ngrx-offline

We all have been there, we lose service or it barely works and as we build our apps to try and compete with the titans, we notice that offline work is not that great.

When building Ailevo, since it revolves around travel where some may have the phone service to have signal and some go rogue and only use WiFi, I had to be different. That is why I focused heavily on the offline capabilities, after much trial and error, I found that a PWA can be built to work or at least get by use the phones cache stored for later use, kinda like a safety. That prompted me to shift into this and build this offline capability to the best I can.

I am nowhere near a crazy developer nor an engineer, and a lot of it is AI assisted by Lovable, Cursor, Claude, perplexity. Now I do not build the first thing they recommend and dump the code into lovable/ cursor to start building. But I challenge it.

Since I am not a seasoned engineer, and I am still learning and growing. I had to do a lot of trial and error with this offline feature. It has helped out so far and I know it can be developed more but not too bad for a weekend warrior building a micro SaaS PWA while juggling, golf, traveling, career, and family.

I am curious to know everyone’s experience with a offline feature for a PWA.

I love this community and how we all help each other with opinions and experiences and how we contribute to each other’s post.

PS. I hope we all continue building and growing and we all succeed.

https://preview.redd.it/y8jszy83wdhh1.png?width=1175&format=png&auto=webp&s=2a30ba8f594bf1b590b392d4b118a0cf1eb03b09

J'ai continué à planifier des voyages de la même manière : une douzaine d'onglets, des prix contradictoires, et un itinéraire qui me faisait traverser la ville trois fois par jour. Alors j'ai construit ce que je voulais.

Ce que ça fait. Vous décrivez le voyage en une phrase — "une semaine quelque part au chaud, pour moins de 800 €, sans auberges" — et ça vous renvoie trois destinations réelles, puis un plan jour par jour où chaque jour regroupe des endroits vraiment proches les uns des autres. Pas une liste de points d'intérêt : un itinéraire qui a du sens à pied.

Les deux parties dont je suis vraiment fier :

Ça fonctionne sans connexion. Le moment où vous avez vraiment besoin de votre itinéraire, c'est dans l'avion ou dans un métro sans données. La carte, le plan, et les billets restent lisibles hors ligne. La carte est un moteur Web Mercator personnalisé avec des tuiles OpenStreetMap — pas de bibliothèque de cartes, parce que j'avais juste besoin de faire défiler, zoomer, placer des épingles, et tracer une ligne, et Leaflet est plus lourd que toute mon appli.

Le carbone est à côté du prix. Train contre voiture contre avion, comparé par coût, durée, et CO₂ sur la même ligne. Caché dans un sous-menu, ça ne change pas d'avis à personne ; à côté du prix, ça le fait.

Comment c'est construit. JS basique, pas de framework, pas d'étape de construction — un fichier HTML, un fichier CSS, un fichier JS. Fonctionne sur GitHub Pages avec un petit backend sans serveur, donc l'hébergement ne me coûte rien. Deux modèles gèrent la planification : un écrit l'itinéraire, un second vérifie indépendamment les dépassements de budget, les distances impossibles, et les lieux inexistants, puis le premier corrige ce qui a été signalé.

Avertissements honnêtes. C'est principalement en français avec un mode anglais. L'IA fait parfois des erreurs — chaque chiffre généré est étiqueté comme indicatif, et tout ce qui compte (visas, horaires d'ouverture) vous dirige vers des sources officielles plutôt que de prétendre l'être. C'est un projet personnel, pas une startup.

Gratuit, s'installe comme une appli sur iOS/Android/desktop.

Je suis heureux de répondre à toutes les questions sur les fonctionnalités hors ligne ou le contrôle des deux modèles — c'est là que la plupart du travail a été fait.

Hi guys I'm working on a webapp WPA want it to send push notifications. I'm not new in the web world build alot of apps but there have never being a moment where a notification worked on a WPA. Do you guys have a suggestions how I can get them work correctly on its and android?

Please let me know! Thanks in advance!

I'm building a PWA with Web Push. Push notifications work fine, but on some devices they only appear in the notification center/tray instead of showing as a popup/banner.

Is there any way for a PWA to request or enable popup/heads-up notifications programmatically on Android or iOS?

Or is the popup/banner behavior completely controlled by the OS and user settings?

I'm looking for a production-safe solution for thousands of users, not device-specific hacks.

Has anyone solved this in a real-world PWA?