To hype or not to hype? That is the question.
PWA (as in Possible Wayout from Apps) are a huge hype, for sure. But…
…is now the right time to adopt a technology stack that will last no more than one or two years? Does it make sense to invest time and money learning dedicated and platform-specific knowledge in order to develop native applications (unless your app requires specific features or performance expectations)?
“You are too concerned with what was and what will be.” (Oogway – Kung Fu Panda)
Believe it or not, pandas are still there. This time, however, they are following their own way of Kung Fu, and quoting Google they are finally taking the right vitamins (oh! I forgot to say that by “pandas” I really mean the good old web pages, and the very browser you are staring at).
Simply put: what about adopting existing and emerging web application patterns to save time and money while delivering nonetheless quality services and apps?
That is, basically, a Progressive Web App: a future-proof bridge between traditional native apps and web applications.
“Fascinating!” (Mr. Spock)
Ok, let’s get serious. Turtles, pandas, and Star Trek characters sit down there in silence (for a while).
Progressive Web Apps: a new hope
Disclaimer: technical jargon following.
PWAs are, at their core, nothing but responsive websites on steroids. Websites that can progressively enhance their features depending on the browser’s capabilities. It’s all about making the most out of the last improvements in web browsers to create a better user experience. A web app which can leverage the edge of available technologies, to deliver a native app like experience on a mobile device.
No magic or esoteric technologies here, apart a few experimental javascript API. Technically speaking a PWA simply is:
1- any web site/application served through HTTPS
2- with a valid app manifest, and
3- a registered service worker which implements a fetch event handler (with a minimum support for caching/offline)
Now, since a progressive web app is nothing but a web application, there is no need for developers to distribute a PWA via proprietary repositories such as iTunes or Google Play. This is certainly a win-win for you and your users. In fact, no one is looking for your app on a store unless you are Facebook or Google Maps. Also, your users do not have to install yet another beefy app on their device: they will simply navigate to your webapp using their browser (with the option of an icon on the home screen – more on that later).
Sure, to develop a good and working PWA requires a lot of know-how. The reward though is that you are able to deliver an accessible, platform independent, no-install, no-updates, engaging app which your users are happier with. Luckily, publishing and promoting a PWA is as it is for any other web page I.e. a good SEO to target traffic to your app.
Intrigued?
“Curiosity is the essence of our existence.” (Gene Cernan)
Wait, but… why?
Following Google’s advice, we can sum up an app in terms of capabilities and reach.
Capability is at its best in native apps: they are fast, reliable, easily accessible from the home screen, and get full access to the device hardware. On the contrary, websites are ubiquitous, searchable, not controlled by a single private company, always up-to-date (no need to download or update from a store), and widely accessible by anyone anywhere.
PWAs sit at the intersection of the best features of both worlds:
Too good to be true? Kind of… Let’s recall the points listed in the previous section, and see how all that is possible.
HTTPS
HTTPS, using an SSL certificate, keeps internet more secure.
A key element of a PWA is a registered service worker (see below). In essence, a worker is code that acts as a proxy between your PWA and the requests made by your PWA to the external world. Therefore your PWA needs a layer of security to prevent snooping or spoofing as well as to ensure no tampering of exchanged content.
Moreover, a PWA can access many APIs (camera, file system, payments…). Again, you need HTTPS to keep the information you are sharing on the web encrypted and safe.
App manifest
The manifest is a structured json file which collects all the metadata required by your PWA to find information such as the PWA’s name, icons, colours and how to launch it (fullscreen, standalone, etc.). It means the manifest gives you the ability to install a PWA’s icon on the device home screen, exactly like a native app installed on the device. Nevertheless, the PWA is not installed on the device, rather it is served by the browser though in a way that enhances the UX compared to a traditional website.
A registered service worker
A worker is javascript code that runs in background, in a dedicated thread. It performs several tasks including
• intercept and preprocess network requests, acting as “the man in the middle” between your PWA and the external world
• handle events, for instance push notifications
• help caching static resources to allow for offline usage (which directly relates to increased performance)
The result is a fast – through local prefetching and caching – and reliable webapp, resilient to network issues and capable to work offline, sync later, and always serving the most recent content.
“It’s the ship that made the Kessel Run in less than 12 parsecs.” (Han Solo)
In addition the webapp is engaging as it handles events such as push notifications to prompt your users.
“Remember, your focus determines your reality.” (Qui-Gon Jinn)
In a nutshell
To build a PWA… take all the good stuff of a webapp and plug it into the latest javascript and browser capabilities to deliver an awesome experience to your users, pretty close to a native one…
…directly in their browser…
…with progressive enhancements coming from the ever growing capabilities of modern browsers (i.e. the more advanced is the browser the more a PWA can deliver)…
…at a lower development cost (an application that is a website and a multiplatform app at the same time)…
…wow!
The future? Maybe. For sure a promising opportunity.
“Skadoosh” (Po – Kung Fu Panda)
