This last week I have been working at converting my TeamPicker app to a progressive web app. This type of app, unlike traditional apps that you download from Google Play or Apple App Store, are completely web based. Users visit the app as a website in the browser, and are able to add the site to their homescreen as an app.
Don’t confuse them with bookmarks! Most mobile browsers allow you to add any website to your homescreen as a bookmark not an app. Progressive Web Apps have a dedicated icon, actually several at different resolutions, a service worker for offline on-device processing and platform specific functionality, and a manifest.json file that specifies what the service worker should cache.
Also as a part of this project, I tried out the next trending ai coding tool Cursor. The service worker is actually ai generated. Cursor was helpful in editing multiple files at once and for asking questions. This is the first time I’ve built a PWA so I asked a lot of questions. It’s not perfect though; it stumbles when solving problems that I would find extremely difficult. For example, I had an issues where the service worker was registered but adding the site to a homescreen would add a shortcut instead of installing an app. Cursor didn’t really know how to fix that. I think eventually it did, but definitely not very good at troubleshooting.
Safari Issues
So all I said about PWAs being Apps, not bookmarks, well Safari does it different(of course). In Safari, you do add it as a bookmark. And the icon mask is black instead of white. I still haven’t figured out how that can be fixed.
Leave a Reply