Skip to main content
Version: 2.x

manifest.json

This guide explains how to customize the web application manifest served by Front-Commerce so that your website is recognized as a Progressive Web Application (PWA).

Front-Commerce web application manifest generation​

Front-Commerce implements the following mechanism to generate a web app manifest so that the web browser can detect that it's a Progressive Web Application (PWA):

  1. Pages generated by Front-Commerce include the following markup:
<link rel="manifest" href="http://your.website.example.com/manifest.json" />

so that the browser knows where to find this web app manifest.

  1. The manifest.json is dynamically generated by Front-Commerce based on public/manifest.json available on the disk and on the project environment (URLs, …).

Customizations​

manifest.json​

To customize the manifest.json generated by Front-Commerce, you have to copy the public/manifest.json from Front-Commerce to your project:

# from the root of project, usually a clone of the skeleton
mkdir src/public
cp node_modules/front-commerce/public/manifest.json src/public/manifest.json

Then you can customize src/public/manifest.json content to match your project. Commonly, you will change the name, short_name, the colors and the icons.

info
  • Icons URL are automatically rewritten so that it matches the environment in which you use them. So as the default file you must use relative paths.
  • The scope is automatically generated based on the URL of your store(s).
  • Don't change the start_url, see below if you want to customize app-shell.html content.

app-shell.html​

app-shell.html is generated at build time based on a template file; theme-chocolatine/template/app-shell.html or src/template/app-shell.html depending on the theme being used on your project. If you want to customize the resulting app-shell.html on your project, you can copy one of this template to your project:

# from the root of project, usually a clone of the skeleton
mkdir src/template
cp node_modules/front-commerce/theme-chocolatine/template/app-shell.html src/template/app-shell.html

And you can apply any change on your own copy of the template to match your requirements.