Manifest file

Make your web app installable

  • add to homescreen of your mobile device
  • feel and look like a native app
  • open it like a native app
  • quick access to your website/app (direct launch)
  • increase user interaction, just one tap away
  • json file in the root of your website (manifest.json)
  • add a reference to this file on every page
<link rel="manifest" href="/manifest.json" />

Properties

Which are required/optional?

MDN

  • name: long name of your application (e.g. Splashscreen)
  • short_name: short name of your application (e.g. beneath icon)
  • start_url: which page should get loaded on startup? (e.g. include url param for tracking)
  • description: for saving as a favorite in your browser (OTHER ????)
  • lang: default/main language of the app (meta data for the browser)
  • dir: read direction of your app (ltr = default)
  • scope: which pages are included
  • display: how should it look (standalone = like a native app (BACK button!!!!), OTHER ARE ....)
  • orientation: set and enforce default orientation (OTHERS ????), be careful with this
  • background_color: background whilst loading and Splashscreen (HEX ONLY ????)
  • theme_color: e.g. color of top bar in task switcher (HEX ONLY ????)
  • icons: a set of icons the browser will choose the best on (e.g. homescreen and Splashscreen, APPLE ICONS)
  • related_applications: related native applications (namespaced, WHICH PLATFORMS, HOW WORKS ????)
{
  "name": "xyz xyz xyz",
  "short_name": "xyz",
  "description": "my awesome app",
  "lang": "en-US",
  "dir": "ltr",
  "start_url": "/index.html",
  "scope": ".",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#fff",
  "theme_color": "#000",
  "icons": [
    {
      "src": "/src/icons/app-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "/src/icons/app-icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128"
    }
    {
      "src": "/src/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=com.app.my",
      "id": "com.app.my"
    },
    {
      "platform": "itunes",
      "url": "https://itunes.apple.com/app/example-app1/id123456789"
    }
  ]
}

Browser Support

Can I use

Testing

  • Chrome Dev Tools
  • Android Studio (AVD Manager)
    • run an emulator
    • open chrome
    • 10.0.2.2:8080 (proxy to localhost)

Add to homescreen

  • add to homescreen (use kebab menu)

Homescreen add to homescreen dialog criteria include here!

Deferring the App Install Banner

// app.js

const deferredPrompt;

// trigger right before the install banner is shown
window.addEventListener("beforeinstallprompt", event => {
  console.log("Event beforeinstallprompt fired");
  // don't show the banner
  event.preventDefault();
  // save it for later
  deferredPrompt = event;
  return false;
});
//app.js

// attach click event
document.getElementById("install-pwa").addEventListener("click", installPWA);

const installPWA = number => {
  // are the criteria for homescreen dialog met?
  if (deferredPrompt) {
    // show the banner
    deferredPrompt.prompt();
    // check the user respond
    deferredPrompt.userChoice.then(choiceResult => {
      console.log(`User response ${choiceResult.outcome}`);
      if (choiceResult.outcome === "dismissed") {
        // :-( you only had one change
        console.log("Installation dismissed");
      } else {
        console.log("Added to home screen");
      }
    });
    // you can't use the deferredPrompt anymore
    deferredPrompt = null;
    // after a sufficient period of time beforeinstallprompt will be triggered again
  }
};

How about Safari ?

Needed?

<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="Not my default title" />
<!-- Apple optimized icon -->
<link rel="apple-touch-icon" href="/src/icons/apple-icon-144x144.png" sizes="144x144" />
<!-- add all available sizes -->

How about Internet Explorer ?

<meta name="msapplication-TileImage" content="/src/icons/app-icon-144x144.png" />
<meta name="msapplication-TileColor" content="#fff" />

Also for other browsers and fallback for Chrome

<meta name="theme-color" content="#000" />