PWA – это сейчас хайп тренд. Google и Microsoft говорят про них на своих конференциях. Twitter и Uber переписывают на них свои мобильные версии веб-приложений. И вот, работая над своим проектом, я решил сделать его Progressive и протестировать на реальных пользователях в production. В этом докладе я расскажу как я это делал и какую пользу это принесло проекту.

2. О себе
• Из Одессы ☀️🌊⚓️
• 6+ лет опыта в web разработке
• Есть опыт 🛠 нативных Android и iOS 📱
• 👷 свой проект где тестирую 🔥 технологии в production

3. давным давно ⏳…

4. geekinformer.net
👓📰.ws

10. https://www.youtube.com/watch?v=17kGWJOuL
-A&list=PLNYkxOF6rcIAdnzEsWkg0KpMn2WJwMBmN

15. ?

16. Android Instant Apps Progressive Web Apps
• Много переписывать
• Android 5+
• Ограничение на размер
модуля
• Ненавязчивая интеграция
• Desktop & Mobile
• Chrome 52+

17. My case
• 60% 🛠, 40% 📱
• 72%
• 60% 📱пришло с

18. Сможет ли PWA
сделать мой проект
лучше?

21. Приложение должно
загружаться
максимально быстро

22. Оптимизация загрузки
• Webpack Tree Shaking
• <link rel="dns-prefetch">
• <link rel="preload">
• <script async> 2x
0.5сек
0.1сек

23. Intersection Observer
~1mb
картинок

24. Custom Fonts
font-family: -apple-
system,BlinkMacSystemFont,"Segoe
UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open
Sans","Helvetica Neue",sans-serif;
~200kb

25. Axios
~12kb
Fetch API

26. после оптимизации

28. Скорость загрузки < 1сек

29. Shadow AMP
В будущем:
https://www.ampproject.org/docs/gu
ides/pwa-amp/amp-in-pwa

31. Быстрый доступ к
приложению каждый день

33. App install
banner

34. https://developers.google.com/web/fundamentals/engage-and-retain/app-i
nstall-banners

35. Простая авторизация

36. Credential API
https://developers.google.com/web/fundamentals/security/credential-management/

37. Open Tab Sign In
https://cli.re/smart-lock-web

38. Open YOLO
You Only Login Once

39. Простой шаринг
новостей

40. Desktop 👍
Mobile 👎

41. Web
Share
API
https://developers.google.com/web/u
pdates/2016/09/navigator-share

42. Возможность
контролировать аудио
и видео поток

43. Media Session API
Before After

44. https://developers.google.com/web/updates/2017/02/media-session

45. Push
notifications
https://web-push-book.gauntface.com/

47. Работа приложения
Offline

50. Service Worker

51. Service Worker Libraries
• Cache static files (sw-precache)
• Cache network responses caching strategies (sw-toolbox)
• Offline Analytics (sw-offline-google-analytics)

52. • Cache static files (workbox-precaching)
• Cache network responses caching strategies (workbox-routing)
• Use Background Sync API (workbox-background-sync)
• Offline Analytics (workbox-google-analytics)
https://developers.google.com/web/tools/workbox

53. Пользователь
должен знать что он
Offline

54. Network
API

55. Информация о
размере кэша

57. Storage
API
estimation
https://developers.google.com/web/update
s/2017/08/estimating-available-storage-
space

58. ОС не должна очищать кэш
в случае нехватки памяти

59. Storage
API
persistent
https://developers.google.com/web/updates/2016/06/persistent-storage

61. Интерфейс веб приложения
должен выглядеть как
нативный

63. Прокрутка большой
новостной ленты

66. Была ли боль?

67. 1
2
https://www.kollegorna.se/en/2017/06/service-worker-gotchas/

68. Сколько времени
на внедрение PWA
?

69. • Web Share API - 5 минут
• Manifest.json - 10 минут
• Storage API - 10 минут
• Media Session API - 15 минут
• Credentials API - 5 часов
• Service Worker - 10 часов

70. Что c iOS?

72. “Нативные” фичи в
Safari
• App banner
• Full Screen Detection
• Apple Pay
• Airplay Video API
• 3D Touch
• Force Touch
• Push Notifications (Desktop)
• Reduced Motion Media Query

73. Стал ли мой проект лучше?

74. • На 10% больше запусков
веб-приложения с
домашнего экрана
• На 15% больше
посещений со
смартфонов
Преимущества

75. Недостатки

77. Спасибо за внимание
Timofey Lavrenyuk
fb.me/tlavrenyuk