Why Twitter, Pinterest etc are creating Progressive Web Apps for Hyper Growth?

As per data from Statista, mobile currently accounts for over 60% of total internet usage, and the primary reasons for it are easy to access to the internet, portability and affordable hardware. In this scenario, user experience gains significance, and progressive web apps can help to enhance user experience as they optimize websites on mobile phones. Flipkart, Twitter, Pinterest, MakeMyTrip, etc developed a progressive web app that combines the feature of web and mobile apps to deliver a native or hybrid app-like experience.

Progressive Web Apps refer to applications that present an optimized website for mobile devices. Besides making use of device features such as the camera, PWAs provide users access to content through browsers such as Chrome, Firefox, and Safari, allowing them to download content as and when they browse.

Whereas native apps are made for a specific platform (iOS, Android or Windows), using the developer tools provided by the operating system owner that allows access to the system functionalities, progressive web apps are coded for use in a browser. They can also be installed on mobile by pinning the page to the home screen. Although they behave almost like native apps, PWAs don’t control the entire hardware of the device. 

Real-Life Progressive Web Apps Cases

Several well-known businesses have adopted PWAs. The following case studies present better insights into the effectiveness of these web apps. 

Twitter Lite

Twitter ranks among the most popular social apps, with over 328 million active users per month, and around 80% of them access Twitter on mobile. To make the mobile experience faster and more reliable for users, Twitter made PWA the default mobile mode in April 2017. 

With this, they achieved:

• Bounce rate reduction by 20%
• Sent Tweets increased by 75%
• Number of pages per session grew by 65%

Additionally, since the PWA is only 600kB compared to the 23.5MB downloaded version, Twitter Lite users save on their data plan. The first-time download takes only 5 seconds on a 3G network, and for each return, the app loads in less than 3 seconds.

Nicolas Gallagher, the Engineering Lead for Lite, says, “Twitter Lite is a client-side JavaScript application and a small, simple Node.js server. The server handles user authentication, constructs the initial state of the app, and renders the initial HTML application shell. Once loaded in the browser, the app requests data directly from the Twitter API.”

Pinterest

As an image-based platform that helps users make their own catalog of ideas, Pinterest has over 200 million active users every month. With the intent of enhancing user experience and improving the conversion to more than just app installation, the development team rewrote the mobile website as a PWA to achieve the following results:

• Weekly active users grew by 130%
• The number of Pins seen increased by 401%
• Logins grew by 370%, while new sign-ups increased by 843%
• Page payload decreased from 490kb to 190kb
• Additionally, the user engagement changed considerably with average session length increasing by 296%

Flipkart Lite

When Flipkart, India’s largest e-commerce website, faced the issue of delivering users with a seamless experience due to several variables of network connectivity, they decided to shut down their mobile website temporarily and offer an app-only interface. With PWAs offering features that replicated the native experience, they rethought their strategy and developed Flipkart Lite, a progressive web app.

The results were significant:

• The time that users spent on the site increased by over three times
• The re-engagement rate increased by 40%
• Data usage reduced by three times among users who came to the site via the Add to Home Screen option
• Conversion rate grew by 70%

When Should I Consider Developing a Progressive Web Application?

Because they are not visible on app stores, PWAs may not be the best option for businesses whose customers don’t regularly visit their website, as users get prompted to download the PWA only when they are on the home screen. The following are the points to consider before deciding whether to go in for Progressive Web Apps.

Customer acquisition cost

PWAs are significant for businesses that are looking at minimizing customer acquisition costs. Not every company can afford the high cost of user acquisition that native apps demand. PWAs can reduce customer acquisition costs by around ten times.

Significance of app store presence

Specific categories of apps, such as games and social, are more likely to be downloaded from app stores. Therefore, if your business falls in a category that has a higher chance of showing up in web searches with keywords (such as ‘making notes’ or ‘managing daily tasks’), then Progressive Web Apps will be just as effective.

Processing requirement

