About

I think progressive web apps are cool and have a lot of potential, even if platform owners don't provide much support. Still, I wanted a simple resource that would examine a website to see if it was a PWA and show the data that's configured, as well as basics on how to install PWAs and what kind of real support exists for them across various platforms.

I also wanted to do this making heavy use of AI coding tools, as a way to try it out on something simple and innocuous (as I try to process the stark realization of the sea change happening in computer programming). There are notes on that below if you are interested (honestly, I find "golly gee whiz look at what Claude Code did!" blog posts super tedious, but in case you want my thoughts, they are below).

Of note, the content on this site is all authored by me by hand. The installation info is as up-to-date as I can make it - there is a lot of misinformation out there, but I tried these on as many platforms as I could. Do note that for Linux, there could be a lot more ways to set up a PWA than are listed. Further, the support page is highly opinionated, but I think it paints a clear picture of just how much more work platforms need to do to support PWAs. Sweet solution, indeed!

Golly Gee Whiz, Look at What Claude Code Can Do Everyone! ✨ ✨ ✨

As I mentioned, I heavily used Claude Code to create this site. It wrote the vast majority of the code, CSS, and markup. I wrote all the content.

It is odd to have deployed a piece of software that I "wrote" but that I don't really know very well, since I only generated the code and didn't write it by hand. The CLAUDE.md file is below, and following that are some experience reports.

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What This Repo Is

pwa.supportis a web-app that allows a visitor to paste a URL and get back information about the PWA/Web Manifest support at that site. This will allow the visitor to:

  • sanity check sites they are building to see if they are correct according to a spec
  • Provide help in setting up an existing public site as a PWA on the visitor's system.

Architecture

  • Ignore Dockerfile.dx, docker-compose.dx.yml, and all of dx/. They are irrelevant to this project and should not be touched or read ever.
  • The front-end should use HTML Web Components AKA Custom Elements
  • There should be no back-end, this should all run in the browser where possible.

Web Components

  • Prefer Light DOM / Avoid shadow DOM
  • Avoid HTML generation - decorate standard HTML
  • Prefer attributes for state/status over classes
  • Avoid content in JavaScript

CSS

  • Avoid content in CSS
  • Use modern features such as nesting and other stuff that is in Baseline

HTML

  • Prefer a semantic element over a divwhere possible
  • Add attributes only to address a specific need - don't just add attributes because it seems like a good idea
  • Avoid adding CSS classes to identify semantic information. Avoid data-
    • attributes in favor of custom elements/attributes.
  • Prefer a custom element over a divor spanunless the div/spanis purely
    • for styling. For example, instead of <span class="property-value">use <pwa-manifest-property-value>.

JavaScript Code

  • Classes are preferred over functions
  • Private members are preferred over underscore-prefixed names
  • variable names should not use abbreviations
  • no semi-colons unless required
  • prefer double quotes for strings

Notes

  • Do not add Co-Authored-By trailers to git commits

My Intrinsic Motivation was Only On Outcomes

The entire experience felt like project or product managing at a very fine level of detail. I almost never made any substantive changes myself. I tried to ask it to do everything. In a few cases it was easier to make a small tweak than find a way to phrase the request.

I did ask for developer-focused things like tests and other checks, but whenever I thought about this and thought about building it, I was almost entirely focused on how it worked or what it did.

The Code Feels Messy, but I Can't Really Explain Why That Matters

This is definitely not how I would've structured this project, but it's hard to argue with what it did, since it seems capable of making whatever changes I ask for. As an example, there are five HTML files, each having a ton of duplication (e.g. in the head). Normally, I'd factor that out, but since the AI can correctly make changes across all the files, there doesn't seem much point in creating an abstraction that's just for me.

The site's main nav "should" be a parameterized include, but it's just duplicated. Whenever I added or changed pages, the AI updated all the copies. I eventually asked it to write a test that the navs were indeed the same. It's hard to argue DRY applies here.

The JavaScript code itself is not consistent nor well-organized. Again, I don't think it matters that much, but even now, looking at it to write this, I see things I'm going to ask it to change. It just bothers me knowing that half of the behavior is modeled with custom elements and half is not. But this doesn't really affect the behavior of the app/site.

This App is So Simple, It's Hard to Draw a Conclusion

This app is extremely simple. There's no back-end. It's almost entirely text. So the ease with which it was produced is not, at least in my mind, an indicator of the general applicability of AI coding tools.

I Must Admit It Was Mostly Fun

There was some frustration at first, but generally, I enjoyed the process of using the AI to generate the code for this app. I really did like not having to think about styling, JS, HTML, etc. and just focusing on what I wanted it to do. It felt like a lot of friction was removed.

I chose this style of app as a test because I really don't enjoy UI design or front-end coding and I despise Playwright. This app is so small and niche that it would make no sense to hire a professional to do it. I'm sure a professional would do a better job at UI design, but I just wanted the app to exist and not totally suck. I think I've achieved that.

I do plan to use this style of coding on something more substantial to see how it works. While I can tolerate messy front-end JavaScript (to a point), an un-normalized database filled with nullable fields is right out and I won't stand for it. At least that's what I'm telling myself.