Rediscovering Progressive Web Apps (PWA)
Over the last years, I forget about something called Progressive Web Apps (PWA) until one day I added to my Home Screen a bookmark to Homebridge, and, believe me, or not, I do not add bookmarks that way very often.
When I added this bookmark to my Home Screen on iOS I noticed, that it looks unusual. The icon was like a native app. When I click on the icon it didn’t open inside Safari like other bookmarks but it run on full screen like a normal native app.
Of course, it was still Safari in the background but highly limited to the scope of that single website, that it feels like a native. It certainly can be confused with an app.
Recently the timeline on the Twitter app start annoying me to such an extent, that I found out that the website serves me with better, more relevant and not repeatable content.
Without resigning from Twitter App due to integrated Share Sheet functionality, I just added a bookmark to my Home Screen.
To my surprise, the bookmark looks exactly like an icon of an app. It also behaves like an app. When you click on it you got a full-screen experience.
As the website is highly mobile friendly, all looks great.
To my surprise, I got a bit more options available in the left-side menu than in an app. Whoever prepared the mobile version of its website did a great job. They even think, in their design approach, about people who will be using only this method of accessing their platform.
In a bookmark, you may feel like in a normal app. You got even handy Display settings where you can customise Font Size, Colour and Background. From the menu you can even turn on the Data saver and access other settings that are not available in an app, or are, but hidden to such an extent, that they are hard to find.
From just a single screenshot, would you be able to see a difference? I doubt.
I have customised font size, so I see the difference now, but it’s not as clear as you think.
Oh yes, you will see the difference on launch. You will be greeted with a full-screen Twitter logo as in an app. On the web version, it will be a blue logo on white, when the app got its way around.
Before you will see your “refreshed” timeline, the app is serving you with what was the last time preserved in a cache. On a web version (PWA), you will see a spinning wheel (even on a fast connection) as you need to be authenticated first in the background and then your timeline needs to load and refresh. When you are offline you will simply see a Something went wrong message.
Despite that, I have been using this way of accessing Twitter for some time and I like it. I like it to such an extent that I decided to rediscover again a Progressive Web App approach – the thing that I thought was long forgotten (how much wrong I was!).
After Twitter, I decided to see what else can be done that way.
On daily basis, I am accessing Hugo Discourse. I am doing that mostly through the browser, however recently I found out, that there is an app for that called Discourse Hub.
It’s great that there is an app where you can add multiple Discourse-based forums to access, but when accessing just one, this requires you “one step” too much. You need to open an app and click from the list of which Discourse you want to access.
On bookmark in Safari, I just going and I am there.
Same way as with Twitter, and as an alternative to the Discourse Hub app, I added a bookmark to my Home Screen.
To my surprise, this discourse is a Progressive Web App as well nicely opening on full screen and limiting navigations to just forward and backward buttons on the bottom (which are not working perfectly).
The icon (with black fill around the hexagon logo) is a bit that could be improved, but an overall good mobile experience.
I got some websites the majority of users (over 80%) accessing it from the desktop but got as well others, where close to 100% of users are on mobile.
When your website is ready for mobile, why not go a step further and not do a Simple implementation of PWA on a website with Mobile First Design approach.
