Progressive Web Apps

Progressive Web Apps

Introduction to progressive web apps

D1bae34031a7675147bc658967c3a4cb?s=128

pastelInc

June 18, 2017
Tweet

Transcript

  1. Progressive Web Apps Introduction to progressive web apps

  2. Self Introduction • pastelInc • ng-kyoto organizer • Interests •

    JavaScript • PHP • Natural language processing
  3. What’s PWA

  4. Why PWA https://www.slideshare.net/dynamis/progressive-mobile-web-apps

  5. Why PWA 2 https://www.slideshare.net/dynamis/progressive-mobile-web-apps

  6. Why PWA 3 https://www.slideshare.net/dynamis/progressive-mobile-web-apps

  7. PWA • Fast • Enjoy offline time • Like native

    app
  8. App Shell

  9. Web Apps Manifest https://www.w3.org/TR/appmanifest/

  10. Service Worker • Cannot access the DOM directly • Programmable

    network proxy • HTTPS required https://w3c.github.io/ServiceWorker/ https://w3c.github.io/workers/
  11. Let's see PWA

  12. Trouble • Need to study the Service Worker's lifecycle •

    Need to know how to use developer tools
  13. Reference • https://developers.google.com/web/fundamentals/ engage-and-retain/web-app-manifest/ • https://developers.google.com/web/fundamentals/ instant-and-offline/offline-cookbook/ • https://developer.mozilla.org/ja/docs/Web/API/ Web_Workers_API/Using_web_workers

    • https://workboxjs.org/ • https://github.com/johnpapa/pwa-angular
  14. Let’s try PWA!!