[SOK-31] Service Worker #19
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| { | ||
| "short_name": "FTanks", | ||
| "name": "Falcon Tanks", | ||
| "icons": [ | ||
| { | ||
| "src": "./public/favicon.png", | ||
| "sizes": "64x64 32x32 24x24 16x16", | ||
| "type": "image/x-icon" | ||
| } | ||
| ], | ||
| "start_url": ".", | ||
| "display": "standalone", | ||
| "theme_color": "#000000", | ||
| "background_color": "#ffffff" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| const STATIC_CACHE_NAME = 'static-data-v1' | ||
| const DYNAMIC_CACHE_NAME = 'dynamic-data-v1' | ||
| const urlsToCache = [ | ||
| '/' | ||
| ] | ||
|
|
||
| const networkFirst = async (request) => { | ||
| const cache = await caches.open(DYNAMIC_CACHE_NAME) | ||
| try { | ||
| const response = await fetch(request) | ||
| if (response && response.status === 200 && response.type === 'basic') { | ||
|
There was a problem hiding this comment. Возможно стоит вынести в переменную isResponseSuccess, так как если добавиться хотя бы еще одно условие, может быть слишком много условий в There was a problem hiding this comment. Поддерживаю. Доп. переменные — это всегда хорошо, потому что код становится более читаемым. |
||
| await cache.put(request, response.clone()) | ||
| } | ||
| return response | ||
| } catch (error) { | ||
| console.error('Fetch failed; returning cached page instead.', error) | ||
|
There was a problem hiding this comment. Возможно не стоит это указывать в error. Ведь это поведение мы отлавливаем. И ожидаем, что такой сценарий может быть. Возможно стоит warning или info использовать. Но не уверен. There was a problem hiding this comment. Тут на ваше усмотрение. Консоль только разработчики открывают. Если так удобно, то окей. В реальном же мире, на реальном продукте, тут будет отправка запроса в аналитику (раз интернета нет, то сохранение где-то в localStorage, а отправка уже при появлении инета), чтобы аналитики, да и разработчики могли отслеживать графики того, как часто у юзеров отваливается инет |
||
| const cachedResponse = await cache.match(request) | ||
| if (cachedResponse) { | ||
| return cachedResponse | ||
| } | ||
| return new Response('Network error happened', { | ||
|
There was a problem hiding this comment. Выглядит так, что где-то тут приложение упадет, если пользователь не залогинен. Нам нужно как-то обработать сценарий, где пользователь попал на главую, приложение закешировалось, затем интернет отвалился. У пользователя должна остаться возможность хотябы попасть на главую. Верхом будет, если закинуть ему тостер, что "Ваше интернет соединение не стабильно". There was a problem hiding this comment. Так смотри. Если после отвала интернета, пользователь заходит в приложение (на главную), то тут сработает сценарий на 19 строке. Он достанет страницу из кеша и отдаст. Так что тут всё хорошо в плане логики. |
||
| status: 408, | ||
|
There was a problem hiding this comment. Тут можно кинуть 408, но чаще тут кидают 503 |
||
| headers: { 'Content-Type': 'text/plain' }, | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| self.addEventListener('install', (event) => { | ||
| event.waitUntil( | ||
| caches | ||
| .open(STATIC_CACHE_NAME) | ||
| .then((cache) => { | ||
| return cache.addAll(urlsToCache) | ||
| }) | ||
| .then(() => self.skipWaiting()) | ||
| .catch((err) => { | ||
| console.error('Cache installation failed:', err) | ||
| }) | ||
| ) | ||
| }) | ||
|
|
||
| self.addEventListener('fetch', (event) => { | ||
| const { request } = event | ||
| const { url, method } = request | ||
|
|
||
| if (method !== 'GET') { | ||
| return | ||
| } | ||
|
|
||
| if (!(url.indexOf('http') === 0)) { | ||
|
There was a problem hiding this comment. Можно сразу Можно лучше: немного сложная проверка, потому что сложно читать, и легко ошибиться. Давай разбираться. Ты ищешь в урле http. Метод Тут понятно. Но можно красивее: |
||
| return | ||
| } | ||
|
|
||
| event.respondWith(networkFirst(request)) | ||
| }) | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| export const registerServiceWorker = () => { | ||
| if ('serviceWorker' in navigator) { | ||
| window.addEventListener('load', () => { | ||
| navigator.serviceWorker | ||
| .register('./serviceWorker.js') | ||
| .then( | ||
| registration => { | ||
| console.log( | ||
| 'ServiceWorker registration successful with scope: ', | ||
| registration.scope | ||
| ) | ||
| }, | ||
| err => { | ||
| throw new Error(`ServiceWorker registration failed: ${err}`) | ||
| } | ||
| ) | ||
| .catch(err => { | ||
| throw new Error(err) | ||
| }) | ||
| }) | ||
| } else { | ||
| throw new Error('service worker is not supported') | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Не понимаю смысла разделения тут кеша на два. Если направишь меня, буду благодарен.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Честно, я тоже не до конца понимаю. Я изначально подумал, что тут просто несколько стратегий реализуется, и для каждой стратегии свой кеш.
Думаю, что в данном случае, это просто доп. усложнение, так как придётся в случае сброса кеша, обновлять две переменные, а не одну.