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:

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).

5. Updates

There are two sides to view updates from when it comes to apps: the user’s point of view and the developer’s.

For the most part, there’s really nothing for users to do when it comes to updating native or progressive web apps.

There may come a time when a native app requires a manual update, but, for the most part, the process is automated and users will barely detect when an update has gone through.

For your end users, this one isn’t going to make much of a difference as most updates will go unnoticed. 

6. Discovery

For native apps, there are two chances for them to show up in search results.

• Within the App Stores
• In search engines

However, both of these depend on a number of superficial factors since the pages of the app itself cannot be indexed and listed in search engines. Instead, you have to do what’s known as App Store Optimization (ASO). This involves app search optimization tactics like:

• Identify a commonly searched-for keyword (in the app store) that aptly applies to your mobile app and include it in your app title and description.
• Use a strong title/headline that includes your selected keyword.
• Develop a snappy and yet thoughtful description of your app. You want to quickly appeal to app store users, but also make sure they understand what they get from the app experience. Make sure the keyword is included here, too!
• Customer ratings play a huge part in a native app’s overall success, which means they’re going to factor in with SEO as well. Don’t be afraid to reach out and ask current users to leave you a review (which you can do with Push Notifications).
• You will also want to see that downloads number go up as well. Pitted against competitive apps that don’t have as many downloads or aren’t as well-reviewed, this form of social proof will help you attract new users.

The app store will also be a big help in driving traffic to your new app if you utilize the categorization feature well. The more niche and specifically labelled your app is, the more relevant app store search results it will appear in.

Now, a progressive web app, on the other hand, will do well in terms of web SEO as it works like any other website you’d encounter online and its contents are indexed by Google and Bing.   

As you can see in this example, the Financial Times PWA looks just like any other search result  you’d see. It also gives links to relevant pages within the app.

Cleveroad highlight that this instant use opportunity for PWA may allow a higher volume of traffic to reach your PWA than your mobile app in an app store initially.

7. Push Notifications

Push notifications are one of the key reasons why many site owners and businesses are building a mobile app.

They attract significantly more engagement than traditional methods such as email. Reports show that Push Notifications in certain industries can get up to 40% click through rates (CTRs), whereas emails typically generate around 20-25% open rates, with CTRs of around 3-6%.

To summarise, an effective push notification strategy will result in more engagement with your content and mobile app!

You can build the functionality needed for push notifications from the ground up, or easily integrate existing push notification solutions into a native app using a third party push notification service such as Google Firebase, PushBots, or OneSignal.

You can also use Push Notifications in Progressive Web Apps, thanks to the development of Service Workers. 

However, at this point, Push Notification support is still limited to Chrome, Firefox and Opera and Mac Safari, and crucially is not available on iOS. This means that you can start using Push Notifications to engage your audience with a PWA on Android, but if you want to do the same to your iOS visitors, you're going to have to wait.

You shouldn't count on Apple & iOS supporting this in the near future either, they take a dim view of notifications in general. 

PWAs are definitely making progress when it comes to push notifications, however, Native Apps are the clear leaders in this category. Native apps can support push notifications on both iOS and Android devices making them the right choice for any website owner who wants to engage their audience through this powerful medium.

8. Security

Security and privacy are key in today's age, and companies need their mobile apps to be secure, protect their user data, and be GDPR compliant too.

Native apps have the capability to be a secure solution for both the app owner and users. It’s easier to use Multi-Factor Authentication in a native app than in a PWA, which is useful if an app has login functionality. Multi-factor authentication adds a large layer of security to native apps.

Native Apps can also use certificate pinning to prevent certain kinds of attacks, which in-browser apps such as PWAs can’t emulate. Despite this advantage for Native Apps, PWAs are still served over HTTPS which does allow for browser-to-server encryption. As long as the website owner has created a secure environment for the PWA, it can be just as secure as any website.

However, to get your native app published on the iOS and Android Google Play and iOS App Stores, they have to be authorized by either Apple or Google first. Apps that present clear security issues for users are highly unlikely to get accepted, so in the majority of cases an app downloaded from these sources will be trustworthy.

