Until recently, businesses wanting to establish their footing in the mobile market faced a high-level choice that involved three options.
First, there were native apps written in Objective-C or Java. They traditionally offer the most in terms of a seamless user experience, capabilities and performance. But developing these apps comes with a hefty price tag, because of the need to maintain multiple code bases and have multiple platform-specific developer teams.
On the other end of the spectrum, there were responsive websites, which have low barriers to entry but limited offline capabilities and offer an overall less “mobile-like” feel.
More often than not, the vast majority of typical mobile project requirements are met by a plain website. It is only the “nice to have” features like push notifications, connection resiliency or the ability to pin an app to the home screen that force chief technology officers and architects to look into hybrid alternatives. On one side of the equation, the app-like niceties increase user engagement; on the other side, there are still some strings attached, such as the inability to use anything other than Apple hardware for iOS compiling or the need to publish the apps via app stores and pay for corresponding developer accounts.
Progressive Web Apps: Web Apps on Steroids
This is where Progressive Web Apps (PWA) enter the scene. The main idea behind PWAs is simple: build a website that uses modern web capabilities to behave more like an app. Think of a web app on steroids with the idea of “progressive enhancement” built into its DNA — it will run on every device plus enable a progressively better user experience if the browser can support it.
Here are some features that qualify a web app for entry into the PWA league:
- App-like: Content displays within an app shell covering the full screen, where the shell is typically persisted on the device and the rest is available online.
- Installable: Users are prompted to pin the app on their home screens without bothering to visit an app store, wait for a lengthy download process or approve permissions.
- Resilient: The app is tolerant of bad network conditions and is able to work partially offline by means of skillful caching strategies.
- Alert: The app is capable of synchronizing in the background and displaying push notifications.
- Discoverable: Search engines can find and index the app’s content, which is also easily shareable by means of URLs.
Related Article: Why CMOs Should Embrace Mobile App Development
At Your Service
By acting outside the context of a particular HTML document and making use of the new Cache API (not to be confused with the older HTML 5 Application Cache API, which was plagued by problems) service workers are natural candidates for implementing techniques to turn a user’s offline experience from a mess to success. As a bonus, they can also handle push notifications and even provide powerful capabilities like load balancing. For a look at some practical examples of service workers, see the Service Worker Cookbook, which is maintained by Mozilla.
The other ingredient of a PWA is a web app manifest, a simple JSON file that describes the app’s appearance on the home screen and its launching behavior. And finally, a PWA requires content to be served safely over HTTPS to prevent eavesdropping and man-in-the-middle attacks.
Related Article: Is a Faster Web on the Horizon With Web Assembly?
PWAs Already Have a Critical Mass of Browser Support
PWAs have a foot firmly in the mobile door.
Browser support for PWAs is fairly well established. Google and Mozilla pioneered adoption shortly after the first public draft of the service worker specification was released in mid-2014. Microsoft Edge followed suit, and the functionality was enabled by default with the Windows update of April 2018. Finally, with the release of Safari 11.1, it is safe to say that a critical mass of PWA support has been reached. Remaining gaps include the fact that support for background sync API is available only in Chrome for now and support for the web app manifest is missing in Firefox — but the functionality of the latter can be worked around with a proprietary meta tag.
The Business Benefits of PWAs
Case studies have shown that PWA enhancements to existing mobile websites are associated with an increase in conversion rates for new users, an increase in time spent on the web site and a decrease in bounce rate.
Because developing and deploying a web application is a relatively quick and easy process (compared to developing a native solution), and given the ubiquity of web development talent, PWAs will eat into the space previously occupied by hybrid and native apps.
Learn how you can join our contributor community.