Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Favicon
на стероидах
Амосов Александр, AVITO
email: s9k0@ya.ru
twitter: @gc_s9k
Задача
2
• Messenger для обмена сообщениями между продавцом и покупателем
• Привлечь внимание пользователя, когда приходит...
Задача
1. Отображать favicon с количеством
непрочитанных сообщений
3
Задача
1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
4
Задача
1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon...
• Создать заранее все картинки
• Создавать динамически с помощью canvas
Отрисовка favicon
6
1 2 3 …
Отрисовка favicon
const canvas = document.createElement('canvas');
canvas.width = SIZE;
canvas.height = SIZE;
const contex...
Отрисовка favicon
const canvas = document.createElement('canvas');
canvas.width = SIZE;
canvas.height = SIZE;
const contex...
Отрисовка favicon
const canvas = document.createElement('canvas');
canvas.width = SIZE;
canvas.height = SIZE;
const contex...
Отрисовка favicon
const iconNode = document.createElement('link');
iconNode.rel = 'icon';
iconNode.type = 'image/png';
ico...
Отрисовка favicon
11
IE и Edge
12
• Не работают base64 фавиконки
• Не работает смена фавиконок
Задача
1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon...
Visibility API
14
15
document.addEventListener('visibilitychange', () => {
const isVisible = !document.hidden;
// ...
});
Visibility API
16
Задача
1. Отображать favicon с количеством
непрочитанных сообщений
2. Не отображать favicon на активной вкладке
3. Favicon...
Мигание
• setInterval
18
Мигание
• setInterval
19
Мигание
• setInterval
• gif?
20
Мигание
• setInterval
• gif
• Web Worker
21
Web Worker
• Выполняются в отдельном потоке
• Код находится в отдельном файле
• Нельзя манипулировать DOM
• Нет requestAni...
Доступно
• Объект navigator, location
• Fetch / XMLHttpRequest / WebSocket
• setTimeout()/clearTimeout() и setInterval()/c...
Обмен сообщениями
• Простые типы данных
24
Пример
const worker = new Worker('worker.js');
worker.postMessage('request');
worker.onmessage = ({ data }) => {
console.l...
Обмен сообщениями
• Простые типы данных
• Объекты
26
Пример
onmessage = ({ data }) => {
console.log(data);
postMessage('answer');
};
worker.jsmain.js
const worker = new Worker...
Обмен сообщениями
• Простые типы данных
• Объекты
• Transferrable objects
28
worker.jsmain.js
const typedArray = new Uint8Array([0, 1, 2]);
const worker = new Worker('worker.js');
worker.postMessage(...
Применение
• Для обработки больших объемов данных в отдельном потоке
• обработка текста
• обработка изображений, видео, ау...
Применение
• Для обработки больших объемов данных в отдельном потоке
• обработка текста
• обработка изображений, видео, ау...
let intervalId;
const INTERVAL_TIME = 2000;
onmessage = function({ data }) {
switch (data) {
case 'start':
clearInterval(i...
Web Worker
33
Задача
1. Отображать favicon с количеством непрочитанных
сообщений
2. Не отображать favicon на активной вкладке
3. Favicon...
Синхронизация
• SharedWorker
35
SharedWorker
• Может связываться сразу с несколькими контекстами
• Работает пока не закроются все страницы, его использующ...
worker.js
main.js
const worker = new SharedWorker('worker.js');
worker.port.postMessage('start');
worker.port.onmessage = ...
Применение
• Расшаренный между вкладками WebSocket
38
39
const ports = [];
const INTERVAL_TIME = 2000;
setInterval(() => {
ports.forEach(port => {
port.postMessage('tick');
});...
40
Синхронизация
• SharedWorker
• Нить времени
41
10:00 10:02 10:04 10:06 10:08 10:10
42
10:00 10:02 10:04 10:06 10:08 10:10
43
10:00 10:02 10:04 10:06 10:08 10:10
44
let timeoutId;
const INTERVAL_TIME = 2000;
function tick() {
const timeToStart = INTERVAL_TIME - Date.now() % INTERVAL_TIM...
10:00 10:02 10:04 10:06 10:08 10:10
2 2
46
Проблемы
• В Chrome 54 ограничение на веб воркер в неактивной вкладке
• На каждую вкладку создается свой веб воркер
47
48
49
Shared Worker
Dedicated Worker
setInterval
Задача
1. Отображать favicon с количеством непрочитанных
сообщений
2. Не отображать favicon на активной вкладке
3. Favicon...
51
setInterval, setTimeout на Воркерах
http://bit.ly/timersjs
Спасибо! Вопросы?
52
Амосов Александр
email: s9k0@ya.ru
twitter: @gc_s9k
http://bit.ly/timersjs
Upcoming SlideShare
Loading in …5
×

Favicon на стероидах

279 views

Published on

Александр Амосов
Avito

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Favicon на стероидах

  1. 1. Favicon на стероидах Амосов Александр, AVITO email: s9k0@ya.ru twitter: @gc_s9k
  2. 2. Задача 2 • Messenger для обмена сообщениями между продавцом и покупателем • Привлечь внимание пользователя, когда приходит новое сообщение
  3. 3. Задача 1. Отображать favicon с количеством непрочитанных сообщений 3
  4. 4. Задача 1. Отображать favicon с количеством непрочитанных сообщений 2. Не отображать favicon на активной вкладке 4
  5. 5. Задача 1. Отображать favicon с количеством непрочитанных сообщений 2. Не отображать favicon на активной вкладке 3. Favicon должен мигать 5
  6. 6. • Создать заранее все картинки • Создавать динамически с помощью canvas Отрисовка favicon 6 1 2 3 …
  7. 7. Отрисовка favicon const canvas = document.createElement('canvas'); canvas.width = SIZE; canvas.height = SIZE; const context = canvas.getContext('2d'); Создаем canvas и получаем 2d контекст 7
  8. 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. 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. 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. 11. Отрисовка favicon 11
  12. 12. IE и Edge 12 • Не работают base64 фавиконки • Не работает смена фавиконок
  13. 13. Задача 1. Отображать favicon с количеством непрочитанных сообщений 2. Не отображать favicon на активной вкладке 3. Favicon должен мигать 13
  14. 14. Visibility API 14
  15. 15. 15 document.addEventListener('visibilitychange', () => { const isVisible = !document.hidden; // ... });
  16. 16. Visibility API 16
  17. 17. Задача 1. Отображать favicon с количеством непрочитанных сообщений 2. Не отображать favicon на активной вкладке 3. Favicon должен мигать 17
  18. 18. Мигание • setInterval 18
  19. 19. Мигание • setInterval 19
  20. 20. Мигание • setInterval • gif? 20
  21. 21. Мигание • setInterval • gif • Web Worker 21
  22. 22. Web Worker • Выполняются в отдельном потоке • Код находится в отдельном файле • Нельзя манипулировать DOM • Нет requestAnimationFrame • Общение через сообщения • Имеют свой глобальный объект 22
  23. 23. Доступно • Объект navigator, location • Fetch / XMLHttpRequest / WebSocket • setTimeout()/clearTimeout() и setInterval()/clearInterval() • IndexedDB • Создание других Web Worker’ов 23
  24. 24. Обмен сообщениями • Простые типы данных 24
  25. 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. Обмен сообщениями • Простые типы данных • Объекты 26
  27. 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. 28. Обмен сообщениями • Простые типы данных • Объекты • Transferrable objects 28
  29. 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. 30. Применение • Для обработки больших объемов данных в отдельном потоке • обработка текста • обработка изображений, видео, аудио • обработка данных после получения через ajax • расчет физики в играх 30
  31. 31. Применение • Для обработки больших объемов данных в отдельном потоке • обработка текста • обработка изображений, видео, аудио • обработка данных после получения через ajax • расчет физики в играх • Для использования intervals/timeouts без ограничений 31
  32. 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. 33. Web Worker 33
  34. 34. Задача 1. Отображать favicon с количеством непрочитанных сообщений 2. Не отображать favicon на активной вкладке 3. Favicon должен мигать 4. Несколько вкладок должны мигать синхронно O_o 34
  35. 35. Синхронизация • SharedWorker 35
  36. 36. SharedWorker • Может связываться сразу с несколькими контекстами • Работает пока не закроются все страницы, его использующие 36
  37. 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. 38. Применение • Расшаренный между вкладками WebSocket 38
  39. 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. 40
  41. 41. Синхронизация • SharedWorker • Нить времени 41
  42. 42. 10:00 10:02 10:04 10:06 10:08 10:10 42
  43. 43. 10:00 10:02 10:04 10:06 10:08 10:10 43
  44. 44. 10:00 10:02 10:04 10:06 10:08 10:10 44
  45. 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. 46. 10:00 10:02 10:04 10:06 10:08 10:10 2 2 46
  47. 47. Проблемы • В Chrome 54 ограничение на веб воркер в неактивной вкладке • На каждую вкладку создается свой веб воркер 47
  48. 48. 48
  49. 49. 49 Shared Worker Dedicated Worker setInterval
  50. 50. Задача 1. Отображать favicon с количеством непрочитанных сообщений 2. Не отображать favicon на активной вкладке 3. Favicon должен мигать 4. Несколько вкладок должны мигать синхронно 50
  51. 51. 51 setInterval, setTimeout на Воркерах http://bit.ly/timersjs
  52. 52. Спасибо! Вопросы? 52 Амосов Александр email: s9k0@ya.ru twitter: @gc_s9k http://bit.ly/timersjs

×