3단계: 알람 및 알림 추가

이 단계에서 학습할 내용은 다음과 같습니다.

• 지정된 간격으로 앱의 절전 모드를 해제하여 백그라운드 작업을 실행하는 방법
• 화면 알림을 사용하여 중요한 내용에 관심을 유도하는 방법

이 단계를 완료하는 데 필요한 예상 시간: 20분 이 단계에서 완료할 작업을 미리 보려면 이 페이지 하단으로 이동 ↓하세요.

리마인더로 Todo 앱 개선하기

사용자가 진행 중인 할 일이 있는 경우 알림을 전송하는 기능을 추가하여 Todo 앱을 개선합니다. 앱이 닫혔을 때 발생합니다.

먼저 앱이 완료되지 않은 할 일을 정기적으로 확인하는 방법을 추가해야 합니다. 다음으로 앱 Todo 앱 창이 닫혀 있더라도 사용자에게 메시지를 표시해야 합니다. 이를 위해 Chrome 앱에서 알람 및 알림이 어떻게 작동하는지 이해해야 합니다.

알람 추가

chrome.alarms를 사용하여 절전 모드 해제 간격을 설정합니다. Chrome이 실행되는 한 알람 리스너는 는 대략 설정된 간격에서 호출됩니다.

앱 권한 업데이트

manifest.json에서 "alarms" 권한을 요청합니다.

"permissions": ["storage", "alarms"],

백그라운드 스크립트 업데이트

background.js에서 onAlarm 리스너를 추가합니다. 지금은 콜백 함수가 할 일 항목이 있을 때마다 콘솔에 메시지를 보냅니다.

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});
chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
});

HTML 보기 업데이트

index.html에서 알람 활성화 버튼을 추가합니다.

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  ...
</footer>

이제 이 새 버튼을 위한 JavaScript 이벤트 핸들러를 작성해야 합니다. 2단계의 내용을 떠올려 보세요. 가장 일반적인 CSP 비준수 중 하나는 인라인 JavaScript로 인해 발생합니다. index.html에 다음을 추가합니다. 행을 사용하여 다음 단계에서 만들 새 alarms.js 파일을 가져옵니다.

  </footer>
  ...
  <script src="js/app.js"></script>
  <script src="js/alarms.js"></script>
</body>

알람 스크립트 만들기

js 폴더에 alarms.js라는 새 파일을 만듭니다.

아래 코드를 사용하여 checkAlarm(), createAlarm(), cancelAlarm(), toggleAlarm()를 추가하세요. 메서드 및 알람 활성화 버튼이 켜져 있을 때 알람을 전환하는 클릭 이벤트 핸들러 있습니다.

(function () {
  'use strict';
   var alarmName = 'remindme';
   function checkAlarm(callback) {
     chrome.alarms.getAll(function(alarms) {
       var hasAlarm = alarms.some(function(a) {
         return a.name == alarmName;
       });
       var newLabel;
       if (hasAlarm) {
         newLabel = 'Cancel alarm';
       } else {
         newLabel = 'Activate alarm';
       }
       document.getElementById('toggleAlarm').innerText = newLabel;
       if (callback) callback(hasAlarm);
     })
   }
   function createAlarm() {
     chrome.alarms.create(alarmName, {
       delayInMinutes: 0.1, periodInMinutes: 0.1});
   }
   function cancelAlarm() {
     chrome.alarms.clear(alarmName);
   }
   function doToggleAlarm() {
     checkAlarm( function(hasAlarm) {
       if (hasAlarm) {
         cancelAlarm();
       } else {
         createAlarm();
       }
       checkAlarm();
     });
   }
  $$('#toggleAlarm').addEventListener('click', doToggleAlarm);
  checkAlarm();
})();

앱을 새로고침하고 잠시 알람을 활성화 (및 비활성화)합니다.

알람이 활성화될 때마다 콘솔에 로그 메시지가 출력되어야 합니다. 알람이 울릴 때마다:

다음 사항에 유의하세요.

• Todo 앱 창을 닫아도 알람은 계속 울립니다.
• ChromeOS 이외의 플랫폼에서 Chrome 브라우저 인스턴스를 완전히 닫으면 알람이 울립니다. 트리거되지 않습니다

chrome.alarms 메서드를 사용하는 alarms.js의 일부를 하나씩 살펴보겠습니다.

알람 만들기

createAlarm()에서 chrome.alarms.create() API를 사용하여 활성화 시 알람을 만듭니다. 알람이 전환됩니다.

chrome.alarms.create(alarmName, {delayInMinutes: 0.1, periodInMinutes: 0.1});

첫 번째 매개변수는 알람의 고유한 이름을 식별하는 선택적인 문자열입니다. 예를 들면 remindme (참고: 이름으로 취소하려면 알람 이름을 설정해야 합니다.)

두 번째 매개변수는 alarmInfo 객체입니다. 유효한 alarmInfo 속성에는 when 또는 delayInMinutes, periodInMinutes 사용자 컴퓨터의 부하를 줄이기 위해 Chrome은 알람을 1분마다 한 번으로 제한합니다. 여기서는 데모용으로 작은 값 (1분의 0.1)을 사용 중입니다. 있습니다.

알람 지우기

cancelAlarm()에서 취소 시 chrome.alarms.clear() API를 사용하여 알람을 취소합니다. 알람이 전환됩니다.

chrome.alarms.clear(alarmName);

첫 번째 매개변수는 chrome.alarms.create()

두 번째 (선택사항) 매개변수는 다음 형식을 취해야 하는 콜백 함수입니다.

function(boolean wasCleared) {...};

알람 받기

