Skip to content
This repository has been archived by the owner on Oct 12, 2021. It is now read-only.

Latest commit

 

History

History
126 lines (101 loc) · 4.56 KB

web-app-manifest.md

File metadata and controls

126 lines (101 loc) · 4.56 KB

Web App Manifest

(This guide assumes that the CLI setup guide has been completed.)

Web App Manifest is a new standard feature of the Web Platform, which allows applications to provide some metadata to help browsers know how to install the application to the device's home screen.

The example app we created with Angular CLI in the previous guide already contains a Web App Manifest. Feel free to edit it; the file will be automatically moved over as Angular CLI builds the app.

src/manifest.webapp:

{
  "name": "Hello Mobile",
  "short_name": "Hello Mobile",
  "icons": [
    {
			"src": "/android-chrome-36x36.png",
			"sizes": "36x36",
			"type": "image/png",
			"density": 0.75
		},
		{
			"src": "/android-chrome-48x48.png",
			"sizes": "48x48",
			"type": "image/png",
			"density": 1
		},
		{
			"src": "/android-chrome-72x72.png",
			"sizes": "72x72",
			"type": "image/png",
			"density": 1.5
		},
		{
			"src": "/android-chrome-96x96.png",
			"sizes": "96x96",
			"type": "image/png",
			"density": 2
		},
		{
			"src": "/android-chrome-144x144.png",
			"sizes": "144x144",
			"type": "image/png",
			"density": 3
		},
		{
			"src": "/android-chrome-192x192.png",
			"sizes": "192x192",
			"type": "image/png",
			"density": 4
		}
  ],
  "theme_color": "#000000",
  "background_color": "#e0e0e0",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait"
}

Customization

All of the required icons are also present in the project automatically. Though, it's the Angular logo, and you'll probably want to update it with your own.

You'll also want to make sure the short_name property 12 characters or less so it will fit nicely under the app icon on the home screen, without being truncated.

Tip: Use http://realfavicongenerator.net/ to easily create correctly-sized icons from your app's logo.

Since this file is already referenced by src/index.html, there's no additional work needed to help browsers know how to install your app.

src/index.html

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

How Users Install the App

Browsers support installation in various ways. In Chrome on Android, an app can be installed by selecting "Add to Home Screen" from the menu. Chrome on Android also will automatically prompt a user to install an app to home screen if the user meets certain usage criteria1.

Opera on Android allows users to install apps by clicking a "+" icon in the browser url bar, and will also prompt users to install the app, using the same criteria as Chrome2.

Firefox on Android has support for adding to home screen, and will use icons and short_name from the Web App Manifest. Work is planned to support automatic prompts to install3.

Safari on iOS doesn't yet support Web App Manifest, but does allow for proprietary meta tags to be added to a page to let users add it to the home screen with proper icons, title, and display mode4. It's up to the user to install the app to home screen from the browser menu. The app generated by Angular CLI automatically includes the correct icons and meta tags to allow installing to home screen on Safari.

Further Reading

Next, let's build our App Shell.

Footnotes

  1. Increasing Engagement with Web App Install Banners (Google Developers)
  2. Progressive Web App install banners come to Opera for Android (Dev.Opera)
  3. Bug 1212648 - Progressive Web Apps Support (Bugzilla@Mozilla)
  4. Configuring Web Applications (iOS Developer Library)