Сделать фавиконку вашего сайта информативной и даже добавить простейшую анимацию - эта задача не такая уж и простая, как может показаться на первый взгляд. В своем докладе я расскажу, какие сложности могут возникнуть и какими интересными браузерными API придется воспользоваться, чтобы реализовать эту задачу.

1. Favicon
на стероидах
Амосов Александр, AVITO
email: s9k0@ya.ru
twitter: @gc_s9k

2. Задача
2
• Messenger для обмена сообщениями между продавцом и покупателем
• Привлечь внимание пользователя, когда приходит новое сообщение

3. Задача
1. Отображать favicon с количеством
непрочитанных сообщений
3

4. Задача
1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
4

5. Задача
1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
5

6. • Создать заранее все картинки
• Создавать динамически с помощью canvas
Отрисовка favicon
6
1 2 3 …

7. Отрисовка favicon
const canvas = document.createElement('canvas');
canvas.width = SIZE;
canvas.height = SIZE;
const context = canvas.getContext('2d');
Создаем canvas и
получаем 2d контекст
7

8. Отрисовка favicon
const 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

9. Отрисовка favicon
const 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

10. Отрисовка favicon
const iconNode = document.createElement('link');
iconNode.rel = 'icon';
iconNode.type = 'image/png';
iconNode.href = canvas.toDataURL('image/png');
document.head.appendChild(iconNode);
Создаем элемент иконки
и добавляем в head
10

11. Отрисовка favicon
11

12. IE и Edge
12
• Не работают base64 фавиконки
• Не работает смена фавиконок

13. Задача
1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
13

14. Visibility API
14

15. 15
document.addEventListener('visibilitychange', () => {
const isVisible = !document.hidden;
// ...
});

16. Visibility API
16

17. Задача
1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
17

18. Мигание
• setInterval
18

19. Мигание
• setInterval
19

20. Мигание
• setInterval
• gif?
20

21. Мигание
• setInterval
• gif
• Web Worker
21

22. Web Worker
• Выполняются в отдельном потоке
• Код находится в отдельном файле
• Нельзя манипулировать DOM
• Нет requestAnimationFrame
• Общение через сообщения
• Имеют свой глобальный объект
22

23. Доступно
• Объект navigator, location
• Fetch / XMLHttpRequest / WebSocket
• setTimeout()/clearTimeout() и setInterval()/clearInterval()
• IndexedDB
• Создание других Web Worker’ов
23

24. Обмен сообщениями
• Простые типы данных
24

25. Пример
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

26. Обмен сообщениями
• Простые типы данных
• Объекты
26

27. Пример
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

28. Обмен сообщениями
• Простые типы данных
• Объекты
• Transferrable objects
28

29. 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

30. Применение
• Для обработки больших объемов данных в отдельном потоке
• обработка текста
• обработка изображений, видео, аудио
• обработка данных после получения через ajax
• расчет физики в играх
30

31. Применение
• Для обработки больших объемов данных в отдельном потоке
• обработка текста
• обработка изображений, видео, аудио
• обработка данных после получения через ajax
• расчет физики в играх
• Для использования intervals/timeouts без ограничений
31

32. 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

33. Web Worker
33

34. Задача
1. Отображать favicon с количеством непрочитанных
сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
4. Несколько вкладок должны мигать синхронно O_o
34

35. Синхронизация
• SharedWorker
35

36. SharedWorker
• Может связываться сразу с несколькими контекстами
• Работает пока не закроются все страницы, его использующие
36

37. worker.js
main.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

38. Применение
• Расшаренный между вкладками WebSocket
38

39. 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);
};

40. 40

41. Синхронизация
• SharedWorker
• Нить времени
41

42. 10:00 10:02 10:04 10:06 10:08 10:10
42

43. 10:00 10:02 10:04 10:06 10:08 10:10
43

44. 10:00 10:02 10:04 10:06 10:08 10:10
44

45. 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

46. 10:00 10:02 10:04 10:06 10:08 10:10
2 2
46

47. Проблемы
• В Chrome 54 ограничение на веб воркер в неактивной вкладке
• На каждую вкладку создается свой веб воркер
47

48. 48

49. 49
Shared Worker
Dedicated Worker
setInterval

50. Задача
1. Отображать favicon с количеством непрочитанных
сообщений
2. Не отображать favicon на активной вкладке
3. Favicon должен мигать
4. Несколько вкладок должны мигать синхронно
50

51. 51
setInterval, setTimeout на Воркерах
http://bit.ly/timersjs

52. Спасибо! Вопросы?
52
Амосов Александр
email: s9k0@ya.ru
twitter: @gc_s9k
http://bit.ly/timersjs