PWA Intro Lesson - The Manifest

Outline

Talk about native app experience - how it differs from a normal we app
Add manifest file to project (see that it's working locally and then push this up to production)
Run audits using the lighthouse app (enabled by default in Chrome Canary) - PWA audits only
Implement HTTP redirect for HTTPS in server file

Native App vs. PWA

Native app experience has:

Push notifications
Works offline
Home screen icon
Loading page
Fits in the viewport of your phone (built for mobile viewing)
Fast loading on slow network speeds (pages don't seem to depend on network requests loading)
Can use storage on your device
Sensor data
Fast, UI transitions and interactions should be near instant

File Structure

The manifest file can be named whatever you want, but is typically named manifest.json The name is important when linking the manifest, for instance:

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

name: for use in the Web App Install banner

short_name: for use as the text on the user's home screen

start_url: where it should be launched when the user clicks on the launch icon, relative path (relative to location of manifest file)

icons: when a user adds your site to their home screen, you can define a set of icons for the browser to use. Also the splash screen image is drawn from the icons array.

background_color: Chrome uses this color on the splash screen the instant the web app is launched and the color remains on the screen until the web app's first render

theme_color: sets the color of the toolbar (the top bar showing your battery level and other apps running, and the tint of the URL bar if you're using it)

display: control the display type and page orientation - standalone hides the browser's UI (URL bar)

Gif showing the installation banner: https://developers.google.com/web/fundamentals/app-install-banners/images/add-to-home-screen.gif

For an Web App (different from native app in the store) installation banner to popup, the app must have:

A start_url, short_name, name (used in the banner), a 192x192 png icon (the icon declarations must include a mime type of image/png)
A service worker registered on your site
Is served over HTTPS
Is visited at least twice, with at least five minutes between visits

For native app installation banner, in addition to web app requirements, you need the related_applications array:

"related_applications": [
    {
      "platform": "play",
      "id": "com.google.samples.apps.iosched"
    }
  ]

Sample Manifest File

{
  "name": "Palette Picker",
  "short_name": "Palette Picker",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#2196F3",
  "description": "A palette generation app.",
  "icons": [{
    "src": "https://placebear.com/128/128",
    "type": "image/png",
    "sizes": "128x128"
  }, {
    "src": "https://placebear.com/152/152",
    "type": "image/png",
    "sizes": "152x152"
  }, {
    "src": "https://placebear.com/144/144",
    "type": "image/png",
    "sizes": "144x144"
  }, {
    "src": "https://placebear.com/192/192",
    "type": "image/png",
    "sizes": "192x192"
  }]
}

HTTPS Redirect

const requireHTTPS = (req, res, next) => {
  if (req.headers['x-forwarded-proto'] !== 'https') {
    return res.redirect('https://' + req.get('host') + req.url);
  }
    next();
};

if (process.env.NODE_ENV === 'production') { app.use(requireHTTPS); }

Resources: