Skip to main content
Version: 3.x

PWA Setup

This guide explains how to setup your PWA.

What is a PWA

PWA stands for Progressive Web App. This technology allows the user to install your store as a native application on their device. It also brings advanced caching capabilities, offline support and much more.

Front-Commerce integrates PWA capabilities and is available with a few configuration.

Setup PWA

webmanifest configuration

The webmanifest defines meta information about your store. To setup this webmanifest, you need to add the following configuration in your front-commerce.config.ts file:

front-commerce.config.ts
import { defineConfig } from "@front-commerce/core/config";
import themeChocolatine from "@front-commerce/theme-chocolatine";
import magento2 from "@front-commerce/magento2";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

export default defineConfig({
extensions: [magento2({ storesConfig }), themeChocolatine()],
stores: storesConfig,
cache: cacheConfig,
configuration: {
providers: [],
},
pwa: {
appName: "ACME Store",
shortName: "ACME Store",
themeColor: "#fbb03b",
icon: "public/pwa-icon.png",
maskableIcon: "public/pwa-masked-icon",
cacheTTLInMs: 7 * 24 * 60 * 60 * 1000,
},
});

Here is a list of the available options:

OptionTypeDescription
appNamestringThe name of your PWA
shortNamestringThe short name of your PWA, it will be displayed on the home screen of your customer
themeColorstringThe theme color of your PWA, it will define theme for your App, we recommend you to use your website primary color
iconstringThe icon of your PWA, it will be displayed on the home screen of your end user device, it must be at least 512x512
maskableIconstringThe maskable icon of your PWA, it will be displayed on the home screen of your customer, it must be at lease 512x512
cacheTTLInMsnumberThe time to live of your PWA Cache in milliseconds, the default value is of 7 days

Icons setup

A PWA requires multiple icons to be defined in your project that will be used by the device to identify the application on the end-user device screen.

Two types of icons are needed:

icon

This icon is a standard icon that will be displayed over a background color depending on the end-user device configuration and OS.

Example on standard icons displayed on android

Example of standard icons displayed on Android

Source: web.dev

maskableIcon

This icon must be a squared icon and will be cropped in a shape defined by the device

Example of maskable icons displayed on android

Example of maskable icons displayed on Android

Source: web.dev

You can read more about icons here : https://web.dev/maskable-icon/

Install PWA

Once everything is setup, you will be able to install your website as an application.

Depending on the browser, a prompt inviting the customer to install the application is different:

tip

Note that you can control PWA installation dialog using Installation prompt