# Costs and solutions of PWA in eCommerce

Creating Progressive Web Apps doesn't require following a specific implementation path. The main goal of that approach is to push developers to think of users, not technology. But since PWA technology gained popularity, solutions that make it easier to turn a site into a "progressive" one, began to appear. Today, there is a variety of frameworks available, but choosing the right one can be difficult.

Sign up for updates on The PWA Book ⭐️

Table of content

  • Costs and ROI of building a PWA
  • Frameworks dedicated to building a PWA
    • Ionic Framework
    • Quasar Framework
  • Solutions designed for PWAs in eCommerce
    • PWA Studio
    • Mobify
    • Spartacus for Hybris
    • Vue Storefront
    • Angular Storefront
    • Deity Falcon
    • Front-Commerce
    • Scandiweb

The rise of the mobile channel was anticipated almost immediately after the spectacular success of the iPhone. When in 2015, Google confirmed that mobile search had overtaken desktop queries, it was not much of a surprise. The dominance of smartphones in daily usage became official.

With that announcement, Google made it clear that the title of “primary screen for marketers” had just gone to mobile.

💡 More Google searches take place on mobile devices than on computers in 10 countries, including the US and Japan. This presents a tremendous opportunity for marketers to reach people throughout all the new touchpoints of a consumer’s path to purchase. Read More >> Adwords Google Blog.

Google didn't waste its time. In the same year, it introduced two concepts that were supposed to cover the demand for mobile-friendly technology in web development. The first one, the open-source initiative called Accelerated Mobile Pages (AMP), aims to improve the performance of webpages by excluding any author-written JavaScript.

Instead of using JavaScript, interactive page features are handled in custom AMP elements. The custom AMP elements may have JavaScript under the hood, but they’re carefully designed to make sure they don’t cause performance degradation. Read More >> AMP.dev

Progressive Web Apps also appeared in 2015. The goal was the same although it was reached by different means. It is focused primarily on JavaScript and combines the advantages of a mobile application and a website.

# Costs and ROI of building a PWA

Social media providers also implemented PWAs early on, but then eCommerce followed. Companies like Trivago or AliExpress intended to shorten their loading times in the name of increasing conversion rates as well as user engagement.

Now, after Google announced Mobile-First Indexing, and with Microsoft and Apple's support of Progressive Web Apps, more and more companies are turning toward this approach. They are counting on PWAs being a way to narrow the massive discrepancy between time spent on mobile devices and the mobile conversion rate since the mobile conversion gap is around 40%.

The stakes are high. No wonder that - to fill this gap - retailers try to improve the overall speed of their webpage, provide consistent UX on all touchpoints and take full advantage of smartphone features. Many of these aspects can be easily improved with Progressive Web Apps, which also recently became more accessible and guarantee an impressive ROI.

The average conversion rate increase for mobile users was 36%. For a retailer making $5m from mobile annually, the revenue from a PWA will bring an additional $1.8m a year. Even with a conservative margin of 25%, this means $450K of additional pure profit after a year.

In the beginning, in 2015, companies had to build a PWA from scratch. It was still less expensive than creating native mobile apps for every OS but came with costs between $400K and $1m. Now, since Progressive Web Apps are getting more popular, it is no longer the only way. Companies can shorten the time and reduce costs of implementation by using ready-to-go solutions. This can be at least 75% cheaper than building a PWA independently, and is faster (2-3 months).

However, the economic aspects are not the most important. PWA implementation can bring unexpected design challenges and requires a specific skill set from both developers and designers. They have to be experienced in building complex apps and know how to "translate" the language of native apps to web-apps as well. Not to mention, there are also some issues - security, payment integrations, push notifications, service workers - that need to be addressed. If there is no team of experienced front-end developers and UX designers in the company, building a Progressive Web App can be challenging.

Using existing, ready-to-use solutions, especially for smaller companies, can be easier than developing a PWA by themselves.

Check out available PWA development services 🔍

# Frameworks dedicated to building a PWA

Several frameworks simplify PWA implementation.

# Ionic Framework

Ionic is an SDK, based on HMTL5, which allows building native-feeling mobile apps with the help of standard web technologies like HTML, CSS, and Javascript. Focused on UI and UX, it can't stand in for any full Javascript framework, but when it comes to simplifying the front-end, it can be a suitable choice for developers.

# Quasar Framework

Quasar Framework is a high-performance, full front-end stack allowing to build SPAs (Single Page Apps), SSRs (Server-Side Rendering Apps), PWAs, Mobile Apps through Cordova, and Electron Apps using the same base-code. It is an MIT-licensed, open-source project maintained by Razvan Stoenescu along with his team and a community of open-source contributors.

# Solutions designed for PWAs in eCommerce

# PWA Studio

The Magento team released Magento Progressive Web Applications (PWA) Studio in April 2018. Unlike the other solutions listed here, it is a toolbox for building online stores with app-like experiences rather than a ready-to-use framework.

The suite, however, delivers everything crucial to developing a fast and simple front-end, including content personalization, adding local preferences, themes, and an architecture based on modularized components. Moreover, it allows developers to build and manage all channels via one code base, one deployment, and an app.

# Mobify

Mobify is non-standard because it offers a platform to build and manage the PWA front-end as a service. Its key functionality is, however, quite similar and relies on separating the front-end from the backend which makes Mobify also suitable for businesses moving to a “headless” architecture.

# Spartacus for Hybris

Spartacus, an Angular-based JavaScript storefront for SAP Commerce Cloud, is an open-source project, started by an interdisciplinary team of SAP and Divante developers.

The main goal of Spartacus for Hybris is to provide the SAP developers with a headless front-end which could be easily upgraded with each new release. It will allow front-end developers to adapt the front-end and optimize conversion while the backend developers will be able to focus on business logic, security, stability, and scalability by leveraging scalable cloud technologies.

# Vue Storefront

Vue Storefront, an open-source project, sparked by the Divante team, is a standalone PWA storefront for eCommerce, able to connect via API with any eCommerce backend, like Magento, Prestashop or Shopware, ShopifyPlus, Episerver, and WooCommerce, etc.

Visit VueStorefront Page on GitHub

It is considered one of the most significant and most complete PWA frameworks delivering an ultrafast front-end for stores.

# Angular Storefront

Issued by Flagbit in 2018, Angular Storefront is the youngest PWA solution, but it is still waiting for its premiere. Its creators announced that their solution will be aimed at enterprise customers and big, scalable teams.

# Deity Falcon

Deity Falcon is a many-sided, platform-agnostic, standalone PWA solution suitable for webshops, blogs, and bigger platforms.

# Front-Commerce

A ready-to-use storefront solution made in France. This solution offers a micro-services architecture and a front-end with React and GraphQL.

# Scandiweb

This solution was developed by the Scandiweb agency in 2018 and focuses on providing a PWA for stores based on Magento.

Curious how these PWA frameworks and solutions work in practice? Check out TOP 30 eCommerce PWAs benchmark study.

Check out available PWA development services 🔍

Go back to The PWA Book main page >