Why Build a Progressive Web App?
If an app were a morning coffee cup, we’d probably prefer a PWA.
We want our drink to be good enough and readily available. Homemade coffee tastes nice but takes time and money (just as native applications). The instant coffee on the go is not costly, but it is not that good and not always instant (like web apps). A progressive web app feels like a gourmet coffee served at the drive-through. The next time you pass by, you will get a cup of your favorite from the Netherlands with a special discount.
With PAs, developers are able to achieve two goals at once. On the one hand, they save efforts, as progressive apps are lightweight, fast to create, and more or less easy to maintain. On the other hand, they deliver a high-quality experience and engage users. PWAs live in the browser window, but later prompt people to install them.
However, had the things be just that bright, every company would create a progressive web app. In reality, innovation has its pros and cons and does not suit everyone. So, let’s see how it works and who are the early adopters.
Progressive web app features and how they came to be
Until 2015, there was a controversy between the web and native apps. The former were fast to build and well-performing on the web, but slow to load and less compatible with the variety of devices. The latter took away the extra time of hired specialists and memory of the consumers’ phones but coped with more functions in less time.
Hybrid applications and Facebook Instant Articles have been a kind of an answer to that controversy, but they still lacked many important functions. For example, hybrid functionality does not work ideally with your phone camera, microphone, and so on. Hybrid app solutions can’t serve when the gadget is out of network, and they don’t have the technical ways to re-engage users.
In June 2015, a Google engineer Alex Russel invented the concept of progressive growth from browser tabs to app-like screen residents. The product was fast, safe, available offline, and highly searchable. These progressive web app’s features help to deal with consumer traction. “First download, then use” has turned into “Let’s see how good it is, so maybe in time it can live on my home screen.”
There are more reasons why Russel’s solution is convenient for customers:
- It is more reliable than native apps due to offline performance and data savings. The new Google standard called “service worker” helps eliminate data waste. Konga, for example, managed to save 63% on the page load time and 8% of the first transaction time. The speed is also incredible, even out of network.
- It runs on HTTPS, which results in a higher level of security.
- Responsive design makes for a fairly pleasant UI/UX, though backward navigation remains a problem.
- No updating or refreshing is needed.
- Less phone memory is necessary both for online use and installation.
- Though there is still no access to the system settings, flashlight, telephony, browser bookmarks, and contact list, PWAs are well-integrated with most of the up-to-date mobile hardware. The ability to be linkable with other apps through intents is yet to come (see more here)
There are also reasons that make progressive web app development attractive to the industry leaders like AliExpress, AirBerlin, Flipkart Lite, and Dev.Opera (other examples are available at the special resource):
- Push notifications motivate users to return (according to Localytics, the average retention with push messaging is 88% compared to the one without it).
- The product has a high potential to be discovered, and there is no need to pay fees to any stores. Some bloggers are optimistically calling this ‘the future of SEO.’
- As the interface is close to a native-like, CPA is likely to be favorable.
The table below summarizes the characteristics of native, web, native+web, and progressive web apps. Examples are given above the columns.
|Costs & Resources|
|Cost to develop||high||moderate||low||low|
|Deployment and maintenance||high||moderate||low||low|
|Time to develop||much||less||less||less|
|Separate codebase for each platform/ Version segmentation||yes||sometimes||no||no|
|Hardware access||yes||yes but not ideal||yes but not ideal||yes|
|Deep linking when sharing||yes||no||no||no|
|Loading on homescreen||yes||no||no||yes|
|Dependence on the network||no||yes||yes||no|
|Availability for iOS&Android||yes||yes||yes||limited|
|App stores: benefits||yes||yes||no||no|
|App stores: restrictions||yes||yes||no||yes|
Along with its benefits, the innovation has its limitations:
- It is not available for iOS. Thanks to the Cordova plugin, it is possible to reach a kind of a compromise with this platform. It has been suggested that the ideal way to get through this is to work on the PWA and iOS at once.
- Cross-browser features may be out of work. Currently, the technology is only supported by Google Chrome.
- The old consumption patterns will stand in the way of searching your URL on the internet.
Should you build a progressive web app?
To sum up, the answer to this question depends on how the core business needs are defined:
- How often will the clients use mobile? If less than once a day, an adaptive or responsive website could serve better.
- Should the audience be as wide as possible? If reaching Apple users is critical, reconsider the idea.
- Are there any crucial features that need cross-browser compatibility or access to special hardware? If so, we’d recommend calculating the price of possible alternatives.
Before the start
Google has a minimum starter kit and a ‘perfectionist’s guide’ for those who are willing to experiment with the new format. In short, here is what your developers need to research to make a progressive web app:
- HTTPS server setup;
- registered service worker (a special registered script compatible with HTTPS only, check browser support here or on the screenshot above);
- the additional file referred to as the Web App Manifest (more on the issue);
- checkup for mixed page content.
It may also be useful to browse through the samples of different native/web/mixed solutions.
May the progress be with you!