PWA (Progressive Web Apps)

Created: 2018-01-03 10:23:00 -0800 Modified: 2018-03-06 13:40:01 -0800

Introduction

I’m writing these notes because I’m doing research for Bot Land’s mobile strategy.

Introductory resources:

To learn more about PWAs in general, check this out.
To follow along with a 30-minute tutorial, check this out.

Manifest validator

https://manifest-validator.appspot.com/

Adding a site to your home screen

Chrome on Android: press the three vertical dots and choose “Add to Home screen”. If this option doesn’t show up, it could be because you’re in Incognito Mode.

Chrome on Desktop: enable Desktop PWAs via chrome://flags/#enable-desktop-pwas then you get “Add to applications”

Checking if the site was launched via the home screen

According to Google’s PWA tutorial, they have this code in final/js/fireworks.js:

window.onload = function() {
  Fireworks.initialize();
  var howLaunched = window.location.search.substring(1).split('=')[0];
  if (howLaunched === 'homescreen') {
    var welcome = document.getElementById('welcome-back');
    welcome.style.display = 'block';
    welcome.classList.remove('isPaused');
  }
};