How Do Progressive Web Apps Really Compare to Native Apps?

Year by year, people are consistently spending more time on mobile devices to access the internet.

In fact, people consume 2x the amount of content on mobile than they do on desktop.

Needless to say, website owners should be excited about this prospect in 2018 as the opportunity to reach these mobile users is still is getting bigger.

There are a few ways to create a mobile presence that’s going to let your users access your content on mobile.

There’s, of course, responsive web design, which allows them to connect with users via their website.

Then, there are native mobile apps, which users can download from an app store and add to the home screen of their mobile devices.

Now, we’re looking at the entry of Progressive Web Apps (PWAs) to the arena, which takes an approach midway between mobile websites and mobile apps.

So what is a Progressive Web App?

Progressive Web Apps take an approach that is midway between mobile websites and mobile apps.

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 people using it. 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 PWA’s 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“.

And this leads us to today’s discussion as well as answers for entrepreneurs and business owners trying to decide what’s best for their company:

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 device presence? (That depends.)

Below, I’m going to break out the key differentiators between PWAs and native apps. While each platform indeed has its strengths and weaknesses, there are clear use cases for each:

1. Installation

The superficial difference between PWAs and native apps has to do with the way the end user accesses them.

Native apps 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. The opportunity for app owners is considerable, if they can be found with popular keywords or have an existing brand and can count on people looking them up on the stores, which happens a lot nowadays.

Once installed, the app will appear on the user’s home screen with a recognizable icon and text label that calls attention to its presence.

Native App Icon on Home Screen

That said, this means that when you develop a native app you have to submit it for consideration to one (or more) of the device app stores you want it to appear on. It’s then up to the users to find the app, read the description and reviews, and determine if it’s worth downloading and saving to their mobile device’s screen.

PWAs, on the other hand, help you avoid dealing with administrative headaches in app stores. Instead, these web apps run right from within the mobile device’s browser. The Financial Times PWA is a good example of this:

FT PWA Add to Homescreen
The FT PWA in Google Chrome

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 by searching for it in the mobile browser. If users aren’t aware that the PWA even exists, it may be surprising to encounter a truncated version of the website when they expected an experience that mirrors the one from the regular website. 

However, once they do discover it, it’s 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.

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. 

iOS PWA Add to Home Screen
iOS users will still need to find the Add to Home Screen button

 

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.

Progressive web apps, on the other hand, 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:

PWA Native menu
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!).

3. Offline use

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 is a tradeoff with this option, 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.

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 to the desktop of a mobile device, it’s going to pull directly from the device’s resources.

For more resource-heavy apps, ones that users interact with frequently, or those they forget to close out of altogether resource use in terms of power/battery, storage space and mobile data use can be consistent.

That’s, of course, not to say that PWAs can’t cause similar drainage issues. The Safari app causes nearly as much of a burden as the most commonly used apps on this 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. 

That said, 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.

native apps automatically updateFor your end users, this one isn’t going to make much of a difference as most updates will go unnoticed. However, when it comes to the developer’s side of the equation, updating a native app is definitely more labor-intensive (and can oftentimes be frustrating) than updating a PWA.

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 search SEO as it works like any other website you’d encounter online.  

Accessing a PWA from Google
FT’s PWA accessible from a simple Google search

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!

Native apps provide Push Notification. 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 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. There doesn’t appear to be plans for Apple & iOS to support this in the near future, either.

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 using this powerful kind of notification.

8. Security

Security and privacy are key in 2018, 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. However, security is always a delicate subject when building anything for the web. 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 best things about building your application 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 asks users for permission to send push notifications to their mobile devices.

Push Notifications
Push Notifications on iOS 11 need to be manually accepted

 

And, 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.

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 development process which gets duplicated for each platform. Additionally, there’s a high cost of maintenance for native apps.

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. An agency generally charges $40-80 thousand for a native app built from scratch.

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. As such, 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.

A native app will likely end up costing you more than a progressive web app and also take longer to build–depending on which route you take. Building a native app from scratch with the assistance of a developer or agency would indeed be costly.

However, building a native app with a WordPress-specific app development service like MobiLoud would give you similar results, but at less than 10% of the cost and a time to market reduced to about one week. Ongoing maintenance and support would be included, making it easy to quickly make a return on your investment.

Regardless, 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.

Note: There are other factors to consider when deciding between native app and progressive web app–like performance, quality of design, etc. But much of what that boils down to is the quality of coding; not whether the app is native or exists in a web browser. So, 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.

Conclusion

The Native vs PWA debate will remain important – but it doesn’t have to be a competition. There are use cases for both, and it depends on what you want, and need out of the technology.

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.

On the other hand, a small business that can’t afford a fully native app could consider building a progressive web app instead, saving themselves the time to build and maintain apps on separate platforms. Having said that, solutions like Canvas offer small and larger businesses the opportunity to have the advantages of apps without the cost of developing them from scratch.

Another good use case for a PWA would be for startups. If you don’t need your app to hook into the native features of a smartphone, and if your goal is more to present an improved experience on mobile devices, a PWA would be a cheaper and quicker way to get one out.

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, and e-commerce companies that want to deliver timely updates and native functionality to customers and followers.

Of course, with a native app, you’ll have to take into consider the costs, time to launch, as well as the choice between iOS and Android stores if you decide to build a native app…

Or do you?

Using Canvas, MobiLoud can publish your web app or website as a fully native app. With this approach, you get the benefits one would normally find solely with a native app — for example, app store distribution and push notifications — but you avoid the expense and effort of developing an app experience from scratch.

If you have an existing web community, web application or content site, a solution like Canvas gives you a way to experience all the benefits of an app without extra development. You can satisfy mobile users who prefer the web experience, whether they’re Android or iOS users, without incurring the necessary additional maintenance expenses for the two operating systems.

If you’re ready to develop your own mobile app, why not check out our free demo page?

MobiLoud