Progressive Web App

 
 

PWA is the next generation of any eCommerce platform frontend

Ultrafast, offline-ready and platform-agnostic Progressive Web App.

PWA for Special's Fashion Store

Meet Special – the Italian fashion retailer. They wanted to enchant their customers with a unique user experience while shopping online. 

Special is a retail store located in Milan, northern Italy. The store specializes in streetwear shoes and accessories of the best international brands. To their customers, they offer exclusive products, often impossible to find in any other shop in Italy. Since 2010, they have offered their products to online customers via the Magento 1 platform. Now, they have decided to move to Magento 2 and the Vue storefront.

Selling in a progressive web app

Progressive web apps are quite new on the market, but they have already proved their advantages. Online shops built as PWAs are much faster, safe on the front end, and work offline.

These benefits encouraged Special to invest in progressive web apps. Additionally, it turned out this solution is cheaper than building separate native apps.

Solutions selection for Special’s store

Special has only a simple and size configurable product catalog. It consists of 10,308 items in total. The goal was to restyle and to replatform the online store in 3 months. 

The perfect match: Magento 2 & Vue Storefront

The idea was to go live with a minimum set of functionalities, and then improve. They built the store upon the Magento 2 platform on the backend, and connected it to a customizable front-end for progressive web apps – Vue Storefront.

Vue Storefront implementation

The store’s checkout and the CMS blocks were left on Magento 2. There is just a small component that takes, via a GET call, the HTML of the blocks from the Magento platform and puts them in Vue Storefront.

During the development of Vue Storefront, a fork was implemented. It is used to stay up-to-date with the new developments from the community. Every week Special’s store is synchronized with the official repo, so as to always have the latest version available. After check out, a tag is added, and a new version is released.

Check it out live at the Special.

Odoo text and image block

Proven by market implementations.

Vue Storefront is the only market-proven open source PWA storefront with hundreds of projects already live and growing.

Odoo image and text block

Meet La Nature – a Jewellery eCommerce with 0.1s Loading Time on Mobile

La Nature offers magnificent jewellery, but the most precious thing lies in their eCommerce. The online store is extremely fast thanks to the Vue Storefront architecture. And when the Internet is switched off, customers can use it as a native app on their mobiles.

Standard of speed for mobile eCommerce

When you visit the La Nature online store, the first thing you may notice is the marvelous design. Vivid colors, splendid ring and bracelet images combined with product filtering tools makes the user experience truly unique.

There are over 16,800 product images. In mCommerce it is challenging. A high number of images is directly correlated to poor loading times, and slow pages are the number one issue that enrages mobile users most. Google set the gold standard on the time when users no longer notice performance lags and can directly focus on experiencing the content. The reasonable standard in mobile UX is 4 seconds or less.

In La Nature loading time is not a problem. With the use of progressive web apps, their final speed for catalog loading – is 0.1 second.

Reaching the short loading time

La Nature needed both B2B and B2C eCommerce. The base is Magento 2.2 with a set of integrations with 1C USP, CRM Bitrix-24, a loyalty system and wholesale functions for franchisees. Independently from Magento, the La Nature chose Vue Storefront as a front end PWA solution.

Separating backend and frontend allows for short loading and rendering times. Switching catalog pages time was decreased up to 0.1 second and catalog first loading time (providing the visible part of the catalog with images) up to 1.5 second.

Magento 2.2 provides business logic and serves as a repository of entities (prices, stocks, images and almost all catalog-related details). It is noteworthy that to receive all data, node.js / Vue systems associated with data view, instead of using traditional MySQL. This additionally speeds up the interaction with data.

Vue Storefront is extremely elastic and easy to extend. Like adding CMS integration and custom category page features (like switching the product variants from the product list, geo-localization, additional entity types).

PWA instead of a native apps

Progressive web apps will soon replace mobile native apps. By leveraging the Service Workers and PWA manifest, users are able to install the progressive web app on their home screens straight from the browser. This is convenient as they can skip the app store.

Combine that with high loading speed and users will benefit from an enjoyable experience. Check it out live at the La Nature store.

