O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

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

303 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×