How Do Progressive Web Apps Really Compare to Native Apps?

The mobile user experience is more important today than ever before. And to offer a premier experience to people who visit you from mobile devices, there are two solutions you should consider; progressive web apps vs native apps.

People today consume 2x the amount of content on mobile than they do on desktop. Mobile holds around 60% market share of all internet users, against less than 40% from desktop.

That’s more people who are mobile-first, which is why many businesses are investing heavily to ensure they meet the expectations of modern users.

We’ve seen a boom in responsive web design, which creates a mobile friendly web experience. Today, this is frankly the bare minimum.

Then there’s native mobile apps, that users can download from the app stores and add to the home screen of their mobile devices. Apps are a better mobile UX, and can harness the features of the device more effectively, although they are traditionally expensive and time consuming to build.

Recently, we’ve seen the entry of Progressive Web Apps (PWAs) into the arena, which takes an approach midway between mobile websites and mobile apps. Let’s take a look at them in more detail and see how they stack up. 

What is a Progressive Web App?

Progressive Web Apps are something between a responsive website and a mobile app.

They are mobile sites built with modern JavaScript frameworks, designed to work like a native app. They can be added to a mobile device’s home screen with an icon. Like apps, they offer a full-screen experience to engage users. However, they are still just a website when opened. With the development of Service Workers, PWAs do get some more benefits that native apps have, however, these benefits are still limited, particularly on iOS.

Google defines PWAs as web experiences that are:

• Reliable – Load instantly and never show a website as being down, even in uncertain network conditions.
• Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
• Engaging – Feel like a natural app on the device, with an immersive user experience.

SD Times reported that Todd Anglin, VP of Product and Developer Relations at Progress believes “PWAs are about making the web a more reliable, enjoyable experience, but there will always be a category of apps best served by native“.

This leads us to some questions (and answers) for business owners trying to decide – “what’s best for my company:
how do progressive web apps really compare to native apps?”

Progressive Web Apps vs Native Apps: What’s the Difference?

It seems like a simple enough question to answer: Is there a difference between progressive web apps (PWAs) and native apps? (Yes.) If so, what are those differences and how do you choose between a native app and a progressive web app for your company’s mobile presence? (That depends.)

If you want to skip ahead to a summary of the pros and cons of PWAs vs native apps, click here. Otherwise, let’s go into a bit more depth and break down the key differences.

1. Installation
2. Cross-Platform Availability
3. Offline Usage
4. Storage, Data, and Power
5. Updates
6. Discovery
7. Push Notifications
8. Security
9. Device Features
10. Cost

1. Installation

A key difference between PWAs and native apps is the way the end user accesses them.

Native applications are found and installed through an app store, such as Google Play or Apple’s iOS App Store. App Stores act as a massive shopping window, the gateway towards all services and content people consume on their mobile devices.

People use the app stores to search for solutions to their problems, in much the same way that they use Google on the mobile web.

The opportunity for app owners is considerable. If you make a good job of App Store Optimization (ASO) you can introduce your brand to new users that are searching for related keywords. If you have an existing brand you can count on people looking you up on the stores too, which happens a lot nowadays, with apps being a modern consumer expectation for digital businesses. 

Once installed, the app will appear on the user’s home screen with a recognizable icon and text label that can capture the attention of the user whilst they scroll through their home screen. It really is valuable real estate. 

This all means that when you develop a native app, you have to submit it for consideration to Google and Apple. Apple in particular have quite stringent requirements and it will take some effort to prepare it up to their standards. Then it’s up to the user to find the app, read the description and reviews, and determine if it’s worth installing on their device.

PWAs, on the other hand, help you avoid dealing with the process of app store submission. Instead, PWAs run on the mobile device’s browser. The Financial Times PWA is a good example of this:

As you can see in this example, The Financial Times’ PWA looks very similar to what you’d expect an app to look like.

Users access a PWA simply by inputting the URL in the mobile browser. If users aren’t aware of the concept of PWA, they may be surprised to encounter a truncated version of the website, when they expected an experience that mirrors the one from the regular site. 

However, once they do discover it, it’s (theoretically) easy enough to save the PWA to the home screen and find it there just as they would a native app. 

The only obstacle your users may run into is knowing how to add it to the home screen. PWAs are still relatively new, and the concept of adding a “website” to the home screen of the device isn’t the norm for the average web user. This is in contrast to the idea of installing a mobile app from the App Store or Google Play, which almost everyone is familiar with. 

