Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps

Progressive Web Apps

Introduction to progressive web apps

Kenichiro Okada

June 18, 2017
Tweet

More Decks by Kenichiro Okada

Other Decks in Technology

Transcript

  1. Progressive Web Apps
    Introduction to progressive web apps

    View full-size slide

  2. Self Introduction
    • pastelInc
    • ng-kyoto organizer
    • Interests
    • JavaScript
    • PHP
    • Natural language processing

    View full-size slide

  3. What’s PWA

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Service Worker
    • Cannot access the DOM directly
    • Programmable network proxy
    • HTTPS required
    https://w3c.github.io/ServiceWorker/
    https://w3c.github.io/workers/

    View full-size slide

  10. Let's see PWA

    View full-size slide

  11. Trouble
    • Need to study the Service Worker's lifecycle
    • Need to know how to use developer tools

    View full-size slide

  12. 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

    View full-size slide

  13. Let’s try PWA!!

    View full-size slide