Are Progressive Web Apps The Future of Apps?

Author: Anshuman Pradhan | Categories: Website Design & User Experience, Websites, Design & Ux

Is the mobile web dying? Has it transformed into something else? What is the new form all about?

This is perhaps a never-ending debate; and with the evolution of new trends and technologies in the web sphere, the debate over mobile web is only growing.

While there’s a lot of speculation over this, in reality, mobile web isn’t going anywhere, let alone die. Rather, it is in an evolutionary process – the phenomena of the web are undergoing a major transformation.

There’s been a staggering growth in the number of device users. To cater to this growing number, website designers took to creating responsive web designs (RWD) as the only solution. Though it is a widely accepted mode – facilitating users with easy access to the websites – it now seems that even RWD isn’t enough. Because the web is all about engagement and experience, users need something more than a responsive design. This has driven designers towards creating native mobile apps.

Native apps engage users better than mobile websites, and because the former is easy to install and access (use), users too grabbed them like ‘hot cake’. However, as per research reports by comScore Mobile Metrix, the reach of mobile websites remained high – even while users preferred apps. The image below illustrates the discrepancy between native apps and mobile websites.

native apps

As is evident from the illustration above, the performance of mobile web remained significantly better when it came to monthly unique visitors. However, the average monthly minutes per visitor was high during the same period for native apps as compared to the mobile web. Also, while apps are faster than mobile websites, a significant chunk of users preferred the web over installing native apps on their devices. This highlights the mismatch that is there with no clear winner!

To reduce this discrepancy and offer users the ‘best of both the worlds’, developers are designing architecture for a browser-based web, hoping to speed it up for mobile. There had to be a product set with the best features of the mobile web as well as native apps. But, is the approach satisfactory for building cross-platform web and native app experiences?

Expectations from developers: Finding the right solution to boost customer experience

Today is the time when users are expecting a seamless experience, irrespective of the device. Naturally, developers are supposed to come up with a solution that doesn’t merely focus on building responsive websites or engaging apps – individually. Rather, there is a need to focus on a mechanism that is engaging to all users.

As a resolution and to bridge the gap between the web and the app, a new chapter has been added to the evolution of the web that takes the entire experience from responsiveness to ‘appness’. This novel solution is called Progressive Web Apps (PWA). Thanks to Google engineer Alex Russell who came up with this idea and introduced us to the world of PWA.

All about the features of progressive web applications

A progressive web application takes advantage of the latest technologies to combine the best of web and mobile apps – it is a website that works like an app. PWAs use contemporary web technologies to deliver an app-like user experience including an offline mode, push notifications, add to home screen, splash screens, and animated page transitions. Below are the noteworthy features of PWAs:

  • Progressive: Just as the name suggests, a PWA works effortlessly on all devices by leveraging the features available on the user’s device and browser. Because it is built with progressive enhancement, your choice of browser or device doesn’t matter.

  • Easy installation: With dependence on app stores completely gone, PWAs do not command any form of commitment from the user. You don’t need to install it to be able to use – it is just a web page that you can choose to keep and install later when you are satisfied with the experience.

  • Easy share-ability: Besides no installation hassles, you can also take delight in the easy sharing of an application – just share the URL of the website or bookmark it.

  • Responsive: Fits all form factors that include desktops, mobiles, and tablets.

  • Available offline: Dependence on an active internet connection is also limited as PWAs are available offline. Even in areas that have poor network quality, PWAs work perfectly keeping your experience consistent.

  • App-like experience: PWAs are web pages – this makes loading a PWA faster, and therefore better engaging. This boosts the customer experience and takes it several notches higher.

  • Security: The security quotient of PWAs is well taken care of. The HTTPS protocol secures the content, so you have a worry-free browsing experience.

  • Auto-update policy: The Service Workers feature helps keep the process updated. Anytime you access it; you get the latest version only to use.

  • Easy to discover and access: Other than the security quotient, the ‘search’ quotient of PWAs is impressive too. As these are web pages, the scope of W3C manifestation and service worker registration allow search engines to easily find them.

  • Facilitates re-engaging with users: Features like push notification make re-engagement easy via PWAs.

  • Low on system resources: Your handheld or mobile device can get cluttered with the installation of too many apps. Since these are available without an installation, there’s no chance of clogging the memory.

  • Portability: PWAs are websites injected with the right vitamins! There are many strategies for native app portability (including Hybrid apps), but unlike those strategies, PWAs don't change your deployment and packaging model.

The foundation of Progressive Web Apps

Progressive Web Apps are based on three main pillars that include the web app manifest file, application shell architecture, and service workers.

Web App Manifest File

This is a simple JSON file, which follows the specifications of the W3Cs. It helps you run a website in the full-screen mode as a standalone application. It allows you to add an icon as your app icon on the home screen and also enables you to set a theme and background color at the time of launching the allocation splash screen. Another handy feature is Chrome on Android that prompts you to install the web app via a web app install banner.

Application Shell Architecture

An application shell is the minimal HTML, CSS, and JavaScript technology that powers the user interface. The application shell helps load apps faster, boosts caching, and dynamically displays content. Besides increasing the performance of the PWAs, an application shell also helps improve the customer’s experience via the dynamically pulled content.

native apps

The image illustrates how cached shells help populate dynamic content.

Service Workers

Service workers enable PWAs to run in the offline mode as well. This feature helps increase the performance of PWAs by caching data that was retrieved in previous sessions. It separates your application in two layers one being the assets (CSS, JS, skeleton screen) and the other being the data. It first loads the skeleton screen (your application shell) and then boosts the performance of the PWA by displaying data.

Another advantage that service workers power PWAs with is the ability to send Push Notifications, even while in the offline mode. Irrespective of whether the browser tab is open or closed, push events are delivered in real-time to users, without delay. This keeps the experience consistent for users, without a break.

The third advantage of service workers is that it is low on resources. Typically, 200KB of data is consumed to retrieve a website; however, after the implementation of service workers, this is reduced to a mere 13 KB of data. So, on a regular 3G network, the page would have taken 3.5 seconds to load – now it takes 500 milliseconds only. Besides the speed, the customer experience also is impressive!

Final thoughts…

With the growing number of handheld devices, the need for websites to be “Appified” has intensified. This is to provide excellent customer experience and engagement to all users. PWAs in a way has helped to reduce the gap between mobile websites and native apps thus driving a brand new era where user engagement is placed at an elevated position as compared to merely available information. This is called Appification of the web in the mobile era.