The document discusses progressive web apps (PWAs) and how they can help make the web a better experience for mobile users. Some key points: 1. Early attempts to make the web work well for mobile, like Apache Cordova, resulted in large app sizes and mediocre performance. 2. PWAs aim to be responsive, load instantly, and work offline using features like the service worker API and manifest files. 3. Case studies show PWAs can significantly increase user metrics like session times and conversion rates compared to mobile websites. This makes PWAs an important option for businesses to improve their mobile experience and acquisition costs.

1. WebVS.Native
Progressive Web Apps

2. @Kianenigma
@ZConf 2016
@Kianenigma

3. WebVS.Native

4. WithDesktop…itwentgood

5. WithMobile…
Notthatgood
Whathappened?

6. Darkdays

7. Apachecordova
Phonegap Backbone JQuery

8. Apachecordova
Acceptablemobileapps
Withsome~30mbAPK

9. brighterdays…

10. ● RealNativeComponents
● NoWebview=>NativePerformance
● Nocodegeneration(xamiran)=>Trulycrossplatform
● Maintainablecodecodethankstotypescriptandes6support

11. Backtothemain
problem:
Webwasn’tgetting
Theattentionit
wanted WHY ?

12. DONOTHELPusreach USERS
THEhelpuslooklike native
Allofthetechnologiesmentioned
( )
Weassumed,sincenativeappsaredoing
better,it’sgoodtoimitate

13. web,asitcurrentlyis,ismuchbetter
Weforgotthat
WHY?

14. Withtheweb
● Wereach,justwithaURL
● Wecanhaveprogressiveupdates,
withnouserinteraction
WithNative
● OSspecificmarket
● Annoyingupdates
● 0newapppermonth
● Topthreeapp(winnertakesall)
● +50newsitespermonth
● Randomlydistributed

15. Distributingnative
softwareishard.
Webcansolvethis

16. Wereallyshouldn’thavechangedtheweb
WeJUSThavetomakeit
MorePROGRESSIVE

17. First,thedifference
betweenmobileand
desktop
Mostofusmadethe
native=>web
transitionondesktop

18. Enabling
technologyfor
thistransition
Desktop:AJAX(or…?)
Mobile:???

19. AJAXwasnot
enoughinmobile
Mobileappskeepthe
userengagedwith
theirfunctionality
87%
13%
Platform
Time

20. functionality
reachability
Progressive

21. WebVS.Native
Progressive Web Apps

22. @Kianenigma
@ZConf 2016
@Kianenigma

23. Howtobea
progressivewebapp? 1. Responsive
2. Fast Load
3. Work offline
4. Engaging

24. {Responsiveview}
Weallknowits
Hard
But
possible

25. Howtobea
progressivewebapp? 1. Responsive
2. Fast Load
3. Work offline
4. Engaging

26. Loadfast
Mobilenetwork
Cantakeupto2sectoconnect
Welosemorethat40%ofusers
Withmorethan3sec
Minimaloptimizedframeworks

27. Howtobea
progressivewebapp? 1. Responsive
2. Fast Load
3. Work offline
4. Engaging

28. Offline
native
app
WorkOffline

29. OfflineWeb
Orevenworse
...

30. YourDarkestdays
Lie-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 ...

32. Introducing
Serviceworkers
1. Runonbackground
2. ProgrammableProxyforHTTP
requests

33. Introducing
Serviceworkers
1. Runonbackground
2. ProxyallHTTPrequests
Cache - Staticcontent
- Userdata
- Appshell

34. Howtobea
progressivewebapp? 1. Responsive
2. Fast Load
3. Work offline
4. Engaging

35. Installable
Manifest.json
background
- Sync
- Notification
- etc.
- Icon
- Splashscreen
{
"name": "My App",
"short_name": "My App",
"icons": [...]
"start_url": "/",
"display": "standalone",
"background_color": "#3f51b5",
"theme_color": "#3f51b5"
}

36. Howtobea
progressivewebapp? 1. Responsive
2. Fast Load
3. Work offline
4. Engaging

38. Appendix
More details

39. 1. AMP
2. Polymerproject
3. Googleintroduction
Placestostartfrom

40. 1. Browsersshippingsw+manifestaswespeak:
chrome/firefox/opera/samsunginternet
2. Underdevelopment:edge
3. Justconsideringit:safari
Adarksecret:ios

41. 1. Localstorage:easy,clean,sufficient
2. Sessionstorage:perhapstooeasy!
3. Indexdb:seemsmessy!Usewrappers,like dexie.js
Storages

42. Visit
pwa.rocks
implementations

43. Example:Ali-Express( casestudy)
● 104%fornewusersacrossallbrowsers
● 82%increaseiniOSconversionrate
● 2Xmorepagesvisitedpersessionperuser
acrossallbrowsers
● 74%increaseintimespentpersessionacross
allbrowsers

44. Whyisthisimportant?
ABusinesscase
● Reach=>More
● Acquisition/cost=>More
● Conversion=>Improved
Howdowestart
● Groundup(konga)
● Asimpleversion(airberlin/wp-
80msloadtime)
● Onefeature(Booking)

45. ABusinesscase

46. Question?