• Sara Barrera Riano

  • Frontend Software Engineer

Like you surely noticed, there’s been a lot going on about Progressive Web Apps: How most people see them as the future of web apps in general, and how PWAs are trying to bridge the gap between web apps and native apps. In case you forgot what PWAs are, just check out Three Reasons Why Progressive Web Apps Are the Future.

As you may know there are some important principles to PWAs. These include web app manifests, service workers and many more. For now, let’s get you super excited about one specific component of a PWA: the web app manifest.

What Does It Do?

Broadly speaking Web App Manifests allow you to save a website to your device's home screen. This means you can launch it like any other native app you have installed, and it will also behave more in an app-like fashion.

Check out the video to find out how adding a web app manifest works in practice.

Video "How to Web App Manifest"

As you can see in the video, the user has the possibility to save Resto on his device so that, now, he can launch the website by means of the corresponding icon.

How Does It Work?

Creating the web app manifest JSON file is not that difficult. There are just two things you will need to take care of. Firstly, you will have to get familiar with composing a JSON file using the web app manifest properties, and secondly, you have to know where to include the file.

Manifest Example

The example above is a manifest file that we recently added in one of our projects at Foreach. In this case, the project we did it for was Resto.be. Let’s briefly review the most relevant lines of the file.

Scope

When using the “scope”-property, you will be able to define which web pages (i.e. sets of URLs) can be viewed through the installable web context. When navigating outside this scope, those pages will be opened in a standard browser.
Example case “scope”: “myApp/blog”
So, when you navigate outside your predefined scope (ex. myApp/contact), you will open the page in a standard browser. When you navigate into the app (also called “deep-linking”) the clicked page (myApp/blog/some-article) will be opened inside the installable web context.

Theme Colour vs. Background Colour

There are two types of colour properties. The background_color property will be used while loading the web app. The theme_color property specifies the default theme colour of your web app and can affect how the application is displayed by the OS. Example: The theme colour will surround the application on Android’s task switcher.

start_url

When using this property, you will need to define the URL where the user will be sent to when launching the application on his device. For example: If you want your user to go to the homepage of Resto.be when he launches the web app, you will need to set the start_url to ‘/’
Just keep in mind that these are only some of many properties that can be used in your manifest file. If you want to dig deeper, you can take a look at the documentation of MDN’s web manifest or Google Developers .

Using your Manifest File

At this point, you are almost done implementing your very own web app manifest. The only thing that you need to do now is link your file in the <head> of your site. Just add it as a manifest resource link, for example:

<link rel="manifest" href="/static/manifest.json">

Tips and Tricks

Like almost everything in front-end paradise there are some tools you can use. To generate your manifest, simply go to https://webmanife.st/. To validate it, see https://manifest-validator.appspot.com/ . Another useful tool can be found in your Chrome Devtools. When you select the application tab, you can see there is a manifest tab available. On this tab you can find all the information about your current web app manifest.

Let’s recap everything. You should first make or generate your JSON file and give it all the properties you want it to have, like a short_name, icons, theme_color, etc. Secondly, make sure your file is a valid JSON file (you can just use the manifest validator mentioned earlier). Lastly, include your file in the section of your HTML document.

There you go. Now you know how to use web app manifests, one of the crucial elements of a PWA. Stay tuned if you want to get more familiar with other components and principles of a Progressive Web App.

Related Articles