While PWAs are accessible offline, remember that they are only available in a limited version. Therefore, they can work well for e-commerce platforms, education portals and other business websites that can still work with offline content. For apps that require direct access to the device resources for processing data or retrieving information, native apps might be the better alternative.

Dependence on native features

While PWAs offer push notifications that allow businesses to remind customers every time they publish new content to launch a new product, they have limitations in terms of accessibility to device features such as geofencing, accessing contacts/calendars or mobile payments. If these features are essential for your app, then choose native apps over Progressive Web Apps.

iOS vs Android

Currently, PWAs work better on Android or Chrome, thanks to the strong support from Google. Although Apple has introduced PWA support in its latest iOS 11.3, there is still a long list of missing features, including push notifications, web app banners, splash screen and no support for browsers other than Safari. Therefore, if you don’t want to offer Apple users a below-average experience on iOS/Safari and aren’t willing to wait for Apple to provide better PWA support, then you should consider native app development.

Existence of a mobile-optimized website

If your business already has a mobile-optimized site, then it would not cost much to turn it into a progressive web app, compared to developing a native app from scratch.

How Do Progressive Web Apps Work?

Native apps work even without an internet connection as essential elements such as UI components and data are stored on the device when the user downloads and installs them. The same thing happens with PWAs. By storing CSS files, HTML files and images in the cache of the browser, Service Workers can be used to give developers complete control over the network call.

When a user visits a website more than two or three times, it signifies that they may be interested in viewing more content from the specific page. The browser is enabled to check whether the user visits meet predetermined frequency criteria, following which the user receives an invitation to save the website as an app on the home screen. Once it is saved, the user can visit the progressive web app any time, even when they are offline (with some limitations), offering a responsive and fast experience.

Will PWAs Replace Native Apps?

With responsive design, the mobile web experience has significantly improved over the past few years. However, most website design isn’t conceived as mobile-first. As a result, the experience still lags in terms of speed, and that’s where progressive web apps can help to bridge the gap. Doubtless, native apps provide a superior experience on mobile, but unless an app is among the top of the pack in its category, the high cost of building and managing a native app isn’t justified.

Progressive Web Apps: Why they are the Future for The Web

Despite the rising popularity of native apps, there are several reasons why PWAs are here to stay.

Mobile websites with the near-native experience

Websites will remain, irrespective of native apps. While native apps are the preferred interface for viewing content, this will likely change over the next few years as many more businesses adopt PWAs, since they offer everything that users like about the native interface – offline access, the app shell, navigation bar, and telephony among other features.

Overcrowded app stores

The competition is intense in the app stores, and it’s near impossible to compete with the giants. ComScore data shows the same big names (Facebook, YouTube, Facebook Messenger, Google Search, Google Maps, Snapchat, WhatsApp, Google Play) ranking at the top in terms of reach across different regions in the world. Moreover, the leading categories of apps in terms of share of minutes are Entertainment, Social Media, Instant Messaging and Games (ComScore). Therefore, if an app doesn’t fall into one of these categories, it makes little sense to spend a considerable amount on developing a native app.

Progressive web apps rank in Search

One of the primary advantages of PWAs is that they rank in search engines, making it easy for businesses who are currently using SEO for their website ranking. New apps won’t have the disadvantage of the lack of reviews or ratings. Additionally, website links can be shared easily.

User retention and commitment

While native apps require a significant investment in their design and development, it isn’t easy to retain users, even if the initial download numbers look promising. Native apps are dependent on users frequently returning to view content, subscribe, install upgrades or click on ads, but it doesn’t happen in many cases. Progressive web apps are more convenient as users don’t need to commit to a download or even to save the app to their home screen.

Better revenue generation

For most native apps, besides in advertising, app owners face a sizeable cut in revenues due to a percentage being payable to the app store owners for paid downloads, subscriptions and in-app purchases, among other sources. With PWAs, all the revenue generated remains in the hands of the business.

Progressive Web Apps: Frequently Asked Questions

Native, React-native or PWA, what should I choose?

Each of the three frameworks come with pros and cons, which you should evaluate before deciding on the most suitable option for your app.

Native Apps: Pros

• Since native apps are developed using a language that is easy for the hardware to understand, it makes it easy to create features that the OS allows
• Performance is superior to native apps compared to other types of apps

Native Apps: Cons

• Since each platform speaks a different language, you need to learn the language that the platform requires
• The app needs to be developed separately for each platform

Hybrid Apps: Pros

• Unlike native apps, it requires just a one-time development that can be run across various platforms
• It’s easy to access the hardware through interfaces

Hybrid Apps: Cons

• The experience is not as smooth as that of a native app
• Although it’s a one-time development, the code needs to provide for the differences in the platforms. For example, Android allows NFC, among other features, whereas iOS restricts sharing on Bluetooth. As a result, code logic can get quite complex

Progressive web apps: Pros

• It runs across devices and platforms
• No restrictions in terms of style or design
• It can run on almost all types of hardware
• No need to be on the app stores

Progressive web apps: Cons

• Although it runs on any device, the app is killed when the user closes the browser tab
• It isn’t possible (yet) to run background processes, so features such as geofencing cannot be included
• It cannot be found on the app stores (except Windows App Store)

To sum up, the decision depends on your budget, the required features, and the user experience. Native apps are the most expensive of the three in terms of development costs, but they come loaded with features and offer a much better user experience. Hybrid apps are relatively cheaper than native ones but are not as efficient. Certain features may be limited, depending on the platform. Progressive web apps are the most affordable of the three to develop. They are efficient, but not as much as native apps. Currently, they have restricted features, but this will likely change soon.

What features should Progressive Web Apps have?

One of the reasons why experts and developers are talking about progressive web apps being the future of mobile is because they can provide features that are currently missing in non-progressive ones.
PWAs should have the following features for making the experience better for users:

• Reliability: The loading of pages will be almost instantaneous, even when the device is not connected to the network or connected on a low-speed network (such as 2G).
• Speed: The transition between pages and scrolling through pages is smooth, providing users with a better experience.
• Responsiveness: The app can fit across different types of devices, offering fluidity in the design irrespective of the device used.
• Easy to install: For progressive web apps to match native apps in terms of user experience, they should be installable and accessible on the home screen of the device, just like native apps, to allow users to access them with a single click.
• Splash Screen: The presence of a splash screen at the startup can give the PWA the feel of a native app.
• More engagement: The goal of the app is to increase user engagement. Therefore, a PWA should have features such as offline first, push notifications and home screen icon, which enhances user engagement.

What technical components form the foundation of PWAs?

Progressive web apps require some components that work in sync to power them. These include Service Worker, Manifest file and HTTPS.

• Service Worker: All web apps communicate with the network and display a message if there is no connectivity. In the case of a PWA, the service worker (a JavaScript code that acts as a proxy between the browser and the network) stores resources in the cache of the browser during the first-time load. When the user visits the app again, the service worker first checks the cache (even before the network) to return a response. It manages push notifications and works towards building an offline-first web app by using the cache API, thereby speeding up the app performance.
• Manifest file: The manifest file refers to a config JSON file with information for the application. It could include details such as displaying the icon on the home screen when the app is installed, background color, theme or any other information. When the Chrome browser detects the presence of the manifest file, it will automatically display the web app install banner. Once the user chooses to add the icon to the home screen, the PWA installation is completed.
• HTTPS: Service workers perform activities on the client-side, such as intercepting network requests and modifying responses. Therefore, all progressive web apps need a secure protocol HTTPS. The social worker uses features such as push notifications and background syncing to enhance the user experience and to increase customer engagement. These features also help to provide a more native experience.

Conclusion

At TechAhead, our team has the advantage of experts who have experience in developing native apps, hybrid apps, and progressive web apps. Before we begin progressive web apps development, we understand our clients’ business needs as well as their budget and app strategy, based on which we recommend the best framework for developing their app.