# 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 ?

• Really?

<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" />