Three years after they were introduced, Progressive web apps (PWAs) are still popular and in trend. Word is that Progressive web apps may be the thing to push the mobile web forward and bring parity to the web and native apps – in the process assisting developers to reach more users beyond the confines of app stores.
The entire idea is centred towards making users’ web experience simpler, more reliable and enjoyable, irrespective of the conditions. This is all great, but what are Progressive apps exactly and what do they offer? Let’s find out.
What are Progressive web apps?
“A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to servers, accessible through URLs, and indexed by search engines”- Ionic Framework.
Like the aforementioned, apps need to meet a few requirements to be considered a progressive web app. The following can be regarded as the attributes your app must possess to distinguish it as a PWA from a regular app –
Service Workers
Service workers act as proxy servers between the browser and an app and network. They are incredibly powerful but just as confusing. They are the technology behind the PWAs; they power push notifications, offline functionality, content caching, background content updating and much more.
Since everyone is almost always connected, offline functionality for the app may not sound important, but the point is not about simply being available offline but about performing well in any network conditions. Low signal or slow speed is not that uncommon and PWAs that are properly designed with registered Service Workers guarantee smooth navigation even under bad conditions.
Service worker at a high level is a worker script. It works out of sight; is not dependent on the app, and works in reaction to events like push notifications, network requests, connectivity changes and more.
Install-ability and app manifest
In the beginning, mobile web apps were not installed like an app to the home screen. Of course, the user could ‘pin’ the mobile website to their home screen on Android or iOS, but the experience was mediocre at best. Furthermore, the app still didn’t come with the local features that are expected of native apps.
This, however, is changing. Now, Chrome on Android supports installing web apps to the home screen with a native install banner- similar to the native app banners that we are used to.
Meanwhile, a manifest is a JSON file linked to a progressive web app’s directory. The file comprises of different settings that define a PWA’s icon, theme colour, background, splash screen design, font and initial orientation for mobile devices.
Furthermore, a manifest can be configured to send a prompt to install a PWA on a user’s mobile device (or even save it as a bookmark in a desktop browser). When the offer is accepted, the PWA gets an official license to be included in the list of “apps” on the ‘Settings’ menu. Then, it is fully functional as any regular app, however, unlike a regular native app, the PWA takes smaller space about a hundred of kilobytes.
Push Notifications
Generally, once you open a progressive web app, regardless of whether its’ on mobile or desktop browser, it will ask if you want to subscribe to notifications. After you choose to subscribe, you will receive a personal ID, which will personalize the notifications as per the content you choose.
PWAs push notifications exist because of Push API and Push Manager. The Push Manager routinely examines the app’s state in a passive mode and sends an update to either a browser or, if the app is already installed on a users’ device, the OS.
HTTP/2
Even if seeing ‘https’ in the address bar is more common now, you still see the outdated ‘HTTP’ here and there. If you see an address bar on a progressive web app you will always see an ‘https’ instead of the alternative. This is because PWAs use the new HTTP/2 that requires an encrypted HTTPS connection. Still, that doesn’t mean that every website that has ‘https’ uses ‘HTTP/2’ and not HTTP/1.
With HTTP/2, all the data is divided into portions and sent via TCP stream, which is faster by 80% compared to the HTTP/1. This test shows the difference in time taken to build an image on a page through HTTP/2 and HTTP/1. The benefit of HTTP/2 is more evident with animation and image-laden sites.
What are the key benefits of progressive web apps?
App-like
One of the main benefits of the PWAs is that they are developed like regular mobile apps although comprising full-functionality of websites with database access and dynamic data. Developers can take full advantage of conventional theory and existing frameworks on how superior user experience is offered by mobile apps compared to websites.
Linkable
The difference between a PWA and native app, is that the PWA can easily be accessed via URLs and thus, they are indexable by search engines. Businesses especially can benefit greatly from it.
Offline mode
As is mentioned above offline functionality is important. It increases engagement and availability greatly. With offline mode, any information can be stored automatically during the last internet access. The offline page can be completed with the brand’s logo, some info and can also include some advanced features. this can greatly benefit businesses that have product catalogs which users can view in the offline mode- increasing user engagement rates.
No need for installation
Unlike mobile apps, when users install PWAs, there are no long download times and visitors are routed through App Store or the Google Play. They directly download the app on their devices. This means that the PWA gets its own icon on the home screen like a regular app but without the sometimes exhaustive and tedious store submission process.
Discoverable
Since the PWAs reside in browsers, they are as easy to search engine optimization and as a result easy to discover as any other regular app or website. Plus, Google’s initiative to have Chrome apps replaced with PWAs by the mid-2018, will definitely attract the new audience to PWAs- increasing their discoverability.
Progressive Web App Use Cases
AliExpress is an e-commerce business which has been in the forefront of mobile commerce. Seeing the growth in this area they developed their own Progressive Web App and saw great results. After a short period of time of applying PWA, they experienced an incredible 104% increase in conversion rates for new users gained with their PWA. Furthermore, their users visit more pages per session and spend more time per session on average. Their statistics include 82% growth in iOS conversion rate and 74% increase in time per session.
Alibaba is one of the largest online B2B organizations in the world. Thus, delivering world-class mobile experience is their priority. While initially, they focused on making the mobile web and app with just great design and user-friendly, they gradually realized this was not the best of customer engagement and came up with a solution, i.e. Progressive web app. Since, they have experienced a whopping 76% increase in conversion rate, 14% increase in active users on iOS and 30% in Android, plus they received 4 times more interaction rate from Add to Homescreen.