Although there may be more work to build the security features for native apps, it has the potential to be more secure than PWAs, thanks to the ability to build in security features. Data security is always a delicate subject when building anything for the web though. You can’t afford to be the cause for compromised data, so this one is going to lie on your shoulders - native app or PWA.

9. Device Features

One of the mot potentially useful things about building native mobile applications for placement on a user’s mobile device is its ability to sync with other device apps and telephone features.

For example, native apps can use the:

• Camera
• GPS
• Geofencing (for marketing purposes)
• Accelerometer
• Compass
• Contact list
• Alarm
• Calendar
• SMS and push notifications
• Near-field communication and mobile payments

The DeeperBlue native app (built with MobiLoud News) asks users for permission to send push notifications to their mobile devices.

Also, unlike browser windows that can only request that information once before being blocked entirely, apps like Deeper Blue can offer users the choice to opt-in at a later date, easily accessibly from their Settings.

Progressive Web Apps can be thought of as a toolkit that offer you the potential to take advantage of device features, but they don't strictly offer a certain set of features.

As Peter O'Shaughnessy writes:

"It’s [your choice of PWA features] not all-or-nothing; you’re free to cherry-pick. For example, if you don’t want to introduce push notifications, you don’t need to! "

Progressive Web Apps in their most basic form can be held to the same kinds of restrictions as standard websites, which means you don't need to add access to device features. You can make some connections that can be made through APIs (like social media logins) to improve the user experience, but limitations exist.

If you want your app to benefit from tapping into all the device features that native apps can, (such as fingerprint scanners, GPS, and camera) native could still be the more appropriate choice. For most businesses though - using these features is not necessary!

API integrations may open up functionality to other software for users on a PWA, but it won’t give them the ability to sync their app to their phone the way a native app does.

10. Cost

Finally, we come to the matter of cost and the time to launch.

A native app — if truly native — is generally built with in Java or Kotlin for Android or Objective-C or Swift for iOS.

The downside of this approach is that it necessitates a long, sometimes drawn-out process for developing apps, which gets duplicated for each platform. Additionally, there’s a high cost of maintenance for native apps. Native apps will generally cost $50,000 to $100,000 to get first versions out on iOS and Android, and another 20% of that annually for maintenance and updates. 

They will also take several months to build at a minimum.

There are cross-platform development frameworks such as React Native, which can help offset these drawbacks by making a large portion of the code reusable between iOS and Android. 

At the same time, if your audience consists of users on both platforms, you’ll have to either ignore one subset of users entirely or shoulder the additional burden of dual development.

When developing your native app in-house, you’re looking at 2 additional hires and existing staff time spent commenting and testing, at a minimum. You might also have to consider the cost of outsourcing development if your team isn’t capable of handling it on their own.

With these high barriers, building native apps becomes a big, risky challenge for smaller businesses.

The progressive web app, at its core, is basically a web app built in any one of a number of ways (although React.js and other similar frameworks are certainly popular), with the addition of service workers.

Developers need to replicate a lot of what the native and mobile SDKs already provide, so it still means investing in research and development, the same as you would with native app development. Building PWAs is significantly easier than building native apps though - and the costs in both time and money reflect that. 

Why Not Both?

There are numerous other important factors when deciding between native app and progressive web app - like performance, quality of design, and so forth. What much of that boils down to though is the quality of coding; not whether the app is native or exists in a web browser. If you want to learn more about progressive web apps, check out our detailed guide with 50 PWA examples. 

When it comes time to make a decision, be sure that your choice of development path (as well as developer) can match up with each of those expectations.

If your users will lose out on an experience that’s critical to the native app (like push notifications or geofencing) because of the perceived high costs of building one, then you may need to reconsider your budget as the money spent on a PWA vs native app could end up being a waste. On the other hand - do you really need to build a native app from scratch, considering the steep costs. Do you need to use the phone's accelerometer and facial recognition?

