브라우저 확장 프로그램 - 반복 알림

이전 기사에서는 introduction to browser notifications .
사용자가 버튼을 클릭하면 알림을 보낼 수 있었습니다.
그러나 그것은 일회성이며 무의미합니다. 반복 작업으로 만드는 방법을 살펴보겠습니다.

우리는 사용자가 흐름을 시작하고 매시간 메시지를 받아 자신이 훌륭하다는 것을 상기시키기를 원합니다.

이전 기사를 시작점으로 작업하겠습니다. 따라하고 싶다면 이것을 사용할 수 있습니다GitHub branch.

반복 알림 만들기

반복 알림을 받으려면 alarm 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와 periodInMinutes 옵션을 사용하여 이를 달성할 수 있습니다. 이 옵션을 설정하면 알람이 1분마다 반복됩니다. (사용하는 값으로).

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

선택적으로 delayInMinutes를 사용하여 사용자 지정 지연을 추가할 수 있습니다.

Note: When testing, you can set it to 1 minute.

그런 다음 사용자가 요청하면 알람을 중지하는 기능을 추가해야 합니다.

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

그리고 그게 다야. 이제 알람이 관리됩니다. 그러나 아직 알림이 표시되지 않습니다.

배경 스크립트가 들어오는 곳입니다.background.js 폴더 안에 public 파일을 만듭니다.

거기에서 크롬 알람에 수신기를 추가해야 합니다. 알람이 울릴 때마다 이전처럼 알림을 보내려고 합니다.

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

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나