Progressive Web Apps

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