[Udemy] PWA: Understanding the App Manifest

Module Introduction

web app manifest is a single file that provides information to your browser

And it allows to install your app in the user’s home screen

Using an App Manifest to make your app installable

Instead of typing an url or manage a bookmark to access your app, with app manifest you can make your app installed in the user’s home screen as a regular native app.

That improves the user’s engagement as makes easier to launch the app.

Adding the Manifest

In the root folder we add a json file called manifest.json

Then in all html files we add in the head:

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

NOTE IMPORTANT: To get benefit of PWA features in the whole app, it is important to link the manifest in every html file

Understanding the App manifest properties

Another property to let browser asks the user for choosing install native apps:

Adding properties to the App manifest

manifest.json

{
    "name": "Instagram as Progressive Web App",
    "shortname": "PWAGram",
    "icons": [
        {
            "src": "/src/images/icons/app-icon-48x48.png",
            "type": "image/png",
            "sizes": "48x48"
        },
        {
            "src": "/src/images/icons/app-icon-96x96.png",
            "type": "image/png",
            "sizes": "96x96"
        },
        {
            "src": "/src/images/icons/app-icon-144x144.png",
            "type": "image/png",
            "sizes": "144x144"
        },
        {
            "src": "/src/images/icons/app-icon-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/src/images/icons/app-icon-256x256.png",
            "type": "image/png",
            "sizes": "256x256"
        },
        {
            "src": "/src/images/icons/app-icon-384x384.png",
            "type": "image/png",
            "sizes": "384x384"
        },
        {
            "src": "/src/images/icons/app-icon-512x512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url":"/index.html",
    "scope": ".",
    "display": "standalone",
    "orientation": "portrait-primary",
    "background_color": "#fff",
    "theme_color": "#3f51b5",
    "description": "A simple instagram clone, implementing a lot of PWA feats",
    "dir": "ltr",
    "lang": "en-US"
}

Official documentations about manifest properties: https://developer.mozilla.org/en-US/docs/Web/Manifest#:~:text=PWA%20manifests%20include%20its%20name,%22%20%2F%2F%20%22%2Dstyle%20comments.

PWAs and browser support

By the moment i write this post:

global user scope is 83%

Using the Chrome Dev Tools

By opening the Chrome Dev Tools , in the “Application” tab we can see info about our app’s manifest:

Simulating the web app on an Emulator

We will be creating an Android Emulator (needs Android Studio) to test our manifest in a real device (iOS simulators are more difficult for testing).

By opening our app in the chrome browser: http://10.0.2.2:8080 we can see our app

Then in the browser menu , we select “Add to Home screen” and we will get our app installed as a native app in the home screen:

 Image 3

in the image 3 , we can se our app is opened like a native app, with his toolbar with the colors specified in the manifest,  and a splash screen aswell.

Here we added the icon manually to the home screen, in the next lecture user will be prompted to do it automatically.

Installing the web app – Prerequisites

In chrome browsers there is a web app install banner:

https://googlechrome.github.io/samples/app-install-banner/

The web app install banner user prompt that Chrome will trigger to indicate that the user can add your web app to the users home screen. It will only prompt when a number of criteria have been met:

  • The app uses a service worker
  • The site is using HTTPS
  • The app has a manifest declared
  • The manifest has a short_name, 144 pixel icon and a type of ‘image/png’

We will come back later to this topic after service workers lectures

Adding properties for Safari & Internet Explorer

Safari browsers doesnt have support for web app manifest BUT we can add some meta tags in the head of the html to get some features closed to it:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="PWAGram">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-57x57.png" sizes="57x57">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-60x60.png" sizes="60x60">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-72x72.png" sizes="72x72">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-76x76.png" sizes="76x76">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-114x114.png" sizes="114x114">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-144x144.png" sizes="144x144">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-180x180.png" sizes="180x180">

and for meta data for IE: https://msdn.microsoft.com/en-us/data/dn255024(v=vs.80)

Wrap up & Resources

Useful Links: