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.
Table of content
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.
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.
Several frameworks simplify PWA implementation.
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.
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 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.
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, 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.
It is considered one of the most significant and most complete PWA frameworks delivering an ultrafast front-end for stores.
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 is a many-sided, platform-agnostic, standalone PWA solution suitable for webshops, blogs, and bigger platforms.
A ready-to-use storefront solution made in France. This solution offers a micro-services architecture and a front-end with React and GraphQL.
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.
Go back to The PWA Book main page >