Offline first

Offline First
Филатов Евгений
1

Работа в офлайне
2

Типичное приложение
GET /index.html
GET /index.js
GET /index.css
GET /logo.svg
GET /api/endpoint1
GET /api/endpoint2
…
POST
PUT
DELETE
Уровень 1
Уровень 2
Уровень 3
3

Уровень 1
Приложение доступно в офлане
4

Уровень 1
•Application Cache
•Service Workers
5

Application Cache
3.5+
4+
11.5+
10+
2.1+
4+ 3.2+
Deprecated6

Service Workers
example.comexample.com
Service worker
8
API

Service Workers
44+
45+
32+
5+
9

Service Workers
Умеют
• Кешировать урлы
• Перехватывать запросы от клиента
• Получать и отвечать на сообщения клиента
• Слать уведомления
Не умеют
• Работать на http (только https или на localhost)
• Работать с DOM
10

Service Workers
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('/sw.js')
} catch (e) {
console.error(e)
}
}
11

sw.js
const CACHE_NAME = 'v1'
const FILES = [
'/',
'/index.js'
]
self.addEventListener('install', e => {
e.waitUntil(caches.open(CACHE_NAME).then(cache => {
return cache.addAll(FILES)
}))
})
12

Уровень 2
Cache ‘Em all
13

Уровень 2
• JS (redux-offline, PouchDB, …)
• Service Workers
14

Уровень 2
15
Client
API
GET /api/messages
Cache
GET /api/messages (cached)
Service Worker

sw.js
self.addEventListener('fetch', e => {
const request = e.request
e.respondWith(
caches.open(CACHE_NAME).then(cache => {
return fetch(request.clone())
.then(response => {
if(response && request.method === 'GET' && response.status < 400) {
cache.put(request, response.clone())
}
return response
})
.catch(err => caches.match(request))
})
)
})
16
Перехватываем fetch
Делаем оригинальный запрос
Ложим ответ в кеш если все
хорошо
Пытаемся найти в кеше
если все плохо
Отвечаем на fetch
промисом

Online / Offline
navigator.onLine // initial state
window.addEventListener('online', () => {
// online
})
window.addEventListener('offline', () => {
// offline
})
setInterval(async () => {
try {
const res = await fetch(/api/ping')
res.status === 200 // online / offline
} catch (e) {
// offline
}
}, 2000)
19

Online / Offline
20
.offline .offline-disable {
pointer-events: none;
text-decoration: line-through #353535;
}
<body class='offline'>
<button class='offline-disable'>online only</button>
<button>everywhere</button>
</body>

Уровень 3
100% офлайн
21

Уровень 3
22
API
Client
POST, PUT, PATCH, DELETE

Все всегда хорошо
24
start()
try {
await fetch('/api/123/like', {method: 'put'})
success()
} catch (e) {
fail()
}
success()
try {
await fetch('/api/123/like', {method: 'put'})
} catch (e) {
retryInAWhile()
}

25
PUT /api/123/like
DELETE /api/442/like
POST /api/messages
PATCH /api/messages/789 PATCH /api/messages/789
PUT /api/322/like
DELETE /api/322/like
Сохраняем неуспешные запросы

sw.js
26
const failedRequests = []
self.addEventListener('fetch', e => {
const request = e.request
e.respondWith(
fetch(request.clone())
.catch(err => {
if (request.method !== 'GET') {
failedRequests.push(request.clone())
}
throw err
})
)
})

Синхронизируем
27
try {
const registration = await navigator.serviceWorker.register('/sw.js')
setInterval(() => {
registration.sync.register('retry-requests')
}, 5000)
} catch (e) {
console.error(e)
}

sw.js
28
self.addEventListener('sync', e => {
if (e.tag === 'retry-requests') {
e.waitUntil(retryRequests())
}
})
async function retryRequests() {
try {
while (failedRequests.length) {
await fetch(failedRequests[0].clone())
failedRequests.splice(0, 1)
}
} catch (e) {}
}

Демо
offlinefirst.herokuapp.com
github.com/wtfil/offline-first
30

Спасибо за внимание
Вопросы?
Филатов Евгений
@wtfil
@wtfil

Offline first

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Offline first

Similar to Offline first (20)

Offline first