Today, everything can be easily accessed via mobile devices – from banking to studying, or from trading to purchasing. As you may already know, many purchasing decisions are made using smartphones or tablets. Therefore, providing a good user experience is associated with adapting the website/eCommerce system to mobile devices and mobile app users. 

You can increase the conversion rate or even average order value by improving site navigation, website speed and offering simple online purchases to mobile-first customers e.g. with a Progressive Web App (PWA) solution.

Among the various standards and technologies, PWA is a leading trend in mobile technology. Applications built with this standard load like regular websites, but their functioning is very similar to native applications. For example, they may display notifications, work offline and in the background, and can use device functions (e.g., camera, geolocation, gesture navigation). 

PWA can be successfully used in different types of businesses – from regular B2C eCommerce to advanced B2B stores. Despite many differences in both models and their operations, purchases are made by people who appreciate the fast operation of the store and convenient service. For this reason, the expectations of business and retail customers are basically similar.

In this article, you will learn about the PWA standard, its benefits, the example of Sylius and Vue Storefront implementation, what can you benefit from choosing PWA and a headless eCommerce.

What is a Progressive Web App?

Progressive Web Application or PWA is a web-based application that is built on common web technologies, i.e. HTML&CSS combined with JavaScript, Vue.js, React or Angular. Using PWA, the user may get an impression similar to native apps, like iOS and Android. You can even download it from your browser and use it the same way. 

Progressive Web Apps may use the phone’s functionalities such as push notifications. They have the ability for offline operations in case the application downloads the appropriate data and caches it. A big advantage for the performance is that PWAs are rendered on the client-side, not on the server-side. In addition, it supports modern APIs and is easily enhanced to provide more advanced capabilities and reliability.

If you want to focus on the mobile experience, you can create PWA without a lot of effort because, compared to native iOS/Android apps, you will have just a single app to develop and maintain. Progressive Web Apps have many advantages and may help your business target both mobile and web-based products and services as it is the one technology for all platforms.

Architecture

The Progressive Web Application model can be implemented on many levels but it mainly involves designing the architecture on an application shell. The requirements are not difficult and have many benefits. Application Shell architecture supports caching of your application shell to make it work off-site.  It is the minimal HTML, CSS, and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repetitive visits. It allows you to display meaningful pixels on your screen really quickly, without a network connection.

What are the real business benefits of implementing PWA?

The implementation of PWA will bring the following benefits:

  • Cost optimization (one team and one technology instead of separate teams for browsers and individual mobile applications) – There is no need to create separate applications per system; access both from a browser on a computer and from a mobile
  • Better visibility in search engines – Progressive Web Apps help with SEO because the bots can crawl them. After all, PWAs are websites, so as long as they are indexable with optimized content, you will be SEO-friendly.
  • Better performance
  • Easier and cheaper acquisition of new users compared to the mobile application.
  • Increasing user engagement, which translates into increased conversions and lowers the bounce rate
  • No typical problems related to mobile applications (long implementation and update times, need to download via the dedicated app store, Apple / Google verification)
  • Integration with any existing (or new) system acting as a data source – back-end.
  • Offline access
  • Greater brand loyalty (in conjunction with push notifications and recurring orders)
radoslaw-zurawski
50-70% is mobile traffic; how much you may lose without guaranteeing an appropriate user experience on mobile?

What attributes should the PWA application have?

PWA is a web application that has been expanded with several attributes (the so-called PWA checklist):

  • Responsiveness: the website should have a responsive design, i.e., one that adapts to the size of the screen. As a result, it looks good on both computer and phone browsers.
  • Independent regarding connectivity: allows you to work offline (thanks to the Service Worker – a mechanism that tries to solve the problem with offline access to web applications).
  • Security: Progressive Web Apps are supported by TLS protocol, which encrypts data and monitors integrity.
  • Up-to-date: Progressive Web Apps do not need to be updated yourself, as the Service Worker constantly updates them.
  • Speed: The Progressive Web App loads quickly, even with a slow internet connection.
  • Reactivity: The application responds quickly to user actions (clicking opening menus).
  • Possibility of push notifications: One of the Progressive Web App features is that it allows you to use push notifications. They may enable you to inform about current offers, facilitate the shopping path or carry out retargeting.
  • Installation Possibility: the Progressive Web App-type website has a 'manifest.json’ file, thanks to which the user can save it on the home screen of a mobile device. This activity does not require accessing the application store (such as the App Store or Google Play).

