РИТ++ 2017, Frontend Сonf Зал Мумбаи, 6 июня, 15:00 Тезисы: http://frontendconf.ru/2017/abstracts/2575.html Мы расскажем о построении работы действующей offline версии сайта на примере СМИ с миллионной аудиторией. О выборе стека технологий для решении поставленной задачи. О результатах эксплуатации с момента запуска. В том числе: * Стратегия обновления данных в Service Worker * Проблемы и их решение при работе с оффлайн-средой * Сбор аналитики при отсутствии интернета

1. Как мы запустили
offline-версию cайта rg.ru

2. официально
1 000 000

3. Offline-версия уже доступна
для любого сайта

7. Доставка пиццы

9. Вкусная
пицца

15. Всё что угодно

16. Service Worker -
сердце оффлайн приложения

17. Позволяет

18. Позволяет
- КОНТРОЛИРОВАТЬ СТРАНИЦЫ

19. Позволяет
- КОНТРОЛИРОВАТЬ СТРАНИЦЫ
- ПЕРЕХВАТЫВАТЬ ЗАПРОСЫ

20. Позволяет
- КОНТРОЛИРОВАТЬ СТРАНИЦЫ
- ПЕРЕХВАТЫВАТЬ ЗАПРОСЫ
- КЕШИРОВАТЬ РЕСУРСЫ

21. Позволяет
- КОНТРОЛИРОВАТЬ СТРАНИЦЫ
- ПЕРЕХВАТЫВАТЬ ЗАПРОСЫ
- КЕШИРОВАТЬ РЕСУРСЫ

22. Принцип работы Service Worker
register

23. Принцип работы Service Worker
register install

24. Принцип работы Service Worker
register install activation

25. register

26. register
navigator
.serviceWorker
.register(
‘/sw.js’,
{ scope: ‘/article/’}
)

27. register
navigator
.serviceWorker
.register(
‘/sw.js’,
{ scope: ‘/article/’}
)

28. install

29. install
self.addEventListener(
‘install’,
event => {
....
setCache()
}
)

30. activation

31. activation
self.addEventListener(
‘activate’,
event => {
....
checkCache()
}
)

32. Принцип работы Service Worker
Слушаем события:

33. message
Принцип работы Service Worker
Слушаем события:
- MESSAGE

34. Принцип работы Service Worker
Слушаем события:
- MESSAGE
fetch
- FETCH

35. Принцип работы Service Worker
Слушаем события:
- MESSAGE
- FETCH
push
- PUSH

36. Принцип работы Service Worker
Слушаем события:
- MESSAGE
- FETCH
- PUSH
sync - SYNC

37. Подходы к построению
оффлайн приложения

38. 1 Статика

39. 1 Статика
HTML

40. 1 Статика
HTML CSS

41. 1 Статика
HTML CSS JS

42. 1 Статика
HTML CSS JS
IMG / SVG / FONTS

43. 2 Offline first

44. 3 SPA

45. 3 SPA

46. 3 SPA

47. 3 SPA

48. 3 SPA

49. Идея создания
offline версии rg.ru

54. Как у них?

55. This page is not availiable
Reload More

56. This page is not availiable
Reload More

57. This page is not availiable
Reload More

58. This page is not availiable
Reload More

59. This page is not availiable
Reload More

60. Описание интерфейса

61. offline

62. offline

63. offline

64. offline

65. offline

66. Фильтруем контент

67. Как работает offline-версия
сайта rg.ru

68. Page

69. Page
register
SW

70. Page
install
Cache
SW

71. Page
activate
Clear
SW

72. Page
fetch
Filter
SW

73. self.addEventListener(‘fetch’, event => {
event.respondWith(
fetch(request)
.catch(() => {
return caches.match(offlineApp);
});
);
});

74. Page SW
Update

75. Принцип работы приложения

76. Controller

77. Controller
index.html

78. Controller
Model
index.html

79. Controller
Model
{{...}}
View
index.html

80. Controller
HTML
Model
{{...}}
View
index.html

81. Доступность сети

82. Доступность сети
- ONONLINE

83. Доступность сети
- ONONLINE
- ONOFFLINE

84. Доступность сети
- ONONLINE
- ONOFFLINE
- navigator.onLine

85. Доступность сети
Google
Analytics
SEND

86. Проблемы...

87. Обновление данных

88. Проблема...

89. Проблема... Есть идеи?

90. Проблема... Есть идеи? setInterval?

91. Проблема... Есть идеи? setInterval? ...

92. Page

93. Page
new Date()
Time 1

94. Page
new Date()
Time 1
Local Storage

95. Reload

96. Page
new Date()
Time 2

97. Page
new Date()
Time 2
Local Storage
Time 1

98. Page
new Date()
Time 2
Local Storage
Time 1
ВРЕМЯ
ПОСЛЕДНЕГО
ПОСЕЩЕНИЯ

99. Page
new Date()
Time 2
Local Storage
Time 1
>15

100. Page
Update

101. periodicSync

102. registration.periodicSync.register({
tag: ‘updateData’,
minPeriod: 15 * 60 * 1000
...
})

103. Задержки
при получении данных

104. https://rg.ru/
offline

105. fetch(PATH_TO_OFFLINE_DATA)
.then(renderApp)
Запрос на получение данных

