Using my social reader as a progressive web application

Jeremy Keith published an amazing article on how to install a progressive web application (PWA) on your phone. A PWA is a website that can technically be used as an application, as opposed to a regular website which is optimised only to be shown in a web browser. Jeremy's article is definitely worth a read if you want to install a progressive web application on your phone.

One itch I have had for a while is figuring out how to get my social reader to load as a PWA. I first started with an Apple Safari meta tag that indicates that a web application can run in full screen mode (the apple-mobile-web-app-capable meta tag). But, this only seemed to let me save a particular page as a PWA. When I saved my social reader to my home screen, the feed home loaded without any Safari components as I would have expected. When I tried to navigate to another page, the Safari navigation bar popped up at the top, making the site feel a bit clunky.

Jeremy's article showed how a site he has worked on, The Session, loads as a PWA. In his demo, I noticed that the Safari navigation bar did not appear as he navigated around web pages. The main difference between my social reader's PWA setup and The Session was that The Session had a web app manifest file. This manifest file includes various pieces of information that help mobile devices decide how to render a PWA.

I found an excellent web.dev tutorial on manifest.json files which showed what it should include. I copied the template from that page and modified it to use the same icon set and colour scheme as my social reader. Then, I added a link tag to my social reader's head element so that mobile browsers can discover the manifest.json. My social reader manifest.json file is available online to look at if you need inspiration.

After adding this manifest.json file, my social reader now looks like this:

As I navigate around pages, no native Safari elements pop up. I can seamlessly move between pages. This is perfect. I can use my social reader as if it were a native application on my phone. There is no need for me to use a framework like React Native to make a more "native" version of the social reader. Apple's PWA support works just fine for me. (I may or may not have previously been tempted to make a React Native version of my social reader!)

Apple's PWA support, as Jeremy touches on in his article, is not perfect. I wish there was clear guidance from Apple that told developers exactly how to make a PWA. The "Add to home screen" button should maybe be renamed to "Save as an app" for progressive web applications to make it clearer to people that what they are saving to their home screen is an application. This could be done by checking for the presence of a manifest.json file. Also, I would love to see Firefox include this button too. I have to keep going into Safari to save an app as a PWA on my home screen.

Overall, I am satisfied with my new setup. I now have a PWA that doesn't result in some Safari elements popping up that I don't want to see in my web application. I no longer have an itch to build a React Native version of my social reader, a task that would take a lot of time and require writing a completely separate version of my reader. I am excited to use my feed reader with this new setup.

Also posted on IndieNews.