Favicon на стероидах
0 likes479 views
Документ содержит инструкции по реализации динамического favicon для браузера, отображающего количество непрочитанных сообщений. Обсуждаются методы, такие как использование canvas для отрисовки и взаимосвязь между несколькими вкладками через shared worker. Включены аспекты работы с web workers и их применение для обработки данных в фоновом режиме.
![Пример
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](https://image.slidesharecdn.com/favicon-161202132515/85/Favicon-27-320.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](https://image.slidesharecdn.com/favicon-161202132515/85/Favicon-29-320.jpg)
![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](https://image.slidesharecdn.com/favicon-161202132515/85/Favicon-37-320.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);
};](https://image.slidesharecdn.com/favicon-161202132515/85/Favicon-39-320.jpg)
Favicon на стероидах
- 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
- 12. IE и Edge 12 • Не работают base64 фавиконки • Не работает смена фавиконок
- 13. Задача 1. Отображать favicon с количеством непрочитанных сообщений 2. Не отображать favicon на активной вкладке 3. Favicon должен мигать 13
- 15. 15 document.addEventListener('visibilitychange', () => { const isVisible = !document.hidden; // ... });
- 17. Задача 1. Отображать favicon с количеством непрочитанных сообщений 2. Не отображать favicon на активной вкладке 3. Favicon должен мигать 17
- 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
- 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
- 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