How to install the Progressive Web Apps on a smartphone?

For Android devices:

  1. Go to the selected PWA website in the browser window.
  2. A message will appear on the page to add the application to the home screen. Click on it.
  3. The Progressive Web App will be installed on the home screen in seconds.

For iOS devices:

  1. In the browser window, go to the selected PWA website and click the „more” button.
  2. From the menu, select the „To the initial screen” button.
  3. A field will appear where we can change the application’s name.
  4. The Progressive Web App will be installed on the home screen in seconds.

FeaturePWA ApplicationsMobile Applications
Responsive design 
Very quick installation possiblex
Sending push notifications 
Automatically updated through the Service Worker mechanism x
Recognizing the location of the user 
The necessity to downloadx
Working in offline mode
Working on all systems x
Possibility of linking subpagesx

Are there dedicated Progressive Web Apps for specific eCommerce platforms?

There are already a few solutions dedicated to eCommerce. As a partner of both Sylius and Vue Storefront, we will try to present the integration we have created based on best-of-breed technologies – Sylius PWA.

What is Vue Storefront?

Vue Storefront is a frontend Vue.js application used to display the eCommerce platform to the user. It’s a lightning-fast frontend platform and battle-tested bodiless set of modular features that can be easily connected to various eCommerce backend applications in a glimpse of an eye.

  • An open-source project that includes an eCommerce starter-kit that can be attached to any backend
  • Over 1000 stores (9.2k GitHub stars)
  • Based on the Vue.js technology
  • Large community
  • Lots of integration with popular platforms: Shopware, Magento, Shopify, commercetools, Sylius
  • Platform-agnostic – various eCommerce engines can be connected

What is Sylius?

Sylius is an open-source headless eCommerce solution dedicated to upper mid-market, enterprise brands or complex eCommerces from any segment – but it’s much more than that. With a modern approach, Sylius can be very flexible and extensible, keeping the unlimited scalability that continuously adapts to the business’ workflow. As a single solution, it provides outstanding performance compared to other eCommerce solutions. Besides an extensive MIT-licensed open-source edition, it also has its commercial version – Sylius Plus.

  • Based on the Symfony framework
  • Good for different types of projects – B2B, B2C, MVM, e-learning platforms, eCommerce startups – the sky is the limit
  • Open-source and headless, with a great community behind
  • After the Magento 1 support is over, Sylius is one of the most-chosen platforms (check Sylius on GitHub)
  • Highly customizable and easily integrable

Why Sylius and Vue Storefront?

As both are based on the best-of-breed technologies we decided to create a connection between Vue Storefront 2 (PWA frontend) and Sylius (eCommerce backend). To go to the essence of the connection itself, you may want to read our blog post: „Introduction Vue Storefront 2-Sylius integration: Technical aspects„.

  • A large number of developers who know the technology (PHP and Vue.js are well-known technologies)
  • Security – there is no Progressive Web Apps without HTTPS (STL protocol); client-side rendering
  • Sylius and Vue Storefront are headless and suitable for B2C and B2B
  • Large community – GitHub, Slack, Discord
  • The Sylius API can be easily connected to the Vue Storefront
  • Integration is based on GraphQL plugin

We’ve built a connection between Sylius and VSF, contact us if you have any questions.

Let’s dive into the details of this integration.

What does the current integration Sylius – Vue Storefront look like?

  • Integration with Vue Storefront 2 is based on GraphQL (1st version was based on REST; 2nd version went agnostic)
  • The integration itself consists of 2 plugins (backend + frontend):
  • Backend – on the Sylius side – GraphQL plugin
  • Frontend – on the Vue Storefront side, written in javascript – (ArtNight integration)
  • Integration is free (open-source code is available on GitHub)

