Progressive Web Apps

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!!