PWAs: Personal Web Apps · ma.ttias.bePWAs: Personal Web Apps

Mattias GeniarI&rsquo;ve found my ideal format for shipping apps for personal & family use: PWAs, with an offline-first focus, rendering (mostly) entirely client-side. JavaScript is powerful enough to do pretty much anything these days - especially if you don&rsquo;t have to write the code yourself.<br>PWAs#

So what am I shipping: a mobile-only web application, with long client-side caching & a simple update mechanism. Add the website to your mobile phone&rsquo;s home screen, and it behaves 99% like a native application, but is so much easier to maintain, deploy & install. Our family is all-in on the Apple ecosystem, so sideloading apps isn&rsquo;t a rabbit hole I want to go down. But PWAs install with just 2 clicks.<br>A random collection of tools#<br>I started grouping random little tools at random.ma.ttias.be<br>instead of giving each tool a subdomain. This is a single monorepo where I can prompt new (simple) tools into existence, with automatic rules around deployment. If (auto-generated) tests pass, it auto-deploys. It means I can just write a simple prompt, leave T3 code<br>to work for 30 minutes and see the results directly on my phone.

So far, I&rsquo;ve added:<br>Currency converters for Sri Lankan Rupee<br>& Maldives Rufiyaa<br>A few games built for the family (all in Dutch): Imposter<br>, Wordl<br>, Escape<br>A Frame Grabber<br>, to extract a still frame from a video (why this isn&rsquo;t natively available on iOS, I don&rsquo;t know)<br>Video Speedup<br>: because iMovie on iOS for some reason only allows up to 2x speedups of video 🤷‍♂️<br>To me, these showcase the variety of client-side JavaScript tooling: from a video editor to a (small) game engine, it all &ldquo;just works&rdquo;. It&rsquo;s not commercial-grade software, but it solves my own problems just fine.<br>Non-negotiables for building PWAs#<br>My core lessons learned after iterating on this for a bit:<br>Offline-first: assume there&rsquo;s no internet connectivity, apps should load in fetch().catch(-> cache) only fires when you&rsquo;re truly offline; a slow network can still block for ~10s)<br>Simple hash-based updates: since we&rsquo;re offline-first, a background fetch for a version check is needed. Show a simple top banner when a new app version is available, it&rsquo;ll refresh the PWA and boom, app updated. Always serve from cache, refetch in the background<br>Ensure sufficient spacing from the top, for the iPhone notch/camera (unusable top space)<br>Add a simple PWA install prompt to each tool (I pulled mine out into pwa-install-prompt<br>Avoid iOS&rsquo;s &ldquo;copy to clipboard&rdquo; when not needed, by applying correct CSS<br>No webfonts<br>Lessons learned, as an agent skill#<br>Over the past few weeks I&rsquo;ve grown the CLAUDE.md of that repo into a full set of rules that every tool in it follows. I&rsquo;ve pulled them out into their own repo: github.com/mattiasgeniar/offline-first-pwa<br>It&rsquo;s an agent skill, so you can clone it into ~/.claude/skills/ and have Claude Code apply it to whatever you&rsquo;re building, or point any other AGENTS.md-reading tool at it. It&rsquo;s also just a checklist you can read. Service worker caching strategy, precaching, in-app update prompts, iOS home screen quirks, safe areas, and how to test any of it. Every rule in there is something I got wrong first.<br>The skill itself is AI-generated, distilled from the CLAUDE.md file that repo runs on. This post I wrote myself.

Also published on

Mastodon

Hacker News

Table of Contents

// stay in the loop<br>Follow along and new posts show up in your feed. RSS works too, if that's your thing.

// found this useful?<br>Share it with someone who'd appreciate it. A mention means a lot.

LinkedIn

Facebook

// keep reading<br>Deduplicating git worktrees on EXT4 with jdupes<br>Jul 24, 2026<br>Setting up a remote environment for agentic coding on a VPS<br>Jul 23, 2026<br>Merging multiple EPUBs into a single file for Amazon Kindle<br>Jul 12, 2026<br>What 1.8 million real website outages look like<br>Jun 29, 2026<br>// trusted website monitoring

Monitoring your site, done properly<br>Oh Dear is the monitoring platform I help build, trusted by global companies, major open-source projects and public-sector services. It keeps an eye on everything that quietly breaks: uptime, certificates, broken links, DNS and more. If this post was useful, it's worth a look.<br>Take a look at Oh Dear<br>&rarr;

&copy; 2008–2026 Mattias Geniar