Iterate faster with PWAs

If you are a person from the startup world and tried out products, you might be aware of the terms - Prototype, Minimum Viable Product (MVP) and Product/Market Fit (PMF). While MVP is more famous as a jargoan than PMF, if you have not heard of it, I strongly recommend you read about it - even if your role is not aligned to the Product Line (Product Owner, Product Manager, etc).

It takes a lot of time and effort in maturing a product from a prototype to MVP stage to PMF and Progressive Web Apps (PWAs) are here to reduce the design and development time in your attempts in testing the product as a whole or a new feature of the product. While there are a number of factors in getting a product or a new feature from someones brain to implementing it and finally marketing and sales of the product/feature, PWAs deinitely help in reducing the implementation cost, especially on the User Interface of your product.

Given the situation a few years ago, the team thinking of building a new prototype or launching a new product had to consider the fact of whether they should build a desktop only web app or a responsive web app or a mobile app. Again when the thought of a web app only comes to mind to keep development costs low, there is a worry of missing features that mobile apps provide over traditional websites like push notifications, offline usage, accessing device hardware, etc And when your mind inclines towards a mobile app, the next set of questions are a) how many users you lose who only use such apps on desktop? b) whether you should build native Android and iOS apps or build a hybrid app, for eg using Ionic or Sencha which works on Android and iOS.

But today, PWAs are here to simplify this problem.

Now, what are Progressive Web Apps (PWAs) and how do they simplify this problem?

Put in a single line: A Progressive Web App uses modern web capabilities to deliver an app-like user experience

PWAs are the next err, the current big thing happening in the Web. These should not be confused with the traditional mobile web apps that are designed to work only on mobile and traditonally named with the sub-domain m..

PWAs are an outcome of new frameworks and design concepts by leading companies like Twitter, Google and others.

Features of PWAs:

• Work for every user, regardless of the device or browser. This does not mean you re-direct users to different sub-domains. It just means that there is a single app code which works on different devices and browsers.

They are responsive, the web components re-align and fit on different sizes of desktop, tablet and mobile. As an example, you can use Twitter Bootstrap framework to meet this requirement of being responsive.

• With the help of Service Workers background content updating and caching features, they can be made to work offline or in areas of low internet speed.

• They have the ability to recieve offline Push Notifications through Service Workers, an ability that traditionally only mobile apps had. This feature really helps in re-engaging the audience and also notify of status changes in cases where there is a Workflow. As an example, you can use Googles Firebase Cloud Messaging (FCM) in combination with a browsers Service Worker to meet this requirement.

• As they are web apps, you can apply SEO techniques for them, get listed in search results and get discovered by new users.

• They can be shared via a URL and users need not install on their device to access it. Hence the friction of should I install this app now goes off. However for those who wish to install, they can be installed on the Home Screen of a mobile phone.

This is an important aspect to consider when testing MVPs or the market fitment. You loose a lot of users due to this friction of installation of a mobile app. With a URL , they can atleast quickly check.

• Updates without the hassle of Play Store or App Store. Its a web app that does not go through the play stores, so you can add new features in the background and users get it the next time they use the app.

So with a PWA, you can target users across geographies using different types of devices with a single app. You dont need to worry about building and maintaining two or three different apps for some featues which traditional web apps did not have. You can just build your product with one app and add new features to just one app reducing the development time and cost. Until you get to a stage where you think you have reached PMF, you can quickly run thorugh your build-learn-improve iterations with a PWA.

Having talked about the positives, there are some disadvantages with PWAs. They are still not at a stage that they can access all the device features like a mobile app. Also, some of the features of PWAs as mentioned above are browser dependant. There is no Service Worker support for Safari, but service worker features for PWAs work on Google Chrome browser installed on a Mac. Apple developers have already announced that they are building Service Worker support for Safari, so that restriction is going to go away soon.

These thoughts are based on my own experience in learning web development, played around with a web-app (using Flask framework) which is responsive, search engine optimised and has the ability to receive mobile app-style push notifications on mobiles. But yet to try out the caching features.

Please feel free to share your views / experiences with PWAs.

About the author

Vishnu Vardhan Chikoti is a co-author for the book "Hands-on Site Reliability Engineering". He is a technology leader with diverse experience in the areas of Application and Database design and development, Micro-services & Micro-frontends, DevOps, Site Reliability Engineering and Machine Learning.