Progressive Web App

Overview Progressive Web App

Transcript

1. Progressive Web App
3. “Progressive Web App (PWA) is a term used to denote a new software development methodology. Unlike traditional applications, Progressive Web App can be seen as an evolving hybrid of regular web pages (or websites) and a mobile application.” Wikipedia
4. Alex Russell @ O'Reilly Fluent Conference in San Francisco 2016 https://nolanlawson.github.io/pwas-2016-05/#/6
5. https://www.youtube.com/watch?v=9Jef9IluQw0
6. Half of U.S. smartphone users download zero apps per month http://www.recode.net/2016/9/16/12933780/average-app-downloads-per-month-comscore
7. PWA Keys • Reliable performance • Push notification • Home screen icon metadata
8. Service Worker https://codelabs.developers.google.com/codelabs/polymer-offline-weather/img/1fbdd59d923c44cb.png
9. SW Strategies • Fastest • Network first • Cache first • Cache only • Network only
10. Application Shell architecture https://developers.google.com/web/fundamentals/architecture/app-shell
11. https://developer.mozilla.org/en-US/docs/WebAPI
12. https://developer.mozilla.org/en/docs/Web/API/Push_API
13. caniuse.com
14. Manifest { "name": "Hello Mobile", "short_name": "Hello Mobile", "icons": [ { "src": "/icons/android-chrome-48x48.png", "sizes": "48x48", "type": "image/png", "density": 1 }, { "src": "/icons/android-chrome-72x72.png", "sizes": "72x72", "type": "image/png", "density": 1.5 }, { "src": "/icons/android-chrome-96x96.png", "sizes": "96x96", "type": "image/png", "density": 2 } ], "theme_color": "#000000", "background_color": "#e0e0e0", "start_url": "/index.html", "display": "standalone", "orientation": "portrait" }
15. Characteristics • Progressive • Responsive • Connectivity independent • App-like • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable
17. Thank you Champ Annop @anop72 Android Evangelist, Coder