Which is better – a native mobile app or a progressive web app?

That’s a great question and it is one that we are asked frequently about here at ITG. After taking a deep look at the matter, we can reasonably say that as not everything you read these days is up to date, or entirely forthcoming about the real differences between native and progressive web apps. To back up our position, you only need to take a look at companies like Starbucks, Uber, Airbnb and countless others responsible for pushing nearly all Fortune 500 companies to “go mobile” for achieving startling levels of growth. If you’re watching carefully, many of these same companies are causing new waves with PWA’s. As a certified Magento partner and specialist in eCommerce, we congratulate you for wanting to learn more about Progressive Web Apps as we take aim at setting the record straight.

What is a Progressive Web App?

That’s a question we are asked quite often about here at ITG. Progressive Web Apps (PWA’s) are advanced web applications that offer a competitive alternative to native mobile applications. They offer customers the same experience of a native application, but through a browser. In the browser, PWA’s look, feel and function like native apps. As a certified Magento partner and specialist in eCommerce, we congratulate you for wanting to learn more about Progressive Web Apps as we take aim at setting the record straight.

Why is there so much buzz about pwa?

As a technology, progressive web apps only became a thing around 2015. Businesses of all sizes have discovered that PWA’s have major advantages compared to traditional web sites and native mobile applications.

They often turn to us as creating Magento-powered PWA’s is one of our core specialties.

Product-market fit is a critical issue with native apps. People are increasingly relying upon mobile devices to access the Internet. Mobile devices are responsible for 60% of all online traffic in the United States and Europe. Moreover, people spend nearly 90% of the time using their mobile devices in mobile apps. PWA’s provide mobile-friendly experiences that look and act like native mobile apps – making for an easy product-market fit for any eCommerce business.

What about the technical aspects of PWA’s? Why is PWA development generating so much excitement with developers, too?

• Industry-leading, modern, fast and rapidly expanding technology.
• Independence of development teams because of a larger JavaScript developer community.
• One development and maintenance team!! It reduces costs and provides a high reusability of knowledge.
• Rapid updates at every phase, from code to marketing.
• Distribution is much faster with a single URL vs. asking customers to go to the app store to download the newest version.
• Backed by Google!! Google prefers this very strongly as PWA’s are great for SEO.
• PWA’s support push notifications.
• Ubiquitous – no separate desktop version is needed, will work with most browser-enabled devices – smartphones, tablets, laptops and desktops.

Why is there a need for PWA’s?

Going with all that buzz, PWA’s meet or beat native mobile apps in nearly all business cases for a fraction of the cost.

According to the US Small Business Administration, close to 90% of the 29 million businesses in the United States qualify as Micro-Businesses with 0 to 10 employees. Mobile apps have a high barrier to entry, effectively starting at $150k for a high-quality app plus a long-term commitment to its continued development, for starters. Simply stated, it can be exceedingly difficult for a small business to see any ROI from their investment in a native mobile app.

From our perspective as a certified Magento partner and eCommerce specialist, PWA’s provide small businesses an opportunity to better compete with big businesses in any sales vertical. This includes enabling small businesses to better compete against Amazon.com, itself responsible for nearly half of all US online sales. The utter convenience of a PWA may be all that is needed to sway your customers to order through you instead of the online behemoth.
In short, Progressive Web Apps are a much-needed game changer for businesses engaged in eCommerce.

Differences between native apps and progressive web apps

Because there are so many important differences, it’s best for us to do a side by side comparison:

