Расширения браузера — Повторяющиеся уведомления

В предыдущей статье мы познакомились с уведомлениями браузера.
Мы смогли отправить уведомление, когда пользователь нажал на кнопку.
Однако это довольно одноразовое и бессмысленное действие. Давайте посмотрим, как мы можем сделать это повторяющимся действием.

Мы хотим, чтобы пользователь запускал поток и получал сообщение каждый час, чтобы напомнить ему, что он великолепен.

В качестве отправной точки я буду работать с предыдущей статьей. Вы можете использовать эту ветку GitHub, если хотите следить за развитием событий.

Создание повторяющихся уведомлений

Чтобы добиться повторяющихся уведомлений, мы должны использовать API сигнализации. Это позволяет нам создавать сигналы тревоги, которые могут срабатывать в определенное время.

Чтобы получить доступ к этому API, мы должны зарегистрировать его в нашем файле manifest.json.

{
  "permissions": [
    "alarms",
    "notifications"
  ]
}

Пока у нас открыт этот файл, нам также необходимо внедрить фоновый рабочий. Поскольку мы работаем с V3 манифеста, мы должны зарегистрировать его как сервисный работник следующим образом.

{
  "background": {
    "service_worker": "background.js"
  },
}

Этот фоновый рабочий будет действовать как мозг операции и посылать уведомления.

Давайте сначала изменим наш App.jsx, чтобы мы могли запускать нужные вещи.
Первое, что я сделал, это добавил еще одну кнопку, чтобы у пользователя всегда была возможность остановить повторяющийся сигнал тревоги.

export function App() {
  return (
    <div className='flex flex-col items-center justify-center w-screen h-auto bg-indigo-400 p-4'>
      <button
        className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded'
        onClick={createNotification}
      >
        Motivate me 🎉
      </button>
      <br />
      <button
        className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded'
        onClick={stopNotification}
      >
        Stop motivating me 😅
      </button>
    </div>
  );
}

Теперь давайте продолжим и создадим два действия.

Первым будет createNotification. Это действие должно добавить повторяющееся оповещение.

Для этого мы можем использовать API alarms и опцию periodInMinutes. При установленной опции сигнал тревоги будет повторяться каждую минуту (в соответствии со значением, которое вы используете).

const createNotification = () => {
  chrome.alarms.create({
    periodInMinutes: 60,
  });
  window.close();
};

Дополнительно вы можете использовать параметр delayInMinutes для добавления пользовательской задержки.

Примечание: При тестировании можно установить значение 1 минута.

Затем нам нужно добавить функцию, которая будет останавливать сигналы тревоги, когда пользователь попросит об этом.

const stopNotification = () => {
  chrome.alarms.clearAll();
  window.close();
};

Вот и все. Теперь наши сигналы тревоги управляются. Однако мы пока не увидим никаких уведомлений.

Здесь на помощь приходит скрипт фона.
Создайте файл background.js в папке public.

В нем нам нужно добавить слушателя для оповещений chrome. Каждый раз, когда срабатывает сигнал тревоги, мы хотим отправлять уведомление, как мы делали раньше.

chrome.alarms.onAlarm.addListener(() => {
  chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icons/icon-48.png',
    title: 'Hi there 👋',
    message: 'Just a reminder that you rock!',
    buttons: [{ title: 'I know ☺️' }],
    priority: 0,
  });
});

Добавление защиты от сбоев

Наш код работает, но в данный момент он срабатывает при каждом сигнале тревоги, это может означать, что другие плагины также устанавливают сигнал тревоги, и наш скрипт срабатывает.

Чтобы решить эту проблему, мы можем задать определенное имя для нашего сигнала тревоги.
Измените скрипт App.jsx, чтобы установить сигнал тревоги с именем.

chrome.alarms.create('motivation_alarm', {
  periodInMinutes: 1,
});

Затем нам нужно изменить наш скрипт background.js, чтобы уведомления отправлялись только в том случае, если сработала эта сигнализация.

chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === 'motivation_alarm') {
        chrome.notifications.create({
            ...
        });
    }
});

Вот и все. Теперь наши сигналы тревоги срабатывают только для нашего расширения.

Полный пример кода вы можете найти в этой ветке GitHub.

Спасибо, что прочитали, и давайте подключаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.