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. 

Key takeaways

  • There are 3 ways to reach users on mobile: a responsive websites, a native apps and progressive web apps. 
  • Responsive websites are dynamic websites that adjust to the screen size they are viewed on. 
  • Native apps are installable apps that have more hardware capabilities and allow brands to push notifications among other things.
  • Progressive web apps are the best of both worlds, they built in the web which means they can be indexed by search engines while still being installable and offering push notifications. 

On this page:

    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.

    chart showing the different features of a responsive web vs a native app vs a progressive web app

     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.
    Infographic showing the top features of progressive web apps

    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.


    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.

    Chart showing the benefits of web progressive apps and how they better the user experience

    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.
    Image showing how progressive web apps can improve the customer experience and impact ecommerce mobile shopping

    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.

    Yes, Core dna is can be used as headless or as a decoupled platform and by essence is fully responsive.

    A responsive platform like Core dna is a great tool for developers who want to create responsive websites. It is easy to use and provides a wide range of options for how your website can respond to different screen sizes. 

    You can also customize the look and feel of your site with this platform, making it truly your own. If you're looking for a responsive platform that will make your life easier, this is the one you need.

    For more information, a decoupled platform is a web application platform that uses a decoupled architecture to provide a responsive user interface. A decoupled architecture separates the presentation layer from the business logic and data access layers, allowing each layer to be developed independently. This separation of concerns makes it possible to develop the presentation layer using a variety of technologies including responsive web design.

    The advantage of using a decoupled responsive platform is that it allows for a more agile development process. The presentation layer can be developed and deployed independently of the business logic and data access layers, meaning that changes to the user interface can be made without affecting the rest of the application. This can be particularly useful when developing applications that need to be compatible with a variety of devices and screen sizes.

    When it comes to the headless platform, it allows businesses to manage their e-commerce site without the need for a traditional web design interface. This type of platform uses an API to connect the back-end e-commerce system to the front-end content management system, making it possible to manage e-commerce site content from a single interface.

    It gives you the flexibility over the front-end as well as the ability to integrate with all devices, support emerging trends like voice search, and more. 

    Do you want to learn more about Headless Commerce? 👉 Download our Headless Commerce Guide 


    Schedule a one-to-one consultation with your product specialist

    Here’s what you can expect:

    • Walkthrough: An introduction of the Core dna platform
    • Analysis: Personalized recommendations based on your  business needs.
    • Case studies: How other businesses have used Core dna to scale more efficiently


    The Core dna platform is the product of a decade of experience in web solutions. Capitalize on our expertise across a variety of industries and leverage our reputation for excellence in web solutions by offering your clients the benefits of a trusted brand. Core dna Partners instill confidence in the solutions they provide through our reliable platform that evolves with the online environment and adapts to their changing needs.


    Minimize risk and eliminate redundancy issues by ensuring your clients' brands are well supported, well understood and well communicated through a robust software platform that will evolve with you and provide you with comprehensive support. Our team of designers and developers are highly qualified and passionate about what they do.


    Expand your range of business solutions and enhance your service offering by becoming a member of a program that combines complementary technologies, maximizing benefits and optimizing the use of resources. Share the value of technologies developed by Partners and save time, money and opportunity costs, safe in the knowledge that our experienced software developers are continuously innovating, providing you with a competitive advantage and allowing you to focus on what you do best. Core dna is flexible and can be adapted and implemented to fit.

    Core dna is framework agnostic.

    An agnostic framework means you can create any design using the front-end technology and frameworks that you know and love.

    We believe in being open-minded and non-discriminatory when it comes to technology choices, and we want our clients to feel empowered to use whatever works best for them and their projects, regardless of whether it's something we've already tried and failed with before! 

    Core dna never requires you to use specific templates or libraries. As a decoupled platform, Core dna also has server side templating that can be used to deliver projects quickly and efficiently using only HTML, CSS and Javascript. The server side frameworks supported are Twig and Smarty.

    What is an agnostic framework?

    An approach to software development that doesn't favor any one language or technology over another. Agnosticism is a philosophical position which states that it is not possible to know anything about God or other supernatural beings. A Software Agnostic approach would say that there is no right or wrong when it comes to the tools you use in your job as long as they get the job done.

    What is Smarty?

    Smarty is a template engine for PHP. More specifically, it facilitates a manageable way to separate application logic and content from its presentation. This is best described in a situation where the application programmer and the template designer play different roles, or in most cases are not the same person. It is extremely fast. It is efficient since the PHP parser does the dirty work. No template parsing overhead, only compiles once.

    What is Twig?

    Twig is a modern template engine for PHP. It's fast. Twig compiles templates down to plain optimized PHP code. The overhead compared to regular PHP code was reduced to the very minimum. It is secure. Twig has a sandbox mode to evaluate untrusted template code. This allows Twig to be used as a template language for applications where users may modify the template design. It is flexible. Twig is powered by a flexible lexer and parser. This allows the developer to define its own custom tags and filters, and create its own DSL.

    What is a decoupled platform?

    A decoupled platform is a software architecture where components are independent of each other. This allows for easier development, testing, and maintenance of the individual pieces that make up the whole product or system.

    Decoupled platform advantages: 

    A decoupled platform will allow your software to be more easily scalable and upgradable as new technologies become available. It also means your developers won't have to worry about updating multiple parts of your application every time there's an update released; they'll just need to update one piece at a time!


    Schedule a one-to-one consultation with your product specialist

    Here’s what you can expect:

    • Walkthrough: An introduction of the Core dna platform
    • Analysis: Personalized recommendations based on your  business needs.
    • Case studies: How other businesses have used Core dna to scale more efficiently

    Sam Saltis
    Sam Saltis

    An entrepreneur at heart with over 20+ years of experience in building internet software, growing online companies and managing product development.

    Loves all things SaaS, technology, and startups.

    You can find him feeding his beloved fish when he's back in Australia.

    Previous Post6 Must Haves for a Product Page that Converts
    Next PostThe Complete Guide to Building a Franchise Website