Progressive Web Apps

Introduction to progressive web apps

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