Introduction to Progressive Web Apps

Adam Armour
https://github.com/aarmour

Are native apps doomed?

Eric Elliott: JavaScript Scene
comScore: U.S. Mobile App Report

"Progressive Web Apps"

Escaping Tabs Without Losing Our Soul
  • Responsive - Fits any form factor
  • Works offline - Uses Service Worker to function without the network
  • Safe - Always served over HTTPS
  • Discoverable - Identifiable as an "application" through Web App Manifest and Service Worker registration scope
  • Installable - Installs to the device home screen
  • Re-engageable - Leverage the OS to re-engage users, e.g. via Push Notifications
  • Linkable - Easy to share

Minimum Requirements

  • Must be served over HTTPS.
  • Must have a valid web app manifest with the required properties.
  • Must have a service worker.
  • Must always load (at least) the start URL, even if offline (using a service worker).
  • Must supply its own navigation.
  • Should be responsive to different screen sizes and orientations.

Web App Manifest


{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, …],
  …
}
https://developer.mozilla.org/en-US/docs/Web/Manifest

Service Worker

Application Shell

Minimum set of HTML, CSS, JavaScript needed to render the user interface.

Tooling

Caveat emptor

Angular CLI: State of the Union

--mobile flag disabled with the migration to webpack

Angular Mobile Toolkit guides are outdated: 1.0.0‑beta.4
#108, #109

Is Service Worker Ready?

References