Summarizing: Progressive Web Apps vs Native Apps

We've gone through 10 points that show the differences between progressive web apps and native apps.

Both native apps and PWAs offer a big improvement in user experience over regular, mobile-responsive websites. But between these two solutions, there clear differences, pros and cons.

Here's a summary of the main benefits of each:

Progressive Web Apps

• Easier and faster to build
• Lower cost to maintain
• Discoverable via Google search
• Can be installed on users' devices (though not as intuitively as with native apps)
• Can use push notifications (limited to certain browsers & operating systems)

Native Apps

• More secure
• Can be used offline
• Allows use of device features (such as GPS and camera)
• Gives access to Google Play and Apple's App Store
• Easy, one-tap installation
• Allows full use of push notifications

To sum up, Progressive Web Apps are simpler and cheaper than native apps, while offering an increase in performance over mobile websites. Native apps, however, offer more power across the board, with a better all-round user experience than you can provide with a PWA.

That increase in power comes with an increase in cost and complexity too - however, as we'll establish in the next section, there is a way to get the power of a native app with just a fraction of the investment.

MobiLoud

If what you need is a way to translate what you've already built for the web into native app form, and get the most important associated benefits, there's a better route - converting your site into native mobile apps.

Our platforms News (for WordPress based digital publishers) and Canvas (for any site or web app) - give you the advantages of both native apps and PWAs.

You get all the most important native app features, at a much lower cost that is more in line with what you'd spend on a PWA. It's the best of both worlds. If you use MobiLoud to build mobile apps, you may still have plenty of resources spare to build a PWA too!

All our solutions are, at their core, a conversion process. You'll take your existing site or web app, then use our platform to convert it into native apps for both iOS and Android.

While MobiLoud is often used for converting WordPress sites to mobile apps - Canvas actually works perfectly with any site. Canvas can integrate the functionality of any WordPress plugin - allowing you to build PeepSo apps, LearnDash apps, and more. But it's also great for building Bubble mobile apps, Webflow apps, Wix apps, Squarespace apps - and everything in-between!

The apps will be ready to launch in under two weeks, for less than 10% of what you'd spend on traditional native development. Check out News, Canvas or Commerce in more detail, or schedule a consultation with one of our app advisors to learn more.

Conclusion - PWA vs Native Apps

As the technology improves, there have definitely arisen some good use cases for PWAs. For instance, large social media sites are a good example of something that would do well as a PWA. PWAs such as Twitter Lite and Pinterest both demonstrate how you can bring your mobile web experience almost on par with your native app, which will help in markets with poor or expensive connectivity. 

That said, a native app allows you to deliver an always-on and truly personalized experience to users. It's the only solution that gives site owners a completely new channel with push notifications, available on both iOS and Android. This is especially great for news publishers, blog sites, e-commerce companies, social platforms and eLearning sites that want to deliver timely updates and native functionality to customers and followers.

The Native vs PWA debate will remain important - but it doesn't have to be a competition. The two aren't mutually exclusive. There are use cases for both, and it depends on what you want, and need out of the technology. There's no reason why you can't build both.

A PWA for the web to pick up organic traffic and provide a great user experience on mobile browsers, and iOS and Android apps to get a brand presence on the app stores, send out push notifications effectively. and provide a home for your most loyal and engaged fans.

Traditionally, the effort and expense of doing this would be prohibitive for anyone on a tight budget.

It becomes far more doable with MobiLoud though. Not only can we help you to create great mobile apps in record time - but we can also turn your site into a high-quality PWA so that you reap the benefits of both for a fraction of the traditional cost.

We hope this article has been informative. To take your mobile presence to the next level and you're a WordPress-based digital published - check out News. If you have an eCommerce site, web app, or platform - no matter the tech stack or CMS - check out Canvas. If you're on WooCommerce - we have the WooCommerce app builder for you!

Whatever you decide - we wish you the best of luck in creating a winning mobile UX, pleasing your users, and growing your brand.