20
Progressive Web Apps Jeff Burtoft - @boyofgreen

Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

Embed Size (px)

Citation preview

Page 1: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

Progressive Web AppsJeff Burtoft - @boyofgreen

Page 2: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

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

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

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

Service Workers

Supported by :

promises

Cache API

Notifications

Fetch

Page 6: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

Promises:

Page 7: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

Fetch:Our main objective

Page 8: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

Notifications:

Page 9: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

Cache API:

Page 10: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

W3C Manifest

Start page

Scope

Theme

Icons

Language

Etc.

{x}

Page 11: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

W3C Manifest

Page 12: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

App Container

Presentation

Backgrounding

App Management

Install / Uninstall

Page 13: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

App Container

Page 14: Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016

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

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

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

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

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

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

Stay Connected

dev.windows.com

www.thishereweb.com

www.manifoldjs.com

@boyofgreen