Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to make mobile web apps
better with modern Browser APIs
Timofey Lavrenyuk
fb.me/tlavrenyuk
• From Odessa ☀🌊⚓
• 6+ years of professional web development
• 🛠 experience in native Android and iOS 📱
• 👷 in
About me
☀
🌒
geekinformer.net
A long time ago ⏳…
6 months
New design concept
🙃
So should I continue developing the
app on Android when there is the PWA?
🤔
What features of native apps are
already available in web apps
App install banner
https://developers.google.com/web/
fundamentals/engage-and-retain/app-i
nstall-banners
Android app
install banner
manifest.json
Offline work
Service Worker
sw-precache
sw-toolbox
https://developers.google.com/web/tools/workbox
Workbox
Me
Push
notifications
https://web-push-book.gauntface.com/
User must be aware
that he is Offline
Network
API
Notifies a user that the
connection is lost
User must get data with
unstable connection
Network API
+
IndexedDB
Download local data if
connection is slow
http://wicg.github.io/netinfo/#dfn-effective-connection-type
navigator.connection.effectiveType
130ms - downloading news from IndexedDB 30560ms - downloading news from the server
Cache size estimation
Storage
API
estimation
https://developers.google.com/web/
updates/2017/08/estimating-available-
storage-space
Get the currently used amount of cache and its maximum limit
Clearing cache
User experience 
Device
Orientation API
Switch to fullscreen when rotating
https://github.com/exelnait/pwa-cool-features/blob/master/fullscreen-video-after-screen-rotation.html
Full example with ma...
Ability to control audio
in the background
Media
Session API
Before After
https://developers.google.com/web/updates/2017/02/media-session
Simple news sharing
Desktop 👍
Mobile 👎
Web
Share API
https://developers.google.com/web/
updates/2016/09/navigator-share
Simple authorization
🤔
Credential API
https://developers.google.com/web/fundamentals/security/credential-management/
Saving Credentials
PasswordCredential
FederatedCredential
Getting Credentials
Getting Credentials
PasswordCredential
Password ⁉
• They had to send the password as part of a JSON object.
• They had to send the hash value of the password to their serve...
Getting Credentials
PasswordCredential
FederatedCredential
idToken ⁉
Open Tab Sign In
https://cli.re/smart-lock-web
Open YOLO
You Only Login Once
1)
2)
3)
How much time is
?
Web Share API Very quick
manifest.json Quick
Network API Quick - Normal
Storage API Normal
Media Session API Normal
Creden...
Is it worth the cost?
🕓
Conclusions
• Launch from home screen
• Fast performance and reliability
• Complete access to device features
• Slow delivery to user
...
• Real time delivery
• Extended access to device features
• Offline work
• Install on a device
• Most features aren’t suppo...
So should I continue developing the
app on Android when there is the PWA?
🤔
PWA ≠ Native
PWA ≂ Lite version of
native app in the web
3rd version is in development
career@keepsolid.com
Timofey Lavrenyuk
fb.me/tlavrenyuk
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API
Upcoming SlideShare
Loading in …5
×

JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API

88 views

Published on

Хотите сделать веб приложение лучше? Современные браузерные API помогут в этом. Мы разберем что они из себя представляют и как использовать самые популярные API на примере реального проекта

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью современных браузерных API

  1. 1. How to make mobile web apps better with modern Browser APIs Timofey Lavrenyuk fb.me/tlavrenyuk
  2. 2. • From Odessa ☀🌊⚓ • 6+ years of professional web development • 🛠 experience in native Android and iOS 📱 • 👷 in About me
  3. 3.
  4. 4. 🌒
  5. 5. geekinformer.net
  6. 6. A long time ago ⏳…
  7. 7. 6 months
  8. 8. New design concept 🙃
  9. 9. So should I continue developing the app on Android when there is the PWA? 🤔
  10. 10. What features of native apps are already available in web apps
  11. 11. App install banner
  12. 12. https://developers.google.com/web/ fundamentals/engage-and-retain/app-i nstall-banners Android app install banner
  13. 13. manifest.json
  14. 14. Offline work
  15. 15. Service Worker
  16. 16. sw-precache sw-toolbox
  17. 17. https://developers.google.com/web/tools/workbox
  18. 18. Workbox Me
  19. 19. Push notifications https://web-push-book.gauntface.com/
  20. 20. User must be aware that he is Offline
  21. 21. Network API Notifies a user that the connection is lost
  22. 22. User must get data with unstable connection
  23. 23. Network API + IndexedDB Download local data if connection is slow
  24. 24. http://wicg.github.io/netinfo/#dfn-effective-connection-type navigator.connection.effectiveType
  25. 25. 130ms - downloading news from IndexedDB 30560ms - downloading news from the server
  26. 26. Cache size estimation
  27. 27. Storage API estimation https://developers.google.com/web/ updates/2017/08/estimating-available- storage-space
  28. 28. Get the currently used amount of cache and its maximum limit
  29. 29. Clearing cache
  30. 30. User experience 
  31. 31. Device Orientation API Switch to fullscreen when rotating
  32. 32. https://github.com/exelnait/pwa-cool-features/blob/master/fullscreen-video-after-screen-rotation.html Full example with magic
  33. 33. Ability to control audio in the background
  34. 34. Media Session API Before After
  35. 35. https://developers.google.com/web/updates/2017/02/media-session
  36. 36. Simple news sharing
  37. 37. Desktop 👍 Mobile 👎
  38. 38. Web Share API https://developers.google.com/web/ updates/2016/09/navigator-share
  39. 39. Simple authorization
  40. 40. 🤔
  41. 41. Credential API https://developers.google.com/web/fundamentals/security/credential-management/
  42. 42. Saving Credentials PasswordCredential FederatedCredential
  43. 43. Getting Credentials
  44. 44. Getting Credentials PasswordCredential Password ⁉
  45. 45. • They had to send the password as part of a JSON object. • They had to send the hash value of the password to their server. We received feedback that developers could not use the API because: After performing a security analysis and recognizing that concealing passwords from JavaScript did not prevent all attack vectors as effectively as we were hoping, we have decided to make a change. PasswordCredential object now includes password
  46. 46. Getting Credentials PasswordCredential FederatedCredential idToken ⁉
  47. 47. Open Tab Sign In https://cli.re/smart-lock-web
  48. 48. Open YOLO You Only Login Once
  49. 49. 1) 2) 3)
  50. 50. How much time is ?
  51. 51. Web Share API Very quick manifest.json Quick Network API Quick - Normal Storage API Normal Media Session API Normal Credentials API Normal - Long Workbox Quick - Long
  52. 52. Is it worth the cost? 🕓
  53. 53. Conclusions
  54. 54. • Launch from home screen • Fast performance and reliability • Complete access to device features • Slow delivery to user • Real time delivery • Limited access to device features • Depends on internet connection • Can’t install Web App on a device ➕ ➖ ➖ ➖ ➕ ➕ ➖ ➕
  55. 55. • Real time delivery • Extended access to device features • Offline work • Install on a device • Most features aren’t supported on iOS now (< 11.3) ➕ ➕ ➕ ➕ ➖
  56. 56. So should I continue developing the app on Android when there is the PWA? 🤔
  57. 57. PWA ≠ Native
  58. 58. PWA ≂ Lite version of native app in the web
  59. 59. 3rd version is in development
  60. 60. career@keepsolid.com Timofey Lavrenyuk fb.me/tlavrenyuk

×