Progressive Web Apps Part 2: Responsive And Progressive

In part 1 of our series on Progressive Web Apps, we discussed how a user might install your App on their device via either their web browser or the Microsoft Store. In part 2, we discuss the importance of responsiveness.

Responsive Design

Responsive design is not a new idea. It is sometimes described as “mobile friendly”, but that is only a part of the story. In reality “responsive” means that the experience that the user has of your App should adapt itself to the environment in which the App is running. You can try this with this blog article on your home computer!

If you are reading this article on a desktop with a nice big, modern monitor, then you are likely to see a view with this article in the centre and white space on either side and a complete menu at the top. Additionally you will be able to see “Categories” and “Latest Posts” short cuts on the right hand side of the article.

If you start to reduce the width of your web browsers window, you will see that eventually the complete menu disappears and the “Categories” and “Latest Posts” also vanish. Actually the menu has collapsed into a “hamburger” the menu in the top right corner as there is no longer enough space to display it all the way along the top. “Categories” and “Latest Posts” have also moved right to the bottom of the page and are now stacked vertically with the article instead of horizontally. The web page has “responded” to the diminishing horizontal width by reorganising the content into a different order. If you shrink the page down further you will see numerous other simple tricks such as shrinking images etc. The smaller views are the views that people reading this article on a mobile phone or tablet might see.

There is more to responsive design that just desktops and mobile though. As the world changes more rapidly, newer platforms for displaying the web are emerging. No-one can predict the future of technology with accuracy and attempting to build a “future-proof” Progressive Web App will be a frustrating and fruitless endeavour, but one should attempt to keep the underlying programming of an App as simple as possible to make it as easy as possible to adapt for future Augmented Reality, Wearable, Bio-Integrated etc platforms!

Progressive Enhancement

Some sources site that Progressive Web Apps should work on “any” web browser and progressive enhance themselves for browsers with more features. In reality, one should not take this literally! We don’t think that anyone in the modern world would expect your App to work on Internet Explorer 4 (a browser that was ceased about 20 years ago) for example. One of the first tasks to accomplish when building a Progressive Web App is to understand a little bit more about your users. What devices do they use? What operating systems? What web browsers? Combine this information with the “art of the possible” and you will get a good sense of a base set of browsers that you should aim to support with your Progressive Web App. In general, all other things being equal, we would typically recommend looking at the “evergreen” browsers (Edge, Chrome and Safari) on Windows 10, iOS (11 and 12) and Android (5+) as a good compromise between technology and population coverage. You can always add Internet Explorer 11 to that list, but the usage is very low and your investment in keeping it supported is unlikely to yield a good return. Similarly, Firefox has a diminishing user base and we would not recommend making special efforts in supporting it.

An example of a practical Progressive Enhancement that you might make in your App is syncing of data in the background. Background syncing of data for your Progressive Web App is not widely supported in different browsers (only Chrome has good support at the moment), but it can improved the perceived response times for your App. If your App contains some commonly used data that changes infrequently, you can use background sync to download this data silently whilst the user is performing other tasks in your App. Let’s say that you have a large address book in your App. When your App starts, the address book downloads and syncs with your current data in the background. Whilst this is happening, the user wanders around the App performing some other tasks. When the user then wants to find an address, the finder function in your App can instantly search it’s local copy of the address book. If the browser does not have background data sync as a feature, then the user can perform all the same actions, but when they come to find an address, the App must contact a web service to either download or query the data resulting in a slower, but still acceptable, experience.

Conclusion

The jury is still out on Progressive Enhancement in general. It may prove more economically viable to simply exclude browsers from your App rather than trying to provide an experience that works on “all” browsers. This is particularly true when your organisation has more control over the target platform for your Progressive Web App. That being said, progressively enhancing your web App is a great idea as long as it remains economically viable.

If you are interested in McKenna Consultants developing a Progressive Web App for your organisation, please fill out the contact form below.

 

Nick McKenna
Nick McKenna is a (polymath) computer programmer and scaled Agile consultant. Nick has been a professional programmer for over 20 years and an Agile guru for nearly as long! Nick's specialities include progressive web app development, mobile app development, the Internet Of Things, Azure cloud development, systems integration, Scaled Agile Framework, Scrum, Lean, LeSS, Scrum At Scale and much much more.