Select Blog Categories
Select Blog Categories
Is a Progressive Web App the Best Option for Your Business in 2021?
Paragraph Types Field
But the last few years have seen an evolution of the mobile app. More and more of the biggest brands and publishers, including Forbes, Uber, and Starbucks, have turned to progressive web apps (PWAs).
This new web app technology provides the functionality of native apps with the accessibility of a website.
So should you be focusing on PWAs, or are native apps and responsive websites the better option?
In this guide, we’ll take a closer look at PWAs, examine the benefits and drawbacks, and check out some real-world examples.
What Is a Progressive Web App?
A progressive web app is an application that is built on a web framework. In contrast to a native app, users can use a PWA by visiting a URL on a web browser. Users don’t need to use an app store to download the application.
PWAs utilise service workers and web app manifests to provide most of the functions offered by native apps, including push notifications, faster speeds, and an intuitive app-like user experience. Users can also access most of the features when offline.
The Installation Process: PWA vs Native App
The PWA installation process can dramatically reduce user abandonment by reducing the number of steps involved. The streamlined process eliminates the need to use Google Play or the Apple App Store. Users can access the PWA and install it on their device home screen directly from within the browser.
Native App Installation
To download iOS and Android native apps, users need to navigate to the app store, search for the app, and click on the “Install” button.
After accepting authorisation, users must wait for the app to download before it becomes accessible. Depending on network speed, the download can take 30 seconds up to a few minutes. Once installed, users can launch the app through a home screen icon.
Progressive Web App Installation
To access a PWA, users just need to visit the website. The web app is immediately accessible. Users have the option of adding the app to the device home screen to make it accessible offline.
The file size is much smaller than a native app and faster to download. Once installed, users can access the app through a home screen icon.
The Advantages of Progressive Web Apps
Progressive web apps offer the intuitive user experience and functionality of a native app with the accessibility and convenience of a website.
1. App-Like Performance
After the initial page has loaded, a PWA enables users to experience similar speeds to a native app. The user experience is fast and smooth, with no stuttered scrolling or slow to respond elements.
Faster speeds can be critical for conversions and bounce rate. According to a Google analysis of 11 million web pages, slow page speeds have a significant impact on bounce rate:
2. Offline User Access
PWAs can be operated when the device is offline. While a website requires an internet connection, the built-in service workers cache the most important features and data of the web app automatically. Once cached, users can access most of the features without an internet connection.
If a user attempts to open a page that has not been cached, the web app can show a custom offline page. The user might not be able to complete the task they wanted to, but the experience is still within the app, rather than the default “No internet” web page that leads to user abandonment.
3. No Manual Installation or Updates
Unlike a native app, users don’t need to visit the app store to download and install the app before it can be used. With many users becoming wary of adding any more sizable apps to their devices, this can be a huge benefit.
There’s also no need for users to install manual updates. When the PWA is updated, all patches and new features are immediately available to all users. The web app can be updated as often as needed without the risk that too frequent updates will lead to user frustration and app abandonment.
4. Smaller File Size
A PWA is typically much smaller than a native app file. They also require much less bandwidth as the service workers are much more efficient at caching important information.
For Pinterest’s PWA, the file is just 150kb for a home feed load. This is in comparison to the 9.6Mb native app for Android and 56Mb for iOS.
The reduced download time can benefit users wary of installing large apps and companies expanding into developing markets where mobile data and internet connectivity are less reliable.
5. Search Engines Can Index PWAs
While a native app needs to be found in app stores, PWAs can be discovered directly through search engines.
There’s a misconception that CSR cannot be crawled by search engines, damaging the SEO of a website. But search engines can index progressive web apps just like HTML web pages.
Here’s an example of how Google crawls a PWA using the mobile-friendly test results for Starbucks’ web app:
Googlebot is capable of crawling and indexing PWAs just like any other web page.
6. Push Notification Functionality
Like native apps, PWAs can access device push notification functionality. According to Google Developers research, nearly 60% of consumers allow progressive web applications to send push notifications:
The average open rate for push notifications is around 20%. Rather than sending marketing emails to a crowded inbox, you can send notifications and advertising directly to a user’s device.
When You Should Choose a Progressive Web App
If you meet any of the four criteria below, you should consider a PWA for your development project:
You Have a Limited Budget
The cost of development and maintenance of a PWA is significantly less than a native app. Because of the different requirements for Android and iOS, you’ll need to develop and maintain two versions of a native app. With a PWA, a single development caters to all operating systems and devices.
Time To Market Is Important
Your PWA development team only needs to work on a single version of the code. Rather than building two versions of a native app from scratch, you can focus on creating a single progressive web app that works on all devices and operating systems. PWAs are much faster to develop and bring to market.
Offline Access Is a Priority
Users can access your PWA 24/7, even when their device is not connected to the internet. In areas where internet connectivity can be unpredictable, PWAs work offline, allowing users to spend more time engaging with your product. It’s important to remember that 46% of smartphone users access the internet through 2G or 3G devices.
You Want to Reach a Wide Audience
Progressive web apps enable you to reach a wide audience across multiple devices. Users get the same fast and smooth experience whether they access the PWA through mobile, tablet, or desktop.
If a user loves your app and wants to share it with a friend, it’s as simple as copying and pasting a link. Users don’t need to navigate to the app store and download your product before using it.
You PWA can also rank in search engine results for a range of relevant search terms, rather than competing in an ultra-competitive top 10 list on app store rankings.
When You Should Choose a Native App
PWAs offer the fast and intuitive user interface and experience of a native app, but there are some limitations.
Since 2018 and the iOS 11.3 update, progressive web apps have been supported on all Apple devices. However, iOS does not support PWA push notifications or background sync.
It’s also worth noting that Safari does not show an “Add to Home Screen” installation prompt when a user accesses a PWA. Users can still use the app, but they will need to open the browser settings to find the installation option and add a shortcut icon to the home screen.
For both Android and iOS, PWAs can’t access Bluetooth and USB functionality. PWAs are also unable to access device GPS location data for GEO-fencing.
There are very few progressive web applications that need to leverage this device hardware, but if these functions are integral to your product, a native app would be a better option.
3 Examples of Successful PWAs
Some of the most digitally innovative companies are already using PWAs to provide engaging and enjoyable experiences that combine the best elements of web development and native apps.
Here’s a look at how three leading brands have used PWAs to great effect:
Starbucks wanted to create a web experience that rivalled its native mobile app, allowing users to place orders through its website intuitively.
With the company expanding into emerging markets, it was also crucial that the system provided a universal experience and was accessible to users without a robust internet connection.
The Starbucks PWA provides offline functionality. Customers that are on the move and drop in and out of connectivity and those in emerging markets where connectivity isn’t as reliable can still use the web app.
Users can browse through the menu, select items to order, and add extras to each item - all without an internet connection. When the user is back online, they can place the order through the PWA.
Starbucks’ progressive web app has been hugely successful. The number of website orders doubled, and desktop orders increased to the same rate as mobile orders.
Pinterest revamped its mobile web experience by building a progressive web app that offers a native app-level experience. The social media giant wanted to expand into international markets and improve a poor conversion rate for mobile users. Only 1% of mobile web users were converting into sign-ups or app installs before the launch of the Pinterest PWA.
Taking advantage of the development speed offered by progressive web apps, Pinterest created its PWA using React, Redux, and webpack in less than three months.
After the launch of the PWA, Pinterest reported a 40% increase in average mobile user time spent, a 60% increase in core engagements, and a 44% increase in user-generated ad revenue.
With a focus on expanding into new markets and improving the web experience for new audience segments, the innovative ride-hailing company developed a PWA to enhance its mobile web and desktop user experience.
The Uber PWA provides an app-like experience to desktop users and those who cannot use the native app due to connectivity or low-end device capabilities.
Uber’s core PWA is only 50kb and can be fully loaded and accessible for 2G users within 3 seconds. The desktop experience is much more user-friendly and intuitive, allowing the company to cater to users that prefer to plan journeys ahead of time using a desktop device.
In a 2019 blog post, Uber Senior Product Manager Madhur Chadha revealed:
“Since rolling out m.uber.com, we observed that 30% of riders primarily request trips on a desktop computer as opposed to on a mobile device. According to our research, riders who wanted to plan their travel in advance also tended to use and appreciate the desktop experience.”
In the first quarter of 2021, 54.8% of all website traffic came from mobile devices. More and more people are using their smartphones to find your products and services and engage with your business.
Native apps can still be a valuable asset for most businesses. But PWAs combine the accessibility and reach of web development with the intuitive user experience and engagement of native apps. You can capitalise on the fast time to market and avoid the expense and complexity of developing a native app.
If you’re interested in how a progressive web app can help to grow your company, get in touch with our friendly development team here at Zyrous.
Who We Are
Zyrous provide mobile, web, and progressive web app design & development services. We couple UX design and human-centered design methodologies to develop scaling products that provide value to the people that use them. With teams based in Perth, Abu Dhabi and Dubai, we specialise in validating concepts through to product launch and beyond. We deliver transformative digital products into government and enterprise through agile project methodology in a highly secure environment.
Justin Denholm - Director
About the author:
Justin has over 25 years of experience in technology across all verticals giving him an understanding of the "Big Picture". He has a love for design-thinking and creating compelling digital experiences that leave your customers feeling inspired.