progressive web app - jeff burtoft at microsoft zaventem 03-10-2016
TRANSCRIPT
![Page 1: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/1.jpg)
Progressive Web AppsJeff Burtoft - @boyofgreen
![Page 2: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/2.jpg)
Progressive Web App
Progressive Web Applications take advantage of new
technologies to bring the best of web sites and native
applications to users. They're reliable, fast, and
engaging.
![Page 3: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/3.jpg)
What does it mean to be progressive
Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, while also providing an enhanced version of the page to those with more advanced browsers
![Page 4: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/4.jpg)
W3C ManifestOne manifest to rule them all
App Container1st class runtime environment for web apps
Service WorkersA web worker that can run independent of
Page and in the background
{x}
![Page 5: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/5.jpg)
Service Workers
Supported by :
promises
Cache API
Notifications
Fetch
![Page 6: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/6.jpg)
Promises:
![Page 7: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/7.jpg)
Fetch:Our main objective
![Page 8: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/8.jpg)
Notifications:
![Page 9: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/9.jpg)
Cache API:
![Page 10: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/10.jpg)
W3C Manifest
Start page
Scope
Theme
Icons
Language
Etc.
{x}
![Page 11: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/11.jpg)
W3C Manifest
![Page 12: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/12.jpg)
App Container
Presentation
Backgrounding
App Management
Install / Uninstall
![Page 13: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/13.jpg)
App Container
![Page 14: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/14.jpg)
Progressive Web Apps
Should work everywhere
One app to rule them all
![Page 15: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/15.jpg)
Tooling: Manifoldjs
Browser Site
W3C Manifest
PWA
Chrome App
HWA
Windows 10 App
Manifoldjs Polyfills
iOS
Android
Other platforms
Mac., Office, FF etc.
![Page 16: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/16.jpg)
Tooling: Manifoldjs
Store Submission
App Packaging
Image generation
Native API access
W3C Manifest Creation
Offline Scenarios
App Testing
![Page 17: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/17.jpg)
Are PWAs ready yet?
Being “Progressive” about the way use utilize them will allow you to take
advantage of the strengths of each platform, without loosing backwards
compatibility
![Page 18: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/18.jpg)
Next Steps
//developers.google.com/web/progressive-web-apps/
dev.windows.com/bridges/hosted-web-apps
//www.manifoldjs.com
//dev.windows.com
//vorlonjs.com
![Page 19: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/19.jpg)
DiscussionTime
What are your plans for PWA?
What do you think you can do right now?
What is your app strategy today?
What else is missing from this strategy?
What should we do next?
![Page 20: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016](https://reader031.vdocument.in/reader031/viewer/2022030318/58ed14491a28abaf0a8b45d9/html5/thumbnails/20.jpg)
Stay Connected
dev.windows.com
www.thishereweb.com
www.manifoldjs.com
@boyofgreen