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 Slide

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

    View Slide

  3. What’s PWA

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. App Shell

    View Slide

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

    View Slide

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

    View Slide

  11. Let's see PWA

    View Slide

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

    View Slide

  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

    View Slide

  14. Let’s try PWA!!

    View Slide