Progressive Web Applications	Native Mobile Applications
Easier to code. A single code for all platforms using JavaScript, HTML and CSS.	Harder to code. To work on both Android and iOS devices requires two sets of code, or a cross-platform hybrid with more complex requirements.
Ubiquitous. PWA’s will work on any web browser-enabled device – smartphones, tablets, and personal computers.	Platform-specific. Android and iOS apps will only work on devices making use of the same operating systems, and won’t work on personal computers.
Lower upfront investment required. A basic PWA starts at $3k while full-featured Magento eCommerce PWA’s cap out under $80k.	High barrier to entry. A basic, high-quality app starts at $50k per platform. Realistically, the cost to develop a competitive native app starts at $150k and depending on functions can run $1 million or more.
Low long-term support costs. PWA’s require fewer updates. They depend only on maintaining a website hosting provider though some may have third-party subscription services.	High long-term costs. Need for ongoing development to remain competitive and keep current with devices and OS changes. Also often reliant upon cloud and third-party services.
Easier distribution. PWA’s are downloaded directly from your website. No competition.	Harder distribution. Native apps are downloaded from Google Play, the App Store, or independent app stores. It can be hard to get your app noticed.
No App Store Commissions. You don’t need to pay app stores 30% of your app’s earnings.	Store Commissions. Google Play and the App Store receive 30% of your in-app purchases.
No Approval Needed. You can do what you want on your website.	Store Approval. App stores review all apps and may refuse to list apps that don’t comply with their terms and conditions.
Only 4 Steps needed = Lower cost per install.	Eight or more steps needed causes cost per install to soar.

These differences all have a major impact on development costs, marketing and distribution of your app. That brings us to some of the technical differences between PWA’s and native mobile apps.

How do progressive web applications work?

Before getting technical, it is really worth pointing out how simple it is for customers to install and interact with a PWA compared to Native apps. Google has found that PWA install banners convert 5-6 times more than native install banners. This is hugely important given that the average cost per install of a native mobile app runs $0.44 for Android and $2.37 for iOS apps in the United States. Each step required in an installation process is a barrier that may prevent a customer from ever using an app.

PWA Install Process

1. Visit the web site.
2. Add the PWA to the device home screen.
3. Open the app.
4. Engage with the app.

Native App Install Process

1. Access an app store.
2. Sign into the store.
3. Search for an app.
4. Click “Install.”
5. Accept permissions.
6. Wait for the download to complete.
7. Launch the app.
8. Register the app.
9. Engage with the app.

If you’d like to see first-hand how a PWA works, please check out our PWA Demo!

Just looking at the install process is an indicator that PWA’s are installed quite differently than native apps, owing in part to the lightweight components that make them work:

1. The Web App Manifest. This is a JavaScript Object Notation (JSON) file that tells browsers how the progressive web application should work on the user’s mobile device or computer. It includes the app’s name, version, description, and a list of all of the PWA’s resources including links to icons, images and other items.
2. The Service Worker. A programmable network proxy in JavaScript code, the Service Worker handles network requests serving and securing data over HTTPS. It enables the PWA to synch data, deliver push notifications and centralized updates. Service workers use caching mechanisms to keep the PWA error-free when the device is offline.
3. An Application Shell. This architecture provides connectivity resilience and it is what makes a PWA feel like a native app to the user, giving it application-like interaction and navigation, and reliable performance.

Other components may be added depending on your requirements, suffice that file sizes of PWA’s are often 99% smaller than native mobile apps.

Prime examples of business PWA’s

As progressive web apps aren’t yet distributed by app stores, there are no statistics about how many PWA’s are in circulation. That’s compensated by just how many satisfied PWA adopters are happy to share their own performance statistics. Let’s start off with a progressive web app example from one of mobile’s most consistent trendsetters.

In transitioning their website to a progressive web app, the Starbucks PWA weighed in at 233kb – somewhat larger than most PWA’s but 99.84% smaller than its 148Mb native iOS app. Indications are that Starbucks has doubled its number of daily web user conversions with an even split between mobile and desktop users. Starbucks gave the whole “mobile app” ecosystem a huge lift in 2014 in reporting that its mobile app generated over $1 billion in revenue.

There are several more of the best progressive web app examples to draw from, here are some from brands you likely already know well:

