Ionic & Progressive Web Apps
Brandy Carney
Core Framework Developer,Ionic
Adam Bradley
Framework Lead,Ionic
Who are we?
Brandy Carney
Core Dev @ Ionic
brandyscarney
brandyscarney
Adam Bradley
Team Lead @ Ionic
adamdbradley
adamdbr...
A Progressive… what?
A Progressive Web App is…
Amobilewebappthat
feels like a native app.
Why does this matter?
UX
Adoption
Performance
Offline capabilities
http://bit.ly/waPWA
What’s required?
I’m listening…
Progressive works for every user
App-like looks and feels native
Connectivity Independent offline support
Discoverable eas...
Beautiful UI
Built on Angular
Wonderful community
Built on web+browser standards
Collaboration from designers+developers
h...
Performance obsessed.
Native Scrolling
Hardware Accelerated Animations
Smooth Transitions
Optimized for Touch Events
Ahead of Time Compiling (Ao...
Creating an ionic app
$ npm install -g ionic
$ ionic start myApp --v2
$ ionic serve
Remember those requirements?
{
“name": "Ionic Sample App",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "img/appicon.png",
"s...
Service Workers
Caches data & files
Send push notifications
Intercept network requests
Run by browser in the background
se...
Code once. Run everywhere.
How does this benefit you?
Offline capable
Quicker load times
Native UX on the web
Cordova+App Stores not required
* Ionic apps ARE Progressive Web A...
Important links
Demo code
https://github.com/driftyco/ionic-pwa-demos/tree/master/contacts
Example PWAs using ionic
pwa.io...
…oh, btw
Thank you!
Brandy Carney
Core Framework Developer,Ionic
Adam Bradley
Framework Lead,Ionic
Angular Connect
Angular Connect
Upcoming SlideShare
Loading in …5
×

Angular Connect

1,366 views

Published on

Slides from our talk on Ionic and Progressive Web Apps at Angular Connect

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,366
On SlideShare
0
From Embeds
0
Number of Embeds
354
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Angular Connect

  1. 1. Ionic & Progressive Web Apps Brandy Carney Core Framework Developer,Ionic Adam Bradley Framework Lead,Ionic
  2. 2. Who are we? Brandy Carney Core Dev @ Ionic brandyscarney brandyscarney Adam Bradley Team Lead @ Ionic adamdbradley adamdbradley
  3. 3. A Progressive… what?
  4. 4. A Progressive Web App is… Amobilewebappthat feels like a native app.
  5. 5. Why does this matter?
  6. 6. UX Adoption Performance Offline capabilities http://bit.ly/waPWA
  7. 7. What’s required? I’m listening…
  8. 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
  9. 9. Beautiful UI Built on Angular Wonderful community Built on web+browser standards Collaboration from designers+developers http://github.com/driftyco/ionic
  10. 10. Performance obsessed.
  11. 11. Native Scrolling Hardware Accelerated Animations Smooth Transitions Optimized for Touch Events Ahead of Time Compiling (AoT)
  12. 12. Creating an ionic app $ npm install -g ionic $ ionic start myApp --v2 $ ionic serve
  13. 13. Remember those requirements?
  14. 14. { “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
  15. 15. Service Workers Caches data & files Send push notifications Intercept network requests Run by browser in the background serviceworke.rs
  16. 16. Code once. Run everywhere.
  17. 17. How does this benefit you?
  18. 18. Offline capable Quicker load times Native UX on the web Cordova+App Stores not required * Ionic apps ARE Progressive Web Apps *
  19. 19. Important links Demo code https://github.com/driftyco/ionic-pwa-demos/tree/master/contacts Example PWAs using ionic pwa.ionic.io
  20. 20. …oh, btw
  21. 21. Thank you! Brandy Carney Core Framework Developer,Ionic Adam Bradley Framework Lead,Ionic

×