106. OfflineApp

107. OfflineApp
FETCH

108. OfflineApp

109. sendMsgToSW(‘getCacheResource’, {
resourceName: ‘OFFLINE_DATA’
})
Запрос на получение данных

110. Два Service Worker
в одном scope

111. PUSH NOTIFICATION

112. RG.RU
{ scope: ‘/article/’} { scope: ‘/rubrics/’}

113. RG.RU
{ scope: ‘/article/’} { scope: ‘/rubrics/’}

114. RG.RU
{ scope: ‘./’} { scope: ‘./’}

115. RG.RU
{ scope: ‘./’} { scope: ‘./’}

116. importScripts(‘offline’);
importScripts(‘notification’);
ServiceWorker.js

117. importScripts(‘offline’);
importScripts(‘notification’);
ServiceWorker.js

118. navigator
.serviceWorker
.register(‘/sw.js’)
.then(() => {
// Оффлайн: инициализация сервиса
initOfflineService();
// Уведомления: инициализация сервиса
initNotifyService();
})

119. Проксирование трафика
через ServiceWorker

122. Request to Service Worker ~ 9.0 s

123. Было
self.addEventListener(‘fetch’, event => {
event.respondWith(
fetch(event.request)
.catch(() => {
return caches.match(‘offlineApp’);
})

124. Стало
self.addEventListener(‘fetch’, event => {
if (
) {
event.respondWith(
fetch(event.request)
.catch(() => {
return caches.match(‘offlineApp’);
})

125. Стало
self.addEventListener(‘fetch’, event => {
if (request.method === ‘GET’
) {
event.respondWith(
fetch(event.request)
.catch(() => {
return caches.match(‘offlineApp’);
})

126. Стало
self.addEventListener(‘fetch’, event => {
if (request.method === ‘GET’ &&
request.headers.get(‘accept’).includes(‘text/html’) &&
) {
event.respondWith(
fetch(event.request)
.catch(() => {
return caches.match(‘offlineApp’);
})

127. Стало
self.addEventListener(‘fetch’, event => {
if (request.method === ‘GET’ &&
request.headers.get(‘accept’).includes(‘text/html’) &&
!request.headers.has(‘range’)) {
event.respondWith(
fetch(event.request)
.catch(() => {
return caches.match(‘offlineApp’);
})

128. Аналитика

129. Page

130. Page
get
Google
Analytics
DATA

131. Index DB

132. Index DB
- асинхронно

133. Index DB
- асинхронно
- транзакции

134. Index DB
- асинхронно
- транзакции
- индексы

135. Index DB
- асинхронно
- транзакции
- индексы
- большие объемы

136. Index DB
- асинхронно
- транзакции
- индексы
- большие объемы
- работа из SW

137. Index DB
- асинхронно
- транзакции
- индексы
- большие объемы
- работа из SW

138. Page

139. Page
pageview
DB

140. Page
pageview
DB
get
DATA
GA

141. +10% аудитории
Page DB
get
DATA
GA

142. Что мы имеем
на данный момент

143. Данные о посещаемости

144. Данные о посещаемости

145. 3000 из Offline

146. 30% - Desktop

147. Блокировка сайтов

148. 302 редирект
Блокировка сайтов

149. Блокировка сайтов
self.addEventListener(‘fetch’, event => {
event.respondWith(
fetch(request)
.then(response => {
if (response.status === 0) {
return caches.match(WARNING);
}
if (response) return response;
})
.catch(...)

150. Блокировка сайтов
self.addEventListener(‘fetch’, event => {
event.respondWith(
fetch(request)
.then(response => {
if (response.status === 0) {
return caches.match(WARNING);
}
if (response) return response;
})
.catch(...)

151. Ошибки сервера 5xx

152. Ошибки сервера 5xx
self.addEventListener(‘fetch’, event => {
event.respondWith(
fetch(request)
.then(response => {
if (response.status >= 500 || response.status <= 504) {
return caches.match(WARNING);
}
if (response) return response;
})
.catch(...)

153. Ошибки сервера 5xx
self.addEventListener(‘fetch’, event => {
event.respondWith(
fetch(request)
.then(response => {
if (response.status >= 500 || response.status <= 504) {
return caches.match(WARNING);
}
if (response) return response;
})
.catch(...)

154. back end

155. back end front end

156. back end front end

157. PWA

158. Edge Firefox Chrome Opera
11 52
53
54
55
56
IE
11 15
57
58
59
60
61
49
56
49
10
10.1 44
45
46

159. Edge Firefox Chrome Opera iOS Safari
Android
Browser
Chrome for
Android
11 52
53
54
55
56
IE
11 15
57
58
59
60
61
49
56
49
10
10.1 44
45
46
10.2
10.3
9.3
4.4.4
56
4.4
57

160. Резюме
- РАСШИРЕНИЕ ДОСТУПНОСТИ САЙТА
- ОБРАБОТКА ОШИБОК СЕРВЕРА
- РАБОТАЕТ УЖЕ СЕЙЧАС

161. Вопросы?
Максим Чагин
e-mail: MaxChagin@gmail.com
Алексей Чернышев
e-mail: mr.lozchka@gmail.com
skype: mr.lozchka

162. Ссылки по теме:
rg.ru/front2017/