• Alibaba.com, the chief international rival to Amazon,  increased its conversions on the mobile web by 76% with its PWA. In the process, Alibaba reported a 30% increase in its active users on Android and a 14% increase on iOS. Alibaba also observed a whopping 400% increase in interaction rates from their “Add to Homescreen” button.
• The dating app, Tinder, cut its load time from 11.91 to 4.69 seconds with their new PWA. Not only is it 90% smaller than their native Android app, they indicate all user engagement metrics are up, too.
• Uber’s PWA was designed to run on 2G networks (most of readers are using 3-4G, if not 5G, networks. So, 2G’s like out in the boondocks. It’s just 50kb gzipped and loads in less than 3 seconds.
• Pinterest’s new mobile site is a PWA. They claim time on site and user-generated ad revenue has increased by at least 40% each, with an overall 60% increase in user engagement.
• Forbes indicates they’ve cut their load time from 6.5 to 2.5 seconds with their PWA while doubling the average user session time and generating 20% more impressions compared to their original mobile website.
• Users of Housing.com saw its PWA speed load times by 30% leading and bounced 40% less, with overall conversions increasing by 38%.
• Nikkei, a major media business in Japan, launched a PWA resulting with substantial performance gains, as well as a 230% increase in organic traffic, 58% increase in subscriptions, and 49% more daily active users.

For additional progressive web app examples and how they have worked for businesses like yours, please checkout the client cases in our project portfolio!

10 Essential PWA tools for developers

If you are looking to jump into developing progressive web apps yourself or determining project requirements and resources for your team, you’ll find these tools invaluable. Most are open source and cover tools to develop, test, and debug your PWA. Make sure to check out the ITG blog, too, for the latest news and events about Magento, eCommerce and PWA’s

1. Angular JS – An open-source, front-end JavaScript web and PWA framework maintained by Google that is highly modular and enables developers to easily add functionality to PWA’s.
2. Chrome Dev Tools – Though not used for creating PWA’s, developers still need tools to test and debug them. Chrome Dev Tools provides built-in browser tools for developers to test PWA (and websites), however each of the major browsers, Safari, Firefox, Edge, and Opera also have built-in tools of their own.
3. Ionic – An open-source SDK for hybrid mobile app development that can be used by any interface and progressive web app framework licensed by the Michigan Institute of Technology (MIT).
4. Lighthouse – An open-source, automated tool by Google used to generate audits for use in improving the quality of web pages and PWA’s.
5. Polymer – Developed by Google and GitHub contributors, developers like this open-source JavaScript library that works with other libraries and makes it easy to create and reuse web applications in PWA’s.
6. PWA Builder – Established by Microsoft, with support from Google, Intel, Mozilla and other major tech names, this open-source project makes it easy to turn websites into Progressive Web Applications.
7. React JS – A JavaScript library maintained by Facebook popular for building user interfaces that is also used to make Progressive Web Apps far more SEO-friendly and visible than native mobile applications.
8. Vue JS – An easy-to-use, open-source JS library for building user interfaces, created by Evan You. Similar to React JS, it provides very fast run-time performance and uses a virtual Document Object Model (DOM).
9. Webpack – Despite a steep learning curve and other shortcomings, this JavaScript module bundler is indispensable for making complex PWA’s faster.
10. Workbox – Another set of libraries and Node modules by Google to cache assets and improve performance of Progressive Web Applications for offline-first experiences – PWA’s that don’t need an Internet connection to run once installed.

Challenges in the proliferation of PWA’s

While there are many advantages to Progressive Web Applications, there are some factors holding it back from more widespread adoption. Two limitations are already about to fade into history. Since 2018, Apple has started incremental MAC and iOS iOS support. That’s huge given Apple’s previous reluctance as Apple holds a large and lucrative share of the mobile device and app market. Concurrently, both Apple and Google are taking steps to make PWA’s available on the App Store and Google Play.

The greatest myths surrounding PWA’s and suppressing them from being accepted as viable solutions concern their ability to access device features. But – honestly, if you can do it on a website, you can do it in a PWA. At worst, it will require using additional API’s, extra coding and testing. This brings PWA functionality to cameras and microphones, geo-location, bar code scanning, video streaming, and more. Bear in mind that native mobile app development is a large and lucrative tech niche and PWA’s can disrupt it.

In reality, PWA’s have very few limitations, mostly confined to:

• There are still many devices and browsers in use that don’t support all PWA functions, though the average lifespan of mobile devices in the United States is less than three years.
• PWA’s can work offline, but with limited functionality especially with apps serving large amounts of complex data.
• A PWA cannot replace (though it can work with) On-Demand type apps like Uber which are really 2-3 apps working together, one for customers, one for service providers, and one for administrators.

Who needs a progressive web application?

Business owners frequently rely upon ITG as a certified Magento partner for the latest eCommerce trends and developments. We are increasingly asked about business cases suited for investing in a PWA. We see a solid cases for PWA’s in four major scenarios:

1. New businesses requiring an eCommerce store.
2. Existing businesses seeking a mobile solution to expand.
3. Businesses wishing to enhance the shopping experience for their customers.
4. Decision-makers who have heard about PWA wishing to learn more about what they offer.

Virtually any business engaged in eCommerce is likely to realize a greater and faster benefit from a PWA, especially a Magento PWA, than a native mobile app. A high-quality, full-featured native app is likely to run $150k with a high-long-term commitment – and even that will only reach one user segment – Android users or iOS users. PWA’s are increasingly supported by all major browsers on mobile devices, tablets and – don’t forget, desktop users, too (remember the Starbucks PWA?). These costs don’t even start to factor in marketing and distribution costs.

Odds are if you are in retail, have a physical storefront, that you’ve noticed a gradual decline in at least the frequency of some regular shoppers. While Amazon dominates online spending in the United States, other major retail chains are also aggressively engaged in capturing market share with mobile solutions, too – Target, Walmart, BestBuy, HomeDepot, etc.

PWA’s help even the playing field for small businesses providing their customers the same convenience and experience offered by these giants. If you intend to compete and want to claw back your customers from their clutches, PWA’s give you that opportunity.

Is it worth investing in the development of PWA?

Considering everything that we’ve discussed to this point, it may be best to ask about what kind of business cases or mobile apps warrant investing $100k of additional development costs upfront, while requiring an expensive long-term commitment and a very large marketing budget? Well, there are still some cases where the costs associated with native mobile apps remain the best option. In our experience, these are limited to:

1. Applications that make use of complex features or complex data.
2. Startups seeking to scale up and grow market share rapidly with venture capital.
3. On-Demand type businesses like Uber that depend on service providers.
4. Large corporations and brands already operating at scale.

These represent only a minority of businesses – with startups and on-demand businesses (often synonymous) needing very specific strategies to accommodate their growth, while also having a fairly high failure rate.

Progressive Web Applications are a worthy investment for most types of businesses. They provide small businesses the easiest and most affordable way to effectively engage the mobile market to grow their business. It adds the icon for your business straight onto their smartphone, tablet or computer for one click access to your online store.

Most small businesses don’t have the resources to invest in a high-quality native mobile app. If it’s not competitive, people won’t use it. Most native mobile apps have an abandonment rate of 80% over just 30 days. Many are used just once. Their initial price tags begin at $100k and depending on features, can easily run $500k or more. Native apps also require a long-term commitment to their continued development to remain competitive.

Are Progressive Web App the Future of Mobile?

While web applications have been around for many years, Progressive Web Apps really only became a thing in 2015. Now, PWA’s are supported to varying extents by all major mobile and desktop browsers including Chrome, Safari, Firefox, Edge and Opera. Progressive web apps give businesses the ability to easily sidestep the Android vs. iOS rivalry over mobile device market share. It’s almost like taking a page from Tolkien’s Three Rings Trilogy, “One app to rule them all” or at least, one type of app that can be used by all web browser-enabled devices.

More importantly, PWA’s are more affordable and have a much swifter path to a better ROI than native mobile apps. PWA’s are faster to develop, easier to market and distribute, and require far less support. Apple’s move to start supporting PWA’s in iOS and MAC browsers, and intention to include them in the App Store effectively eviscerates the main reason why many US businesses have been slow to adopt PWA’s.

This precipitates the same kind of convergence that put an end to the HTML version-based browser wars of the 1990’s and early 2000’s. Then, every major tech company wanted to see its version of HTML become the standard. App visibility has been one of the big problems with all app stores – with millions of apps all competing to make the top app lists. Progressive Web Apps SEO-friendly mechanisms nearly eradicate the issue by making it exponentially easier for PWA’s to show up in search engine results.

And besides, who wants to keep handing out 30% commissions to the Tech Giants?

Lingering questions about PWA’s for your business?

If you’re already excited about progressive web apps, you can get started right away. We recognize that there’s a lot to absorb about progressive web applications. While we’ve done our best to cover all of the major points about PWA’s and show you some of the best progressive web app examples, it’s likely that you still have questions specific to your business. While that question is fresh in your mind, we welcome you to talk with one of our professional PWA and Magento eCommerce specialists to answer your questions now.