That said, the latest Android versions prompt users to install a PWA (as you can see in the above image), while iOS is still relying on the old “Add to home screen” action for this.

On iOS your user will have to visit your PWA’s URL within Safari and then manually press the Share, then tap on “Add to Home Screen”. There will be no visual indicator that your website is a progressive web app. As you can imaging, this makes it somewhat tricky to get iOS users to install it. 

2. Cross-Platform Availability

Since developers usually design an app specifically for iOS or Android users, this ensures that the experience within the native app is tailor-made to each platform. Developers have to worry less about cross-browser or platform compatibility and more on shaping their app for one specific mobile device. This has exceptions of course, like if you build hybrid apps or use a cross platform framework like React Native. 

Progressive web apps, on the other hand, generally take a different approach.

Utilized by many big brands like Twitter, Forbes, and Flipboard (alongside their native app offers), they’ve evolved out of web technology that’s been in play for years. (However, the phrase itself “progressive web app” was only just coined by designer Frances Berriman and Google Chrome engineer Alex Russell in 2015.)

Developers create the responsive instance of the PWA, publish it, and then leave it to the user’s browser to display it correctly within the screen’s parameters. It’s just one app to develop and users across a wide range of mobile browsers can engage with the app thanks to modern web technologies.

The one point worthy of note here, however, is that the interface of the PWA typically attempts to strike a balance between what you’d find with a responsive website and what you’d encounter in a native app. Here is an example from the FT PWA:

The menu within the PWA looks similar to the menu used in Native Apps

With native apps, developers have the opportunity to create a more user-friendly experience as the app is designed specifically for the structure of a mobile app.

With PWAs, on the other hand, the time and cost saving can be significant, since a single web app can be loaded on both iOS and Android (and browsers like Firefox on other systems too!).

There are ways to easily build cross-platform mobile apps too though. MobiLoud Canvas let’s you launch to Google Play and the App Store by converting your existing site into iOS and Android apps. It gives you all the advantages of native mobile apps, with the efficiencies of a PWA – more on that later though. Let’s move on to the next point.

3. Offline Usage

One of the great things mobile apps can do for the end user is giving them the ability to access the information they want without having to be connected to the Internet.

What used to be a prerogative of apps, is now coming to the web as well. A PWA is a web-based app that gets installed on your system and, where possible, works offline utilizing cached data.

Service workers are the most important technology allowing offline use in PWAs. Service workers are basically JavaScript files that run independently from the web app itself.

They help improve performance and features by handling network requests, caching app resources (and fetching cached resources), and, best of all, enabling push messages even when the user isn’t online.

There’s a tradeoff here, as you might imagine.

A PWA can serve certain parts of the app to users when their device is unable to connect to a network. However, a PWA cannot serve all parts of the app to them; specifically, anything that isn’t part of the page’s natural caching system will be offline until connectivity is restored. So, if a user wanted to submit a contact form to Forbes or make a reservation on Trivago, they’d be unable to do so.

Native apps definitely win in this category. While it’s great that the technology of PWAs is catching up and allowing users to access cached content, they’re just not quite at the point of being able to tap into a mobile device to stay connected no matter what.

4. Storage, Data, and Power

When a native app is installed on a mobile device, it’s going to pull directly from the device’s resources.

For “heavier” apps, ones that users interact with frequently, or those they forget to close altogether – resource use in terms of power/battery, storage space and mobile data use can be significant.

PWAs can also cause similar drainage issues. The Safari app causes nearly as much of a burden as the most commonly used apps on the phone. Really, what it boils down to is:

• How well-coded the app is
• How many resources the app calls on
• The user’s actual usage of it

If you’re trying to reach an audience that lives in a region where data networks tend to be more expensive and users unable to pay for it, then a PWA is going to be the best option.

Google highlight that Konga cut data usage by 92% when they turned their mobile website into a PWA. Having a PWA that didn’t use much data was was essential because nearly two-thirds of Nigerian users (Konga’s home market) access the Internet on mobile via 2G networks. 

Some native apps can work and store content for offline use too, which might help with spotty connections (but not as much if data is expensive).

This article first appeared on - Mobiloud

Article source: https://article-realm.com/article/Health-Fitness/37166-How-Do-Progressive-Web-Apps-Really-Compare-to-Native-Apps.html