Progressive Web Apps: From Tab to Taskbar

1. Welcome

In this lab, you'll take an existing web application and make it installable. This is the fourth in a series of companion codelabs for the Progressive Web App workshop. The previous codelab was IndexedDB. There are four more codelabs in this series.

What you'll learn

  • Write a Service Worker by hand
  • Add a Service Worker to an existing web application
  • Use the Service Worker and the Cache Storage API to make resources available offline

What you should know

  • Basic HTML and JavaScript

What you will need

2. Get Set Up

Start by either cloning or downloading the starter code needed to complete this codelab:

If you clone the repo, make sure you're on the pwa04--tab-to-taskbar branch. The zip file contains the code for that branch, too.

This codebase requires Node.js 14 or higher. Once you have the code available, run npm ci from the command line in the code's folder in order to install all of the dependencies you'll need. Then, run npm start to start the development server for the codelab.

The source code's README.md file provides an explanation for all distributed files. In addition, the following are the key existing files you'll be working with throughout this codelab:

Key Files

  • index.html - Main application HTML

3. Create a Web App Manifest

Web app manifest files describe your PWA so that, together with a functioning Service Worker, a browser knows that your web app is installable and, importantly, how to represent on the device it'll be installed to. First, though, it needs to be created. Add a file called manifest.json to in the public folder of your web app and add the following to it:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

Don't forget to include an apple touch icon for iOS devices. Add the following line of code right after the <title> tag in the <head> in index.html

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Explanation

This manifest includes required, recommended, and promotional fields, so there's a lot going on. First, the required fields where the PWA's name, start URL, display mode, and icons are defined. Notice that the last icon is a maskable icon, allowing for multiple icon displays based on a device's UI. Next, there are the recommended theme and background color fields. Finally, there are the promotional fields, a description and categories this PWA fits into. When this manifest is attached to a PWA, these fields will control how our PWA's installed app will be displayed and managed.

4. Attach Manifest to PWA

With the manifest file created, it needs to be attached in order for it to be associated with the PWA. To do so, open up index.html and add the following right below the <title> tag in the <head>:

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

Explanation

A manifest link will tell browsers that support it that the linked web app manifest describes the current website. When valid and available, with a working service worker, and after the web app passes any additional browser-specific installation criteria, it allows your app to be installed directly to a user's device!

5. Add Shortcuts

One of the ways great way to make your PWA feel more deeply integrated with a device is to provide context menu shortcuts into specific functionality in your app. The Night Mode toggle in the PWA allows for choosing the mode by setting a mode query parameter to night or day. Set up two shortcuts in manifest.json that do the following:

  • Starts the PWA in either night or day mode
  • Uses /images/logo.svg at a 150x150 size for an icon

6. Congratulations!

You've just learned how to create a web app manifest file, attach it to a web page, and add app shortcuts when it's installed.

The next codelab in the series is Prompting & Measuring Install