Progressive Web App Explained - with Examples

Mobile shopping has been growing steadily. It's expected that this trend will continue. By 2025, 44% of all e-commerce sales in the US will come from mobile app shopping. 

Businesses need to be accessible on mobile devices to meet the increasing demand. Interactions with customers must be smooth, speedy, and straightforward. 

Responsive website vs native app vs Progressive Web App (PWA)

Let's start by understanding type of apps and web apps are out there. Today, there are 3 ways for businesses to present on mobile: A responsive website, a native app or a progressive web app.

Below an illustration of the main differences between them.

 Responsive websites

• Responsive websites are dynamic websites that change sizes depending on the device they are viewed on. This was the next logical step when mobile became popular. It let companies offer a better experience for mobile users, without the costs of developing native apps.
• Responsive websites are easy to share, load fast and can be accessed via multiple platforms. Yet they do not support native app features like push notifications or being installed on a phone. 

Native apps

• Native apps are built to run on a specific operating system like Android or iOS. Developers need to use specific languages like Java or Swift to build the apps or give up some of the native look and feel with a cross-platform development tool like React native.
• Native apps offer many advantages. They are easy to access, load quickly, and have more hardware capabilities. Yet they take months to develop and reviewed by Google play or Apple Store. 

Progressive web apps

• Progressive web apps are the best of both worlds. They sidestep all of this as they're just an extension of your website. They offer newer web features that offer a more native-like experience. You don't deal with app stores, and the technologies are standard for frontend developers.

So What Exactly is a Progressive Web App (PWA)?

A progressive web app is a website that looks and feels like a native app. Progressive web apps are built in the web and run in the browser. There's no need to download the app from the Google Play Store or iOS App Store.

PWAs are meant to eliminate a range of issues from slow networks to data limitation or complete lack of connectivity. Progressive Web Apps leverage the latest web technologies to provide a reliable, fast, and engaging user experience.

Twitter is the success story progressive web applications. Go ahead and log into your Twitter account via your smartphone’s browser. Ta-da! You’re now using a Progressive Web App that’s capable of performing real-time notifications, offline notifications, and other app-like functions.

Another progressive web app example can be found in Gmail. Again, log into your Gmail account via your smartphone’s browser, and you’ll experience an app-like experience that allows you to individually select emails, label them, move them between folders, and so forth. You’ll also see new emails drop into your inbox in real-time. 

What Makes a Progressive Web App?

Let’s get nostalgic for a moment. The term Progressive Web App was coined in 2015 by Alex Russell. Together with Frances Berriman, Russell “enumerated the attributes of [a] new class of applications” based on the gradual and powerful evolution of modern browsers. Here are those attributes as Russell and Berriman envisioned them:

• Responsive: To fit any form factor
• Connectivity independent: Progressively-enhanced with Service Workers (we’ll explain these in more detail below) to let them work offline
• App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions
• Fresh: Transparently always up-to-date thanks to the Service Worker update process
• Safe: Served via TLS (a Service Worker requirement) to prevent snooping
• Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
• Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
• Installable: To the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store
• Linkable: Meaning they’re zero-friction, zero-install, and easy to share.

How does a Progressive Web App (PWA) work?

Building a progressive web app? Here are the 2 fundamental components:

 Web manifest

• The web manifest is a JSON file that defines the look and feel of the PWA when it's installed. It's contains anything about looks like home screen icons, colors, names etc . In general, the web manifest includes metadata like the app name, version, description, theme colors, and screen orientation. A web manifest is essential for creating a native-like app experience.

Service worker

• A service worker is JavaScript code that runs in the background of the PWA. Their primary use is to pre-cache resources, so the web app loads fast and can even have offline functionality. After the website has been visited once, the service worker saves - or caches - critical assets like HTML files and images. Service workers can also be used for other tasks such as push notifications and background data syncs.

And 

Transport Layer Security 

• PWAs are required to communicate over HTTPS by having an SSL certificate installed on its web server. The SSL certificate creates a secure, encrypted connection between the frontend app and backend server. These requirements leverage the TLS protocol to ensure secure data transfers when the web app communicates with the backend eCommerce and CMS systems. This is crucial for keeping user information safe and is critical for eCommerce stores that handle customer credit card information.

8 Benefits of Progressive Web Apps

While moving to a PWA will likely require some development work, there are enormous advantages in putting in the effort.

1. It’s faster

• With pre-caching, PWAs load fast even with poor connectivity on mobile devices. Faster loading also translates to better indexing by search engines, and therefore, PWAs have considerable SEO advantages.

2. It’s better for SEO

• From an SEO standpoint, search engines view PWAs as websites and fully index them. Native apps, on the other hand, are not indexed and will not impact your SERP. 

3. It reduces data needs