The La Nature store works twice as fast thanks to separating the Magento backend and the Vue Storefront frontend. At the same time, eCommerce managers and developers can provide fast project support and modify any page without disturbing the backend logic systems.

Unique Online Pop-up Store with PWA for NOMOS Watches

The Hour Glass wanted to enchant their customers with the unique shopping experience. On the occasion of the global launch of the NOMOS Glashütte collection, they launched exquisite online pop-up store leveraging Vue Storefront framework.

The NOMOS Glashütte “Red Dot” Capsule Collection 2018 is a series of thoughtfully designer and exceptionally decorated watches. The Hour Glass, the global retailer of the luxury watches, present the full collection in the designated online pop-up store on the 27th September 2018.

The online pop-up store is essentially a full-fledged point-of-sale platform, the site showcases the heritage and design inspiration of NOMOS watches. Combined with hi-res imagery and intuitive design, the pop-up store is intended to mirror the level of consideration and customer-centricity of The Hour Glass offline boutiques.

Customer-centric PWA frontend framework 

Having customers on 5 continents, The Hour Glass is well-attuned to online shopping experiences. The choice of a customer-centric PWA frontend framework was essential to provide:

  • most engaging interactions from button clicks to enter a new page,

  • convenience of viewing the site, placing orders and entering credit card details without being susceptible to intermittent in 4G connections,

  • best-in-class loading speed.

Vue Storefront framework stood out as a clear choice given its integration with Magento 2 Commerce.

Vue Storefront PWA customization

The Hour Glass conducted the whole implementation in-house. Vue Storefront is relatively elastic and the developer’s team used it to create custom-built features integrated with the online pop-up store. Customization included the following areas:

  1. Frontend in particular – brand story page, product details page, magnifiable gallery, single page checkout, FAQ page, and implemented mobile responsive web design.

  2. An extension to display images based on product attributes.

  3. Stripe integration to securely transmit orders and credit card details, and to trigger the anti-fraud 3DS feature.

  4. Secure extension to push orders from VS into Magento 2, ensuring orders are captured in M2.

  5. A new feature for price display, based on a central pricing table.

  6. An extension to ensure orders are properly captured and mapped to the SCO page, which in turn triggers the Stripe payment process.

  7. Middle layer to integrate with a global logistics provider allowing the airway bill to be generated without manual input.

  8. Integration with Gtag, FB Pixel, InterCom.

All the customizations mentioned above were completed within a 3-week sprint.

Visit the store at nomosreddot.thehourglass.com

Odoo text and image block

How to add PWA in to your Home Screen

iOS and Android

Odoo - Sample 1 for three columns

Open demo.storefrontcloud.io in your browser and click the square with arrow up icon at the bottom of the screen. 

Odoo - Sample 2 for three columns

Click Add to Home Screen.

Odoo - Sample 3 for three columns

Click Add.

Odoo - Sample 3 for three columns

The PWA icon appears in to your Home Screen.

The PWA acts now just like any other app downloaded from App Store except customer does not have to go to App Store. Couple clicks simply form website.

Odoo - Sample 3 for three columns

The PWA works also offline and is always updated to the latest version automatically.

No more separate development for responsive websites, iOS and Android apps. One code for all.

The technology

Vue Storefront was built as an all-in-one front-end for eCommerce. For providing the best performance we decided to use Vue.js as a front-end library, Node.js + Express (and maybe GraphQL support) as a server-API, Elastic Search as a database of products and full PWA/off-line support.


Odoo CMS - a big picture

The architecture

Vue Storefront was built as an all-in-one front-end for eCommerce. For providing the best performance we decided to use Vue.js as a front-end library, Node.js + Express (and maybe GraphQL support) as a server-API, Elastic Search as a database of products and full PWA/off-line support.

The design

Odoo CMS - a big picture
Odoo CMS - a big picture
Odoo CMS - a big picture
Odoo CMS - a big picture

 

The application is prepared to be fully customized in design through the theming system. With the current version we work on raw, basic template of typical eCommerce for a fashion industry. 

The License

Vue Storefront source code is completely free and released under the MIT License.