Progressive Webapps (PWA)

Responsive desktop and mobile hybrid apps that manage data offline too

Overview

This page contains my notes during and after taking classes on PWA (Progressive Web Apps).

The step-by-step takes a different approach than what is covered in tutorials I took.

I would appreciate it if you could email me if you have an answer to the QUESTIONS below.

Why? (Advantages)

PWA combines the best of the web with the best of native apps.

Responsive on multiple screen size factors
Work Offline
App-like navigation
Progressive enhancement
Fresh, up-to-date transparently
Safe via TLS
Discoverable W3C Manifest
Re-engagable push notifications
Installable
Linkable - URL as entry point
Local Storage
Gamepad
Media capture of camera and microphone
Integrated payments

Sites using PWA in the wild

pwa.rocks is a gallery of PWA apps
twitter.com
flipboard.com
treebo.com (China)
sodapopped.com
getprelude.net is a simple, server less, offline-capable web app for practicing reading music. I’ve always been slow at sight reading, and this lets me plug in a MIDI piano and do drills. Uses React, Webpack, Service Workers, Web MIDI, Web Audio, VexFlow, and the Progressive Web Application paradigm. By Stephen Eisenhauer.

Tutorials

Udacity class

https://discussions.udacity.com

Udacity class: Intro to Progressive Web Apps by Pete LePage, Developer Advocate at Google, uses straight JavaScript without a framework library to create a weather app.

https://weather-pwa-sample.firebaseapp.com/demo

Install Git and get it on your machine:
```
git clone 
https://www.github.com/wilsonmar/ud811 --depth=1
```
This is forked from the original so that my commentary below would stay consistent with what is in GitHub. The original repo is:
```
git clone 
https://www.github.com/udacity/ud811
```
In Chrome, go to install and launch from the web;

Web Server for Chrome by chromebeat.
Choose folder 3-12, the completed example weather app.
Click Advanced and check “Verbose logging”.
Specify the port number, then click the link to view:

http://localhost:8887
Right-click and select Inspect for the JavaScript Console

Formatting
In a Finder, view folders and files of ud811.

NOTE: Firebase has since been shut down.

Tour of sample files
View package.json. It is read by NPM (Node Program Manager) to collect dependencies.
View index.html. Clients load index.html. In browsers, CSS files are loaded first and block .js files:
```
<link rel="stylesheet" type="text/css" href="/styles/ud811.css">
```
View ud811.cs. CSS files are usually stored within the styles folder. The .css files were generated from the ud811.scss file. That generation is done by gulp running the gulpfile.js before deployment. The minified min.css file is what is pushed to clients.

App.js Shell

Right above &LT;/body> at the bottom of the index.html are two JavaScript files in the scripts folder:
```
  <script src="/scripts/app.js"></script>
  <script src="/scripts/localforage-1.4.0.js"></script>
```
View app.js – the app shell.
- Event listeners for UI elements (butRefresh, butAdd, butAddCity, butAddCancel)
- Methods to update/refresh the UI (toggleAddDialog, updateForecastCard)
- Methods for dealing with the model (getForecast, updateForecasts, saveSelectedCities)
Change, if you must, the injectedForecast that provides the app default data values that would be replaced by what comes back from the server.

The time: 1453489481 is the time epoch number of seconds since January 1, 1970, which is Fri, 22 Jan 2016 19:04:41 GMT time.

Firebase replacement by Google

When the sample repo was created, the Firebase web service was still available. So this refered to the author’s instance:
```
var weatherAPIUrlBase = 'https://publicdata-weather.firebaseio.com/';
```
Click on the URL above. I was redirected to this Google page:

https://console.firebase.google.com/u/0/?pli=1

Google’s Firebase provides what firebase.io did: Cloud Messaging, Authentication, Realtime Database, Storage, Hosting, Remote Config, Test Lab, Crash Reporting.
Additionally, having the service in the Google Cloud give apps access to Machine Learning Functions:
- translate the language spoken or written by the user
- recognize image and provide an explanation about that image (like in Google Lens)
Video: Progressive Web Apps on Firebase - Google I/O 2016

PROTIP: There are other similar services like Firebase.

Service Worker
View service-worker.js at the root folder.

The service-worker.js file is from Google. QUESTION: What invokes it?
View manifest.json file at the root folder.

QUESTION: What invokes it?
View localforage-1.4.0.js.

localforage-1.4.0.js is from from https://mozilla.github.io/localForage for processing Offline Storage QUESTION: What calls it?

