Skip to content

Latest commit

 

History

History
107 lines (84 loc) · 4.75 KB

pwa.md

File metadata and controls

107 lines (84 loc) · 4.75 KB
Raw

Progressive Web Apps (PWAs)

Resources

Frameworks / Generators

PWA Technologies

Web App Manifest

App Shell

Service Workers

Documentation

Quick Facts

  • requires HTTPS
  • cannot access the DOM
  • has a life-cycle consisting of registration, installation, and (de-)activation
  • can intercept network requests, so a major use-case for service workers is the implementation of a cache, to enable offline functionality, and/or to pre-fetch sources to improve load performance
  • needed to offer push notifications (see below)

Offline

  • The Offline Cookbook on Google Developers Web Fundamentals
  • Cache API
    • designed to save HTTP responses (in contrast to the more generic IndexedDB/WebSQL APIs)
    • works well in service workers
    • not supported in IE, but neither are service workers, so ¯\_(ツ)_/¯
  • sw-precache
    • node module to generate service worker code that will precache specific resources so they work offline

Client-side Data Storage

  • Web Storage API, localStorage
    • synchronous, might be slow on some devices
    • easy to use:
      • localStorage.setItem('myCat', 'Tom');
      • var cat = localStorage.getItem('myCat');
      • localStorage.removeItem('myCat');
  • IndexedDB
    • low-level API, rather complicated
    • transactional, SQL-like RDBMS (but object-oriented instead of fixed column tables)
  • Web SQL
    • deprecated, W3C recommends to use Web Storage or IndexedDB
  • localForage JS lib
    • asynchronous, with localStorage-like API
    • uses IndexedDB or WebSQL internally (called "backend drivers")
    • falls back to localStorage in Browsers without support for IndexedDB/WebSQL
    • frameworks support for AngularJS, Angular ≥ 4, Backbone, Ember, and Vue

Push Notifications

  • Web Push Notifications on Google Developers Web Fundamentals
  • based on service workers (they operate in the background)

Hardware Access

Not really PWA-specific, but related.