Slide 1
Slide 1 text
Progressive Web Apps
Introduction to progressive web apps
Slide 2
Slide 2 text
Self Introduction
• pastelInc
• ng-kyoto organizer
• Interests
• JavaScript
• PHP
• Natural language processing
Slide 3
Slide 3 text
What’s PWA
Slide 4
Slide 4 text
Why PWA
https://www.slideshare.net/dynamis/progressive-mobile-web-apps
Slide 5
Slide 5 text
Why PWA 2
https://www.slideshare.net/dynamis/progressive-mobile-web-apps
Slide 6
Slide 6 text
Why PWA 3
https://www.slideshare.net/dynamis/progressive-mobile-web-apps
Slide 7
Slide 7 text
PWA
• Fast
• Enjoy offline time
• Like native app
Slide 8
Slide 8 text
App Shell
Slide 9
Slide 9 text
Web Apps Manifest
https://www.w3.org/TR/appmanifest/
Slide 10
Slide 10 text
Service Worker
• Cannot access the DOM directly
• Programmable network proxy
• HTTPS required
https://w3c.github.io/ServiceWorker/
https://w3c.github.io/workers/
Slide 11
Slide 11 text
Let's see PWA
Slide 12
Slide 12 text
Trouble
• Need to study the Service Worker's lifecycle
• Need to know how to use developer tools
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Let’s try PWA!!