I hope this will be the year of Progressive Web Apps (PWAs)
The modern web browser is a neat tool. You can access the world’s knowledge and open up a variety of different websites in horizontal tabs. You could open a few, or a few dozen, or a few hundred.
To help focus, I’ve been installing progressive web apps: turning a browser tab into something that looks and works like a native app. You get the best of both worlds: a lightweight piece of software that’s easy to develop in a web sandbox, and a dedicated window for a website that feels like a native app.
This isn’t just some fanciful idea that lives in the periphery of tech. A bunch of popular websites have been building them, and the installation process is trivial. They’ll show up in your list of apps alongside native apps. They appear in the task bar like a native app.
Here’s a few that I’ve installed:
- Mastodon
- Photopea
- Spotify
- Google Maps
- Google Photos
- YouTube TV
I’ll note here that I’m an employee of Google, but also a consumer of their products. Being able to keep my maps in a separate window makes it easy to launch and return to it quickly. I’d like to see more websites like Feedly and Discord support PWAs so that I don’t lose them in an assortment of tabs.
Advantages
Why is a PWA better? Over the years I’ve become less of a fan of downloading native apps. I roll my eyes when I buy a ticket for a concert and need to download and install a chunk of software just for one night. Why should my phone put so much computational effort just to display a QR code. It seems silly when I could just load it emphemerally when needed ad automatically discarded afterwards.
The Google Play Store has, for years, been suggesting users to uninstall some of their apps. Since each one will take up 50MB or more, it just takes up space on low-storage devices. Often they’ll consume hundreds of megabytes just to do nothing. As these apps tend to preload everything rather than progressively cache resources as needed, storage bloat has become a growing problem. About once a month I have to uninstall a bunch of apps just so I can take more photos.
I also don’t enjoy having to update apps all the time. Notifications come every day that some software requires me taking time to download some patch and it disrupts my flow. Websites meanwhile load anew whenever necessary without requiring a time-consuming process.
Once it’s installed, what was once a website gets capabilities that do everything you’d expect from a native app.
What’s better is that uninstalling is much easier than having to launch a multi-page wizard. The website will still be a few keys away in a fresh tab.
The best of native apps
Today web apps can live alongside native apps without you having to realize the difference.
Notifications work on any device, showing up in the regular notification shade.
Photopea adds protocol handlers for various image files. When I want to open an image, it goes to Photopea instead of Photoshop. In this way it offers a fantastic open source alternative to anyone who wants to do some basic image modification. Modern browser APIs let you save edits directly to the original file.
They can also integrate into system share capabilities, allowing you to send an interesting article straight to Twitter.
That being said, I do think there are places where the user experience could be improved. I uninstalled the Reddit PWA because it didn’t work right when clicking links. PWAs do not support loading multiple internal tabs. So when I click on an article it jumps to a browser to load. That’s not terrible, but it also happens when I click on other Reddit pages like my notifications.
This is something that hasn’t been resolved yet, but is an active area of prototyping at the edge of browser development. Once this is available, it should be easier to separate out different social media logically, while also hiding them when I should be paying attention to something else.
Creating new PWAs
Lest we believe that building a PWA is relegated to big companies, I want to present my own work here. In Pokémon Scarlet and Violet, there is a minigame where you build sandwiches. The kind of sandwich you create and consume will give you different effects that temporarily affect gameplay.
What ingredients do what? The number of combinations quickly becomes impossible to memorize. Thankfully, someone created an open source Sandwich Simulator as a web app.
This website works great on my PC, but when I’m playing the game I want a quick reference on my phone. I could keep it in my mobile browser, but it quickly gets lost with many other topics. I want to be able to stick it on my homepage, and so I took action.
I sent the original developer a pull request that added a barebones service worker. It admittedly does nothing just exist. A change to the main page will register this service worker.
The second part that a PWA needs is a manifest file. This is essentially metadata that describes the app and what it can do once installed. That file already existed, so the pull request was fairly simple.
Now once I load the website on my phone or my PC, I get the option to install it. This adds the website to my homescreen and subsequent launches open in a dedicated window. I can quickly flip between it and other apps.
A simple pull request provides an outsized impact by making the app much easier to access. I use it frequently and having it right on my homescreen is wonderful.
The future of the web
I’m bullish on the web, and prefer developing on it compared to other platforms. The ability to build one codebase that runs anywhere is great for developer productivity. Plenty of developer tools already exist which make it easy to build and style UI, and more are created all the time.
The web becomes a great platform when you consider its other benefits. Deployment is simple, often requiring no cost to get started. You don’t need approval through an app store. The community is wide, giving newcomers the ability to find answers to lots of common questions.
I’m excited to see what is next. With regards to Google Chrome and Chromium, their Fugu API tracker are working on improvements to things like file systems and gamepads. This will allow for more complex, and better, applications to be built with nothing more than a bit of HTML and JavaScript.
The future of the web looks bright.