What is GraphQL and what are its advantages?

GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015.

GraphQL is an alternate option to build APIs in REST where a user can query for specific parts of models (it is not tied to standard REST API response format) or perform actions (mutations) that strongly push into Domain-driven design and CQS.

GraphQL uses a strong type system to define the capabilities of an API. All the types that are exposed in an API are written down in a schema using the GraphQL Schema Definition Language (SDL). This schema serves as the contract between the client and the server to define how a client can access the data.

Once the schema is defined, the teams working on the frontend and backend may do their work without further communication since they both are aware of the definite structure of the data that is sent over the network.

Frontend teams can easily test their applications by mocking the required data structures. Once the server is ready, the switch can be flipped for the client apps to load the data from the actual API.

  • GraphQL gives you flexibility in building queries and manipulating data
  • You only get what you need (e.g. product name) – less data transmission over the network – reduced request size, which affects performance
  • Reduced infrastructure maintenance costs
  • Reduced application complexity compared to REST
  • Automatic documentation generation (can save time)
  • A non-technical person is able to read API documentation in GraphQL

Sylius GraphQL plugin

Sylius GraphQL plugin is built upon experimental API Platform GraphQL functionality. The goal of this plugin was to create a simple, elegant GraphQL connection to Vue Storefront 2. Vue Storefront 2 comes with a counterpart project that uses this plugin features.

The plugin comes with predefined mutations – actions that customers may do in a shop and queries for models to retrieve data. It also provides basic filtering for those queries. Those available to fetch model fields and actions that users can trigger are defined in XML mappings, one per model, and those mappings are wrapped in <graphql> tag.

It covers basic product name filtering, taxons, user account creation and modifying, logging in, supplying addresses, completing orders with promotion coupons, writing reviews. At the moment plugin supplies operations only for the customer side.

Why is it worth implementing the GraphQL plugin?

  • It is vanilla Sylius ↔︎ vanilla VSF2 connection,
  • It allows using GraphQL queries with whole security layers and JWT
  • It is easy to understand through CQRS
  • API Documentation is generated automatically and it is available under GraphQL Playground Endpoint, by default is generated in JSON
  • There are generic events dispatched after the completion of every custom mutation and command handler so it is easily extendable

Each custom mutation in this plugin is prefixed with shop_ to mark that it only affects the customer part, not the admin one.

Plugin Configuration

  • Plugin configuration is available only through configuration files.
  • You can configure the JWT Refresh token lifespan and an endpoint for Behat tests
  • There is no additional admin panel configuration.
  • You can check installation instructions here

Technical Overview

The plugin requires Sylius ^1.10 and the API Platform that this version of Sylius supports. That means it is based on plenty of experimental features.

You can check the GraphQL playground under the following default links:

  • api_graphql_entrypoint /api/v2/graphql
  • api_graphql_graphiql /api/v2/graphql/graphiql
  • api_graphql_graphql_playground /api/v2/graphql/graphql_playground

The plugin comes with developer notes that should aid you in case you need to extend some functionalities.

The GraphQL plugin provides a fast and easy way to integrate VSF2 with your shop back-end. It comes with a bunch of basic actions that are necessary for an online shop to work. Those actions can be extended or modified, plugin comes with handy developer notes that should aid you in solving problematic scenarios.

If you have any questions related to this plugin or want us to create a new one for you, contact us!

Has the Sylius PWA implementation been battle-hardened in the project on production?

Artnight – a Progressive web app platform with a fast and reliable Sylius as a headless backend under the hood.

  • Multi-channel
  • Mobile experience
  • Cooperation with the client

Following Progressive Web Apps standard, the eCommerce store can transfer the shopping experience to a completely new dimension. As a result, better availability and more straightforward operation significantly increase the conversion rate in online stores compliant with PWA.

If you think that it is a solution that fits your vision, contact us – we will talk with you about possible solutions. With our experience and a great team on board, we could be your first choice team when it comes to implementing the above-described setup.