Add a Web App Manifest to Create a Progressive Web Application
A Progressive Web App must be recognized as an application by the browsers. We can achieve that by creating a Web App Manifest which is a JSON file that defines information about the application, such as name or author, similar to how Android’s manifest file.
In this lesson I’ll show you how you can create a Web App Manifest file in order to define the app information.
Instructor: [00:00] The first step to create a privacy web application is by creating a web manifest. Let's create a manifest.json file in the root of the project.
[00:14] The web manifest describes your app using some metadata. We can write the name [inaudible] images, and we have also a short_name. If your name is already short, you don't need this property, but if not, it will use each of them depending on the case. If you don't write the short name, it will default to the name.
[00:43] We also have a start_url. This is the URL that is open from the app that is already installed.
[00:52] Let's write the index.html file. The display property will tell a browser how to open it. We can say browser, and this will be opened just as a browser. We can say standalone, which will be opened like a normal app.
[01:14] We can say full screen, which will remove everything from the screen, except from the content of the app itself, and minimal UI, which is like standalone but with some minimal browsing UI components. Let's leave it as standalone.
[01:35] We can define as well the theme color. Let's use a color of this purple toolbar, MC27BO. This property will be used, for example, for setting the toolbar color on Android or other platforms.
[01:57] Then we can set as well a background color. This will be used by the splash screen. By using the name, the background color, and the icons, a splash screen is created in Chrome for Android.
[02:13] Finally, we have the icons property. This is an array of objects, and each object has a src property.
[02:27] We have a couple of icons here. Let's say icons 144.png. We have to indicate the size as well, or sizes and the type, which in this case is a PNG image. Let's copy this and do the same and replace it with file 12.
[03:03] Just like this, we created a manifest.json. If we open here the dev tools, we will see an error that says the site cannot be installed. The page has no manifest, so we still have to include it in the index file.
[03:23] Let's go here and create the index. We have to say rel manifest.
[03:33] Then let's indicate the manifest.json file and [inaudible] here. There we go. We see the metadata that we added.
[03:49] This we can test the manifest.json. We see the name. We see the short name. We see how it's presented. You can set as well the orientation in portrait or landscape. Here, we see the icons.
[04:05] We can see here as well that you have a add to home screen link. But when you press it, it says that it's not a service worker, which is another requirement for the privacy web app to be installed, but we will cover that later.