Generate your Manifest JSON using Modyo Platform

A manifest.json contains all the required information to let a user’s web browser interact with your PWA (progressive web application). Developing PWAs is time-consuming and creating the configuration files is one of the least interesting parts of the work. In Modyo we offer a way to automatically generate the manifest.json to avoid distractions to your workflow.

What is a PWA and why manifest.json is important ?

A PWA is a web application that can be seen from the web or installed locally. The objective is to create an experience that is similar between web and mobile applications without sacrificing the benefits of both. This has multiple advantages compared to a traditional mobile application:

• PWAs are more light-weight and quick due to avoiding the overhead costs of required libraries from app marketplaces such as Apple App Store or Google Play Store.

• They work normally offline or in poor internet conditions.

• Users don’t have to worry about installing updates.

Manifest.json acts as a link between a device (computer or mobile device) and the PWA. The file contains the configuration to establish the details of communication such as: the URL of the PWA, the ícon, the type of window to open, etc. A user that visits your website, can be invited to install your PWA or be redirected to it if they use a mobile device.

Create a manifest.json in Modyo

This file is of utmost importance and as such, any mistake in this section can be catastrophic for the PWA. With Modyo, you don’t have to worry about writing this file. You only have to let the system generate the manifest.json automatically for you:

Inside your site’s configuration, in the PWA section, activating the “Enable PWA manifest” option will open the following window:

Here you must fill out this form that the user’s operating system will use to display your PWA, the fields you will need are:

• App name: Full name of the application that will be shown when installed.
• Short Name: This name appears when App name is too long for the icon size.
• Theme color: Defines the color of the nav bar, it must be identical with the value of meta theme-color.
• Background color: When initialized in mobile, this color is used as the background.
• Display: Defines what type of window will open when using the PWA. In general, we recommend using standalone as this is considered the standard option.
• Orientation: In mobile, defines which orientation will be used for the window.
• Scope: Defines the limit the app considers within its scope. Start URL must be within the scope.
• Start URL: The first URL where the app will take the user when initialized.
• Icon: This PNG file must be 512px minimum because 9 different sized versions are generated and the best one is used depending on the display settings of the device.

When you complete the form and click Generate, you will see the generated manifest.json: 

Now that you have a manifest.json with all the required information to display your application correctly, you're now one step closer to migrating your site to a PWA.

Photo by Pavan Trikutam on Unsplash