checkAlarm()에서 chrome.alarms.getAll() API를 사용하여 생성된 모든 알람의 배열을 가져옵니다. 전환 버튼의 UI 상태를 업데이트합니다.

getAll()는 Alarm 객체의 배열을 전달하는 콜백 함수를 허용합니다. 포함된 콘텐츠 확인 Alarm의 경우 다음과 같이 DevTools 콘솔에서 실행 중인 알람을 검사할 수 있습니다.

chrome.alarms.getAll(function(alarms) {
  console.log(alarms);
  console.log(alarms[0]);
});

이렇게 하면 {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858}는 다음과 같습니다.

다음 섹션 준비

이제 일정한 간격으로 앱을 폴링하도록 알람이 준비되었으므로 이를 기반으로 시각적 알림

알림 추가

알람 알림을 사용자가 쉽게 알아차릴 수 있는 것으로 변경해 보겠습니다. 사용 chrome.notifications: 아래와 같은 데스크톱 알림을 표시합니다.

사용자가 알림을 클릭하면 Todo 앱 창이 표시되어야 합니다.

앱 권한 업데이트

manifest.json에서 "notifications" 권한을 요청합니다.

"permissions": ["storage", "alarms", "notifications"],

백그라운드 스크립트 업데이트

background.js에서 chrome.app.window.create() 콜백을 독립형 메서드로 리팩터링합니다. 다음과 같이 재사용할 수 있습니다.

chrome.app.runtime.onLaunched.addListener(function() {
function launch() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
}
});
chrome.app.runtime.onLaunched.addListener(launch);
...

알람 리스너 업데이트

background.js 상단에 알람에 사용되는 데이터베이스 이름의 변수를 추가합니다. 리스너:

var dbName = 'todos-vanillajs';

dbName 값은 js/app.js의 17번 줄에 설정된 데이터베이스 이름과 동일합니다.

var todo = new Todo('todos-vanillajs');

알림 만들기

단순히 콘솔에 새 알람을 기록하는 대신 onAlarm 리스너를 업데이트하여 기록이 저장되도록 합니다. chrome.storage.local.get()를 통해 데이터를 수집하고 showNotification() 메서드를 호출합니다.

chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
  chrome.storage.local.get(dbName, showNotification);
});

이 showNotification() 메서드를 background.js에 추가합니다.

function launch(){
  ...
}

function showNotification(storedData) {
  var openTodos = 0;
  if ( storedData[dbName].todos ) {
    storedData[dbName].todos.forEach(function(todo) {
      if ( !todo.completed ) {
        openTodos++;
      }
    });
  }
  if (openTodos>0) {
    // Now create the notification
    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon_128.png',
        title: 'Don\'t forget!',
        message: 'You have '+openTodos+' things to do. Wake up, dude!'
     }, function(notificationId) {});
  }
}

chrome.app.runtime.onLaunched.addListener(launch);
...

showNotification()에서 진행 중인 (미완료) 할 일 항목을 확인합니다. 열려 있는 파일이 하나 이상 있는 경우 chrome.notifications.create()를 통해 알림 팝업을 만듭니다.

첫 번째 매개변수는 고유하게 식별하는 알림 이름입니다. 순서대로 ID를 설정해야 합니다. 특정 알림과의 상호작용을 지우거나 처리할 수 있습니다. ID가 기존 create()는 새 알림을 만들기 전에 먼저 이 알림을 지웁니다.

두 번째 매개변수는 NotificationOptions 객체입니다. 많은 렌더링 옵션을 제공합니다. 알림 팝업을 표시합니다. 여기서는 '기본' 아이콘, 제목, 메시지로 알림을 표시합니다. 다른 알림 유형에는 이미지, 목록, 진행률 표시기가 있습니다. 언제든지 섹션으로 이동하여 다른 알림 기능을 실험해 보세요.

세 번째 (선택사항) 매개변수는 다음과 같은 형식을 취해야 하는 콜백 메서드입니다.

function(string notificationId) {...};

알림 상호작용 처리

사용자가 알림을 클릭하면 Todo 앱을 엽니다. background.js 끝에서 chrome.notifications.onClicked 이벤트 핸들러:

chrome.notifications.onClicked.addListener(function() {
  launch();
});

이벤트 핸들러 콜백은 launch() 메서드를 호출합니다. chrome.app.window.create(), 다음 중 하나 는 새 Chrome 앱 창이 없는 경우 창을 만들거나 현재 창에 포커스를 맞추고 창 ID가 main인 열린 창

완성된 할 일 앱 실행

3단계가 완료되었습니다. 알림을 사용하여 Todo 앱을 지금 새로고침하세요.

다음 동작이 예상대로 작동하는지 확인합니다.

• 완료되지 않은 할 일 항목이 없으면 팝업 알림이 표시되지 않습니다.
• 앱이 닫힐 때 알림을 클릭하면 할 일 앱이 열리거나 집중하세요.

문제 해결

최종 background.js 파일은 다음과 같이 표시됩니다. 알림이 표시되지 않는 경우 Chrome이 버전 28 이상인지 확인합니다. 그래도 알림이 표시되지 않으면 두 기본 창 (마우스 오른쪽 버튼 클릭 > Inspect Element)의 DevTools 콘솔에서 오류 메시지 표시 및 백그라운드 페이지 (마우스 오른쪽 버튼 클릭 > 백그라운드 페이지 검사)를 선택합니다.

추가 정보

이 단계에서 도입된 일부 API에 관한 자세한 내용은 다음을 참조하세요.

• 권한 선언 ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

다음 단계를 진행할 준비가 되셨나요? 4단계 - WebView로 외부 링크 열기 »로 이동합니다.