Pluralsight course

Nik Molnar @nikmd23 nikcodes.com/wpa-fundamentals

table-of-contents Building Offline Web Apps with Service Worker

Pluralsight class: Progressive Web App Fundamentals

Hosting

github

Google App Engine for back-end logic

Firebase redirects to HTTPS automatically from HTTP.

Android Emulator

CAUTION: Support by Apple Safari has a custom implementation. But other browsers support.

Strategy for caching vs. obtaining from network every time:

Cache only for images required for first render
Cache, then network for social media timeline data
Network first, then cache for game leader board data
Network only for inventory and prices from an ecom site

App Shell

DEMO: Weather App Shell

Local Storage

IndexedDB

Service Workers

Open Chrome browser in Incognito mode.
Setup ServiceWorker in Chrome browser:

chrome://serviceworker-internals

JavaScript that runs in the background to listen for and intercepts HTTPS requests, then respond to events, even when off-line.

Enables Periodic sync, geo-fencing, etc.

Register service worker

if ('serviceworker') in navigator){ // progressive enhancement.
   navigator.serviceWorker.register('/service-worker.js')  // scope limitation
     .then(
        function(registration){
          console.log('Service Worker Registered', registration);
        }
    );
}

Flow among states

Prioritize

App Mobile Manifest Packaging

In index.html, add within &LT;HEAD> to tell the browser about it:
```
<link rel="manifest" href="/manifest.json">
```
This is defined in w3.org/TR/appmanifest

In the manifest.json file:

{
  "name": "SodaPopped",
  "short_name": "SodaPopped",
  "start_url": "/index.html?hs=true",
  "icons": [{
 "src": "/icons/icon-128.png",
 "type": "image/png",
 "sizes": "128x128"
  },{
 "src": "/icons/icon-192.png",
 "type": "image/png",
 "sizes": "192x192"
  }]
  "background_color": "#3498DB",
  "theme_color": "#3495E",
  "orientation": "any",
  "display": "standalone",
  "dir": "ltr",
  "lang": "en-US",
  "description": "The most reliable, fast, engaging app for weather",
  "scope": "/",
  "serviceworker": {
 "src": "/path/to/sw.js",
 "scope": "/"
  }
  "prefer_related_applications":true
}

Add in head:

<meta name="theme-color" content="#2F3BA2">

Add in home screen head for Apple Safari browser on iOS:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Weather">
<link rel="apple-touch-icon" sizes="60x60" href="apple-60.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-180.png">

BLAH: Apple apple-touch-startup-image

Validate Manifest using the on-line tool:

https://manifest-validator.appspot.com
Cache the query string in start_url.
Chrome presents “ADD TO HOME SCREEN” if there are 2 iteractions in 5 minutes. Defer the banner with onbeforeinstallprompt.

During testing, temporarily #bypass-app-banner-engagement-checks

Icons

Chrome uses 48 dip icons for home screen and task switcher:

48x48
96x96
144x144
192x192

Chrome uses 128 dip icons for splash screen:

128x128
256x256
384x384
512x512

For Apple iPhones and iPads:

<!-- 16x16 -->
<link rel="shortcut icon" href="https://wilsonmar.github.io/favicon.ico">
<!-- 32x32 -->
<link rel="shortcut icon" href="https://wilsonmar.github.io/favicon.png">
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="https://wilsonmar.github.io/images/apple-touch-icon-precomposed.png">
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://wilsonmar.github.io/images/apple-touch-icon-72x72-precomposed.png">
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://wilsonmar.github.io/images/apple-touch-icon-114x114-precomposed.png">
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://wilsonmar.github.io/images/apple-touch-icon-144x144-precomposed.png">

realfavicongenerator.net/favicon_checker

Android Studio - Device Bridge
Update Chrome version

apkmirror.com/apk/google-inc/chrome

chrome://inspect/#devices
Click port forwarding
Type in the port being used by Android

keep the page open.

Add to Home Screen

a standard approach to add to home screen.

Push Notifications

Background Sync

Offline course

push notifications

JavaScript Promises

Videos

Production Progressive Web Apps With JavaScript Frameworks (Google I/O ‘17)

Hacker News Progressive Web App (HNPWA)

Polymer using Purple functions

Lighthouse used to

Web Page Test

Twitter Lite

Books

youmightnotneeSelect ron.com

Jake Archibald’s Off-line web app book

https://techbeacon.com/5-best-tools-building-progressive-web-apps-fast

Wilson Mar