Progressive Web Applications

15 Aug 2016 . Technology . Comments

#software #newtech

Google Progressive Web App Roadshow

Notes from NYC roadshow on August 15th, 2016

This page will be updated once Google publishes the slide presentations.


Some stats

  • 80% of mobile user’s time is spent in 3 apps
  • The average mobile user installs zero new apps per month
  • 60% of connections world-wide are 2G
  • Why does no-one open their browser when they know they are offline?

User Experience needs to be

  1. Reliable - When we had dial-up modems everyone in the house knew if the house was online or offline.
    - In the age of broadband we just expect connectivity; but what if its not there? - Native apps don’t just break when there is no connectivity, why do webapps?
  2. Performant
  3. Engaging - Measure usage and provide option to add to home screen - Should be immersive - Provide relevant, timely, and useful notifications

Pete LePage - HTTPS

  • Stop using http; Secrity aside, you’ll forfeit APIs that require Https:
    • service workers (because they have the power to manipulate the network)
    • getUserMedia (cam/mic)
    • push notifications
    • app cache
    • encrypted media extensions
    • geolocation
    • https/2
  • Performance Concerns: http redirect to https, then TLS handshake (2 round trips)
    • Optimization: can set strict-transport-security headers on the server, can include sub-domains
    • TLS False start - server-side optimization to eliminate the last response
    • TLS session resumption - another server-side feature
  • Buying a cert: sslmate, let’s encrypt (Free) AND cli tools for managing certs

  • Wnen moving sites:
    1. setup a 301 perm redirect
    2. Use Canonical URLs; adding a <link rel=canonical href="site url" > to your pages. A good idea in general actually.

Engaging Clients

Goal should be to add to home screen. Be smart how this is presented to users. Good example is Washington Post in which the home screen add option is presented after an engagement heuristic is met.

  • manifest.json - short name, icons, start url, background_color, screen orientation, etc.
    • display: “standalone” - nothing but the splashscreen during launch
  • Always starts from where the developer wants them to go (not some old page)
  • Safari and Edge don’t work today (Edge will) - Safari uses meta tags?

Web Push notifications

Pete Recommends:

  • The idea of web push notifications is new - but supported widely in a standard way
  • Make sure the user knows what the subscription is for
  • Make sure if a user clicks a notification they get to a page that loads offline (pre-cache the data)
  • Need VAPID keys, JWT and headers for encryption details. But, use libraries to do the heavy lifting.
  • You can provide action buttons in a notifications, by adding an actions property during registration.showNotification. Also need a notificationclick event listener
  • Service Workers enable disconnected apps and push notifications, but carry some responsibilities for the developer.
    • Once you start controlling caching you are in control and the browser expiry is ignored. Make sure you manage the cache appropriately.

A Demo..

Use lighthouse to test the application

Google sw-precache app-shell-demo

  • Using the iFixIt API
  • swprecache - to have service worker automatically cache matching resources, including dynamic ones

Code Labs

  1. Your First Progressive Web App
  2. Debugging Service Workers
  3. Push Notifications

Tiny URLs