Skip to content

Lab 2: Web App Manifest

Jump to bottom
Steffen Jahr edited this page Oct 29, 2018 · 1 revision

While we did use the simple Angular CLI starter app in the previous lab, let's now switch over to our TODO demo application for the remainder of the labs.

In a Progressive Web App, the JSON-based Web App Manifest is used to define meta information such as the app’s title, logo or splash screen. In this lab, we’d like to create a manifest for our demo application.

1. Switch Branch

Please run the following commands on your command line, e.g. in the root angular-connect-2018-pwa root folder:

$ git reset --hard
$ git clean -df
$ git checkout workshop/lab2

2. Creating the Manifest File

The application manifest file is called manifest.json. You can find this file inside the client/src folder.

Please find a template for the content of this file here. Using this template, please define:

  • a short_name
  • a name
  • a 144x144, 512x512 and 1024x1024 PNG icon (icons can be found in the assets subdirectory)
  • a theme_color (suggested color #ff584f)
  • a background_color (suggested color #ffffff)
  • a start_url (resolving to the application: ./index.html)
  • application should run in standalone display mode

You don’t need the scope property.

3. Test Your Web App Manifest

Now you’re ready to go! Let’s test your new Web App Manifest. You can either use a compatible device or test the metadata in Chrome’s developer tools. Start the application by running:

$ npm install
$ npm run start-prod

Device

Remember: you can test the application on your device by using ngrok tunnels.

  • Add the application to the home screen
  • Open the application from the home screen — can you spot a difference now?

Desktop

  • Press F12 (Windows/Linux) or ⌥⌘I (macOS).
  • Click the Application tab
  • Click Manifest
Clone this wiki locally