Authored by Akhil Pillai, Principal Engineer, WaveMaker, Inc
The web has been a unique platform to develop applications for decades. Of late, platform-specific applications have created a lot of buzz, mainly owing to their reliability and extensive features. Some of them work offline, some have hardware capabilities while some of them can notify users of important updates. PWAs or Progressive Web Applications are the web’s newest attempt at matching the level of reliability and richness that these native applications offer.
Progressive Web Apps are just plain old web applications with newer capabilities enabled on modern browsers using progressive enhancement. That is, even if the modern features are not supported by the browser, the user still gets the core experience of a web app. PWAs make use of web-platform features like service workers and manifests to give users an experience on par with native apps.
Some of the features that PWAs offer are:
PWAs allow users to install them through prompts that are either on the browser or implemented by the developer. Once installed, they mimic native apps that are available on home screens, docks, or taskbars. The application opens up as a different window rather than as a tab in a browser and is shown as part of the app switcher, thus tightly integrating it with the platform.
Speed is crucial to keep the user interested and reduce bounce rates. Google's research shows that an increase in page load times from 1 to 10 seconds leads to a 123% increase in bounce rates. The capability of PWAs to cache resources and load them from the cache greatly increases speed and performance. This not only helps with load times but also helps when the network is slow or there is no network at all. This means even when offline you have access to your favorite application unless network connections are indispensable.
Being a web application, PWAs can be easily shared using URLs. Anybody with a URL can install a PWA on any platform with a supported browser. This greatly reduces the effort it takes to distribute an app through an app store. Managing versions are made easy too with auto-updates or prompted updates that allow partial updates. With this feature, gone are the days when we had to download entire applications for just a small change in text.
One of the biggest flexes that native applications had over web applications is the ability to push updates to the user. Though web applications could show notifications, they needed to be running in a window to do so. PWAs have overcome this hurdle through service workers. A service worker is a piece of code that runs in the background even after the web application is closed by the user. This allows the web application to run background tasks and receive notifications. This makes it easy to keep the user engaged even when the application is not running.
PWAs are inherently secure. The service worker, which is the core part of a PWA, is only activated if the connection is secure. If the connection is not established over a secure HTTPS protocol, PWAs behave just like normal web applications.
Though these are some of the main features that PWAs offer, there is much more to them like background sync and hardware communication among others.
Most of the features directly or indirectly affect the way users interact with web applications. This in turn drives business decisions. For example, giving a native feel to a web application is made easier with PWA. This allows businesses to ship applications faster while skipping app stores and their complex policies. PWAs while reducing development effort also reduce the associated development cost. Faster loading times give a big boost to customer retention while notification capabilities keep the user engaged.
In terms of data supporting these tall claims, let's take the case of Twitter. Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate. Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users. Hulu replaced their platform-specific desktop experience with a Progressive Web App and saw a 27% increase in return visits. As they say, numbers don't lie. PWAs are definitely influencing customer interaction with applications.
PWAs combine the native feel of platform-specific applications with the dynamic nature of web applications. But how do we implement all these features? Using vanilla JavaScript and HTML to implement such rich features would take a lot of time and effort. Of course, libraries like Angular and Workbox can help but WaveMaker goes a step further. With the latest 10.9 release, PWA is officially in its beta stage on WaveMaker. All the user has to do is enable an ‘app.pwa.enabled' flag in the profile they use for production. Detailed instructions can be found here.
WaveMaker uses Angular’s built-in support for PWA and throws in a bit of its own magic to enable these features. As soon as the flag is enabled, two of the most prominent features are baked right into the WaveMaker web applications - installability and caching. Notifications are also enabled by default that can be made to work with a few app-specific changes. WaveMaker also allows the user to choose a custom icon for the installable app. What better than having your brand image in your user’s app drawer!
At WaveMaker we realize that continuous improvement and innovation is the path to creating customer satisfaction. As of now, PWA features that are in the beta stage are subject to continuous improvement. The way forward is to enhance features like notifications and to gradually add features dictated by customer interests.
PWAs are here to stay and WaveMaker will help your business embrace the technology with as little code as possible.
Watch this video to know more.
Akhil Pillai is a full-stack developer with more than 10 years of experience in software development. He is a technology enthusiast and a polyglot with a soft spot for machine learning. In his free time, he loves to read technical content and listen to music.
