Mobile-like web apps

Wouldn't it be great if your web application could also work as a mobile one? Feel more native, work offline, be installable on the user's device? In this talk Alina will share how to achieve all of that and some more, by creating a Progressive Web App, using just default web building blocks - HTML, CSS & JavaScript.

For who this talk will be interesting?
- front end and full stack developers will find out how to transform their new or existing web application into one which looks and feels like a mobile
- product people will learn what features of native app they can have, even without a mobile skillset in their team.

Transcript

1. Mobile-like web apps By Alina Karpelceva @AlinaWhoCodes
2. 1. Business case 2. PWA capabilities 3. Tech behind it 4. Distribution
3. BUSINESS CASE
4. >50%
7. Web = reach Native = engagement
8. reach + engagement = PWA
9. PWA = HTML + CSS + JS +
10. • Easier to create • Easier to deploy
11. PWA CAPABILITIES
12. Install on your home screen
13. Push notifications
14. Push notifications
15. Standalone/fullscreen mode
16. Work offline
17. Fast and performant Site loads >3 sec 53% users leave
18. Smooth UI Pinterest: Perceived load time ⬇40% +15% registrations
19. Smooth UI Pinterest +15%, ⬇40% Skeleton screens
20. Splashscreen
21. TECH BEHIND IT
22. Web App Manifest
23. Web App Manifest
24. Web App Manifest
25. Service Workers
26. Service workers
27. Service workers
28. Push API
29. Performance & UI/UX optimizations
30. PWA check list by Google
31. Baseline 1. Splashscreen 2. Served over https 3. Registers service worker, etc 4. Renders fast ...
32. Baseline 1. Content doesn't jump as the page loads 2. Site is responsive across phone, tablet and desktop screen sizes ...
33. Lighthouse tool
36. DISTRIBUTION
37. Distribution • Via web, obviously! ◦ Lighthouse check ◦ Custom banner on iOS
38. Distribution • Via store ◦ Apple - 99$/year ◦ Google - 25$ once ◦ Microsoft - free!
39. CONCLUSIONS
40. • PWA is many things • PWA is not in its prime (yet!) • iOS is majorly behind • Worth learning • Improves existing web
41. Thank you! @AlinaWhoCodes