progressive web apps
TRANSCRIPT
Web VS. Native
Progressive Web Apps
@Kianenigma
@ZConf 2016
@Kianenigma
Web VS. Native
With Desktop … it went good
With Mobile … Not that goodWhat happened?
Dark days
Apache cordova
Phonegap Backbone JQuery
Apache cordova
Acceptable mobile appsWith some ~30mb APK
brighter days …
● Real Native Components● No Webview => Native Performance ● No code generation (xamiran) => Truly cross platform● Maintainable code code thanks to typescript and es6 support
Back to the main problem:
Web wasn’t getting The attention it
wanted WHY ?
DO NOT HELP us reach USERS THE help us look like native
All of the technologies mentioned ( )
We assumed, since native apps are doing better, it’s good to imitate
web, as it currently is, is much better
We forgot that
WHY ?
With the web● We reach, just with a URL ● We can have progressive updates,
with no user interaction
With Native● OS specific market ● Annoying updates
● 0 new app per month● Top three app (winner takes all)
● +50 new sites per month● Randomly distributed
Distributing native software is hard.
Web can solve this
We really shouldn’t have changed the web
We JUST have to make itMore PROGRESSIVE
First, the difference between mobile and desktop
Most of us made the native => web transition on desktop
Enabling technology for this transition
Desktop: AJAX ( or … ? ) Mobile: ???
AJAX was not enough in mobile
Mobile apps keep the user engaged with their functionality
87%
13%
Platform
Time
functi
onali
ty
reachability
Progressive
Web VS. Native
Progressive Web Apps
@Kianenigma
@ZConf 2016
@Kianenigma
How to be a progressive web app? 1. Responsive
2. Fast Load3. Work offline4. Engaging
{ Responsive view }We all know its
Hard But
possible
How to be a progressive web app? 1. Responsive
2. Fast Load3. Work offline4. Engaging
Load fast
Mobile networkCan take upto 2 sec to connect We lose more that 40% of usersWith more than 3 sec
Minimal optimized frameworks
How to be a progressive web app? 1. Responsive
2. Fast Load3. Work offline4. Engaging
Offline native app
Work Offline
Offline Web
Or even worse...
Your Darkest daysLie-fi
URBAN Dictionary: Lie-Fi. When your phone or tablet indicates that you are connected to a wireless network, however you are still unable to load webpages or use any internet ...
Introducing
Service workers
1. Run on background 2. Programmable Proxy for HTTP
requests
Introducing
Service workers
1. Run on background 2. Proxy all HTTP requests
Cache - Static content- User data- App shell
How to be a progressive web app? 1. Responsive
2. Fast Load3. Work offline4. Engaging
Installable
Manifest.json
background- Sync- Notification - etc.
- Icon- Splash screen
{ "name": "My App", "short_name": "My App", "icons": [...] "start_url": "/", "display": "standalone", "background_color": "#3f51b5", "theme_color": "#3f51b5"}
How to be a progressive web app? 1. Responsive
2. Fast Load3. Work offline4. Engaging
Appendix
More details
1. AMP2. Polymer project3. Google introduction
Places to start from
1. Browsers shipping sw + manifest as we speak : chrome / firefox / opera / samsung internet
2. Under development : edge 3. Just considering it : safari
A dark secret : ios
1. Local storage : easy, clean, sufficient 2. Session storage : perhaps too easy! 3. Index db : seems messy! Use wrappers, like dexie.js
Storages
Visit pwa.rocks
implementations
Example: Ali-Express ( case study )● 104% for new users across all browsers● 82% increase in iOS conversion rate ● 2X more pages visited per session per user
across all browsers ● 74% increase in time spent per session across
all browsers
Why is this important?
A Business case
● Reach => More ● Acquisition / cost => More ● Conversion => Improved
How do we start● Ground up ( konga ) ● A simple version ( air berlin / wp -
80ms load time )● One feature (Booking )
A Business case
Question ?