• Caching reduces the data transfer needs of your app. Fewer API requests reduce your need for server capacity and bandwidth to support your application. Your customers will also use less of their mobile data plan while browsing your web app. Along with this, PWAs usually take up less storage space, so users are more likely to download them than native apps.

4. There’s no need for app stores

• One of the greatest competitive advantages of PWAs over native apps is discoverability. PWAs aren't downloaded via app stores, so there's less friction for potential users to install the app. You also don’t need to build, submit for review, and market separate apps for iOS and Android. Users that are already on your website have the option to install the app, giving them a better user experience and leading to a higher chance of adoption.

5. It reduces development costs

• Native apps require entirely different tech stacks to develop, while PWAs use standard web technologies like HTML, CSS, and JavaScript that are well-know by frontend developers. Upgrading your existing website with PWA features is much cheaper than developing native apps from scratch, and any updates you need to make are instant without requiring review by Apple or Google.

6. It leads to better user experiences

• PWAs are both responsive and progressive. Responsive means they're designed to work on whichever devices users have from phones to tablets or desktops. PWAs also built with the web development idea of progressive enhancements. This means they focus first on core content and features, and if the user's browser and internet connection meet the necessary more advanced features become available. These two tenets ensure a better digital experience for all users.

7. It leads to better engagement

• There's no doubt that PWAs lead to better customer engagement. The caching and offline capabilities of PWAs mean users can browse the eCommerce store at any time, and won't abandon the web app from long loading times. Features like push notifications and location tracking let marketers provide relevant content to mobile users whenever and wherever. These factors make PWAs great for delivering enhanced digital experiences to shoppers.

8. It can increase conversions

• For eCommerce stores, moving to a PWA can drastically improve conversions. AliExpress, for example, increased its conversion rate for new users by 104% with its new PWA. Along with better engagement, PWAs can offer simplified user experience and checkout process that efficient moves user down the sales funnel.

Five ways a PWA can improve the mobile shopping experience

1. Send push notifications or alerts

• Progressive Web Apps can send push notifications after users opt-in. Notifications can be sent at any time, even if the web browser isn't open, Businesses can connect with users and offer product promotions with push notifications to improve customer engagement and retention.

2. Login via social accounts

• Using social integration is a powerful way to improve user engagement and customer acquisition. Allowing users to login via social accounts like Google or Facebook reduces signup friction and can lead to more paying customers. Further integration with social media can include the ability to share wishlists and product reviews for greater brand awareness.

3. Allow shopping without internet

• Progressive Web Apps let you reach consumers in situations you couldn’t before. With poor internet or even no connection at all, customers can still browse your products and have a basic shopping cart functionality. They’ll also still see informative and relevant content in offline mode that’s been delivered to them and been cached by the app.

4. Track unique analytics

• What gets measured gets managed. With PWAs, that includes the challenge of tracking events that occur while offline. Luckily, Progressive Web Apps can be integrated with Google Analytics, and you can add tracking events to gain unique insights on offline browsing behavior, who's installing your Progressive web app, and more.

5. Simplify web payments processing

• With native apps, eCommerce stores are limited in choosing a payment provider. On iOS, for example, Apple holds a monopoly on the payment service and charges fees for in-app purchases. With a progressive web app, you can take advantage of the APIs under the open Web Payments standard, which simplifies the payment process for customers and lets merchants use the payment service of their choice.

Progressive Web Apps (PWA) case studies

We've explained the benefits PWAs bring to eCommerce, and the few drawbacks you'll face. Now let's see the results shifting to a PWA have brought three separate eCommerce businesses: Debenhams, AliExpress, and Flipkart.

1. Debenhams: 40% increase in mobile revenue

Debenhams is a long-standing British retailer with 178 locations in the U.K., Ireland, and Denmark. Over 57% of the company's online traffic was through its mobile channel, Debenhams struggled to make mobile conversions. That's why the company became the first UK retailer to invest in a PWA and reduced the time from browser to purchase by two to four times. Debenhams' new PWA has since increased mobile revenue by 40% and increased overall conversions for the retailer by 20%.

2. AliExpress: 84% increase in iOS conversions

AliExpress is a Chinese international marketplace that has a fast-growing mobile user base. The company's mobile app was fast, but it was challenging to get users to install the app and expensive to engage with them. AliExpress built a new PWA that provided mobile features while making the app more accessible to potential users. As a result, the company saw a 104% additional new users and an 84% increase in its iOS conversion rate.

3. Flipkart: 40% higher re-engagement rate

Flipkart is the largest eCommerce website in India. The company initially focused solely on a mobile app but found it challenging to provide an engaging experience. Instead, the company decided to release Flipkart Lite, a PWA that's led to a 70% higher conversion rate for users that install the app and a 40% higher re-engagement rate.