"favicon на стероидах" Александр Амосов (avito)
TRANSCRIPT
![Page 2: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/2.jpg)
Задача
2
• Messenger для обмена сообщениями между продавцом и покупателем
• Привлечь внимание пользователя, когда приходит новое сообщение
![Page 3: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/3.jpg)
Задача1. Отображать favicon с количеством
непрочитанных сообщений
3
![Page 4: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/4.jpg)
Задача1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
4
![Page 5: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/5.jpg)
Задача1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
5
![Page 6: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/6.jpg)
• Создать заранее все картинки
• Создавать динамически с помощью canvas
Отрисовка favicon
6
1 2 3 …
![Page 7: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/7.jpg)
Отрисовка faviconconst canvas = document.createElement('canvas'); canvas.width = SIZE; canvas.height = SIZE; const context = canvas.getContext('2d');
Создаем canvas и получаем 2d контекст
7
![Page 8: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/8.jpg)
Отрисовка faviconconst canvas = document.createElement('canvas'); canvas.width = SIZE; canvas.height = SIZE; const context = canvas.getContext('2d');
context.fillStyle = '#ff6163'; context.beginPath(); context.arc(SIZE / 2, SIZE / 2, SIZE / 2, 0, 2 * Math.PI); context.fill();
8
![Page 9: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/9.jpg)
Отрисовка faviconconst canvas = document.createElement('canvas'); canvas.width = SIZE; canvas.height = SIZE; const context = canvas.getContext('2d');
context.fillStyle = '#ff6163'; context.beginPath(); context.arc(SIZE / 2, SIZE / 2, SIZE / 2, 0, 2 * Math.PI); context.fill();
context.fillStyle = 'white'; context.font = `${fontSize}px Arial`; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(number, SIZE / 2, SIZE / 2);
2
9
![Page 10: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/10.jpg)
Отрисовка faviconconst iconNode = document.createElement('link'); iconNode.rel = 'icon'; iconNode.type = 'image/png'; iconNode.href = canvas.toDataURL('image/png');
document.head.appendChild(iconNode);
Создаем элемент иконки и добавляем в head
10
![Page 11: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/11.jpg)
Отрисовка favicon
11
![Page 12: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/12.jpg)
IE и Edge
12
• Не работают base64 фавиконки
• Не работает смена фавиконок
![Page 13: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/13.jpg)
Задача1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
13
![Page 14: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/14.jpg)
Visibility API
14
![Page 15: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/15.jpg)
15
document.addEventListener('visibilitychange', () => { const isVisible = !document.hidden; // ... });
![Page 16: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/16.jpg)
Visibility API
16
![Page 17: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/17.jpg)
Задача1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
17
![Page 18: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/18.jpg)
Мигание• setInterval
18
![Page 19: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/19.jpg)
Мигание• setInterval
19
![Page 20: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/20.jpg)
Мигание• setInterval
• gif?
20
![Page 21: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/21.jpg)
Мигание• setInterval
• gif
• Web Worker
21
![Page 22: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/22.jpg)
Web Worker• Выполняются в отдельном потоке
• Код находится в отдельном файле
• Нельзя манипулировать DOM
• Нет requestAnimationFrame
• Общение через сообщения
• Имеют свой глобальный объект
22
![Page 23: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/23.jpg)
Доступно• Объект navigator, location
• Fetch / XMLHttpRequest / WebSocket
• setTimeout()/clearTimeout() и setInterval()/clearInterval()
• IndexedDB
• Создание других Web Worker’ов
23
![Page 24: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/24.jpg)
Обмен сообщениями• Простые типы данных
24
![Page 25: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/25.jpg)
Примерconst worker = new Worker('worker.js'); worker.postMessage('request'); worker.onmessage = ({ data }) => { console.log(data); };
onmessage = ({ data }) => { console.log(data); postMessage('answer'); };
worker.jsmain.js
25
![Page 26: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/26.jpg)
Обмен сообщениями• Простые типы данных
• Объекты
26
![Page 27: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/27.jpg)
Пример
onmessage = ({ data }) => { console.log(data); postMessage('answer'); };
worker.jsmain.js
const worker = new Worker('worker.js'); worker.postMessage({ arr: [2, 3] }); worker.onmessage = ({ data }) => { console.log(data); };
27
![Page 28: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/28.jpg)
Обмен сообщениями• Простые типы данных
• Объекты
• Transferrable objects
28
![Page 29: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/29.jpg)
worker.jsmain.js
const typedArray = new Uint8Array([0, 1, 2]);
const worker = new Worker('worker.js'); worker.postMessage(typedArray, [typedArray.buffer]);
worker.onmessage = ({ data }) => { console.log(data); };
onmessage = ({ data: typedArray }) => { postMessage(typedArray, [typedArray.buffer]); };
29
![Page 30: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/30.jpg)
Применение• Для обработки больших объемов данных в отдельном потоке
• обработка текста
• обработка изображений, видео, аудио
• обработка данных после получения через ajax
• расчет физики в играх
30
![Page 31: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/31.jpg)
Применение• Для обработки больших объемов данных в отдельном потоке
• обработка текста
• обработка изображений, видео, аудио
• обработка данных после получения через ajax
• расчет физики в играх
• Для использования intervals/timeouts без ограничений
31
![Page 32: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/32.jpg)
let intervalId; const INTERVAL_TIME = 2000;
onmessage = function({ data }) { switch (data) { case 'start': clearInterval(intervalId);
intervalId = setInterval(() => { postMessage('tick'); }, INTERVAL_TIME); break;
case 'stop': clearInterval(intervalId); break; } };
32
![Page 33: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/33.jpg)
Web Worker
33
![Page 34: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/34.jpg)
Задача1. Отображать favicon с количеством непрочитанных
сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
4. Несколько вкладок должны мигать синхронно O_o
34
![Page 35: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/35.jpg)
Синхронизация• SharedWorker
35
![Page 36: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/36.jpg)
SharedWorker• Может связываться сразу с несколькими контекстами
• Работает пока не закроются все страницы, его использующие
36
![Page 37: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/37.jpg)
worker.jsmain.js
const worker = new SharedWorker('worker.js');
worker.port.postMessage('start'); worker.port.onmessage = ({ data }) => { console.log(data); };
const ports = [];
onconnect = ({ ports: [port] }) => { ports.push(port);
port.onmessage = ({ data }) => { if (data === 'start') { port.postMessage(`connection: ${ports.length}`); } }; };
37
![Page 38: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/38.jpg)
Применение• Расшаренный между вкладками WebSocket
38
![Page 39: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/39.jpg)
39
const ports = []; const INTERVAL_TIME = 2000;
setInterval(() => { ports.forEach(port => { port.postMessage('tick'); }); }, INTERVAL_TIME);
onconnect = (event) => { const port = event.ports[0]; ports.push(port); };
![Page 40: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/40.jpg)
40
![Page 41: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/41.jpg)
Синхронизация• SharedWorker
• Нить времени
41
![Page 42: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/42.jpg)
10:00 10:02 10:04 10:06 10:08 10:10
42
![Page 43: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/43.jpg)
10:00 10:02 10:04 10:06 10:08 10:10
43
![Page 44: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/44.jpg)
10:00 10:02 10:04 10:06 10:08 10:10
44
![Page 45: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/45.jpg)
let timeoutId; const INTERVAL_TIME = 2000;
function tick() { const timeToStart = INTERVAL_TIME - Date.now() % INTERVAL_TIME;
timeoutId = setTimeout(tick, timeToStart); postMessage('tick'); }
onmessage = function({ data }) { switch (data) { case 'start': clearTimeout(timeoutId); tick(); break;
case 'stop': clearTimeout(timeoutId); break; } };
45
![Page 46: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/46.jpg)
10:00 10:02 10:04 10:06 10:08 10:10
2 2
46
![Page 47: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/47.jpg)
Проблемы• В Chrome 54 ограничение на веб воркер в неактивной вкладке
• На каждую вкладку создается свой веб воркер
47
![Page 48: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/48.jpg)
48
![Page 49: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/49.jpg)
49
Shared Worker
Dedicated Worker
setInterval
![Page 50: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/50.jpg)
Задача1. Отображать favicon с количеством непрочитанных
сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
4. Несколько вкладок должны мигать синхронно
50
![Page 52: "Favicon на стероидах" Александр Амосов (Avito)](https://reader034.vdocuments.mx/reader034/viewer/2022051318/58746d8b1a28abab198b8ac1/html5/thumbnails/52.jpg)
Спасибо! Вопросы?
52
Амосов Александр
email: [email protected] twitter: @gc_s9k
http://bit.ly/timersjs