![{
“name": "Ionic Sample App",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "img/appicon.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#387ef5",
"theme_color": "#387ef5"
}
Web app manifest
http://bit.ly/maniMDN](https://image.slidesharecdn.com/angularconnect-160927203723/85/Angular-Connect-15-320.jpg)
Angular Connect
- 1. Ionic & Progressive Web Apps Brandy Carney Core Framework Developer,Ionic Adam Bradley Framework Lead,Ionic
- 2. Who are we? Brandy Carney Core Dev @ Ionic brandyscarney brandyscarney Adam Bradley Team Lead @ Ionic adamdbradley adamdbradley
- 4. A Progressive Web App is… Amobilewebappthat feels like a native app.
- 5. Why does this matter?
- 8. Progressive works for every user App-like looks and feels native Connectivity Independent offline support Discoverable easily found through search Linkable access via URL Installable save to home screen Re-engageable push notification support http://bit.ly/waPWA
- 10. Beautiful UI Built on Angular Wonderful community Built on web+browser standards Collaboration from designers+developers http://github.com/driftyco/ionic
- 12. Native Scrolling Hardware Accelerated Animations Smooth Transitions Optimized for Touch Events Ahead of Time Compiling (AoT)
- 13. Creating an ionic app $ npm install -g ionic $ ionic start myApp --v2 $ ionic serve
- 15. { “name": "Ionic Sample App", "start_url": "index.html", "display": "standalone", "icons": [{ "src": "img/appicon.png", "sizes": "512x512", "type": "image/png" }], "background_color": "#387ef5", "theme_color": "#387ef5" } Web app manifest http://bit.ly/maniMDN
- 16. Service Workers Caches data & files Send push notifications Intercept network requests Run by browser in the background serviceworke.rs
- 17. Code once. Run everywhere.
- 18. How does this benefit you?
- 19. Offline capable Quicker load times Native UX on the web Cordova+App Stores not required * Ionic apps ARE Progressive Web Apps *
- 20. Important links Demo code https://github.com/driftyco/ionic-pwa-demos/tree/master/contacts Example PWAs using ionic pwa.ionic.io
- 21. …oh, btw
- 23. Thank you! Brandy Carney Core Framework Developer,Ionic Adam Bradley Framework Lead,Ionic