Шаг 3. Добавьте сигналы тревоги и уведомления

Важно! Chrome прекратит поддержку приложений Chrome на всех платформах. Браузер Chrome и Интернет-магазин Chrome продолжат поддерживать расширения. Прочтите объявление и узнайте больше о переносе вашего приложения .

Примечание. Хотите начать все сначала? Найдите код предыдущего шага в zip-архиве справочного кода в разделе «cheat_code» > «solution_for_step2» .

На этом этапе вы узнаете:

• Как разбудить ваше приложение через определенные промежутки времени для выполнения фоновых задач.
• Как использовать экранные уведомления, чтобы привлечь внимание к чему-то важному.

Примерное время выполнения этого шага: 20 минут. Чтобы просмотреть то, что вы выполните на этом этапе, прыгните вниз этой страницы ↓ .

Улучшите свое приложение Todo с помощью напоминаний

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

Во-первых, вам нужно добавить в приложение возможность регулярно проверять наличие незавершенных задач. Далее приложению необходимо отобразить сообщение пользователю, даже если окно приложения Todo закрыто. Для этого вам необходимо понимать, как работают сигналы тревоги и уведомления в приложениях Chrome.

Добавить будильники

Используйте chrome.alarms , чтобы установить интервал пробуждения. Пока Chrome работает, прослушиватель сигналов тревоги вызывается примерно с заданным интервалом.

Обновить разрешения приложения

В манифесте.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();
})();

Перезагрузите приложение и потратьте несколько минут на активацию (и деактивацию) будильника.

Примечание. Поскольку сообщения журнала отправляются на консоль через страницу событий (так называемую фоновый сценарий), вам нужно щелкнуть правой кнопкой мыши > «Проверить фоновую страницу» , чтобы просмотреть сообщения журнала:

Примечание. Также стоит продолжать использовать щелчок правой кнопкой мыши > «Проверить элемент» , чтобы убедиться в отсутствии ошибок в других файлах JavaScript.

Всякий раз, когда у вас активирован сигнал тревоги, вы должны видеть сообщения журнала, печатаемые на консоли каждый раз, когда сигнал тревоги «звонит»:

Вы должны заметить, что:

• Даже если вы закроете окно приложения Todo, будильники продолжат поступать.
• На платформах, отличных от ChromeOS, если вы полностью закроете все экземпляры браузера Chrome, сигналы тревоги не сработают.

Давайте рассмотрим некоторые части файла Alarms.js , которые используют методы chrome.alarms один за другим.

Создание сигналов тревоги

В createAlarm() используйте API chrome.alarms.create() для создания будильника, когда включена опция «Активировать будильник» .

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

Первый параметр — это необязательная строка, определяющая уникальное имя вашего будильника, например, remindme . (Примечание: вам необходимо установить имя будильника, чтобы отменить его по имени.)

Второй параметр — объект alarmInfo . Допустимые свойства для alarmInfo включают when или delayInMinutes и periodInMinutes . Чтобы снизить нагрузку на компьютер пользователя, Chrome ограничивает количество сигналов тревоги раз в минуту. Мы используем здесь небольшие значения (0,1 минуты) только в демонстрационных целях.

Очистить сигналы тревоги

В cancelAlarm() используйте API chrome.alarms.clear() для отмены будильника, когда переключатель Отменить будильник включен.

chrome.alarms.clear(alarmName);

Первым параметром должна быть идентификационная строка, которую вы использовали в качестве имени сигнала тревоги в chrome.alarms.create() .

Второй (необязательный) параметр — это функция обратного вызова, которая должна иметь формат:

function(boolean wasCleared) {...};

Получайте сигналы тревоги

В checkAlarm() используйте API chrome.alarms.getAll() , чтобы получить массив всех созданных сигналов тревоги и обновить состояние пользовательского интерфейса кнопки переключения.

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 — это то же имя базы данных, которое указано в строке 17 файла js/app.js :

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() .

Первый параметр — это уникально идентифицирующее имя уведомления. У вас должен быть установлен идентификатор, чтобы очищать или обрабатывать взаимодействия с этим конкретным уведомлением. Если идентификатор соответствует существующему уведомлению, create() сначала очищает это уведомление, прежде чем создавать новое уведомление.

Второй параметр — это объект NotificationOptions . Существует множество вариантов отображения всплывающего окна уведомления. Здесь мы используем «базовое» уведомление со значком, заголовком и сообщением. Другие типы уведомлений включают изображения, списки и индикаторы выполнения. Не стесняйтесь вернуться в этот раздел, когда вы закончите шаг 3, и поэкспериментируйте с другими функциями уведомлений.

Третий (необязательный) параметр — это метод обратного вызова, который должен иметь формат:

function(string notificationId) {...};

Обработка взаимодействия с уведомлениями

Откройте приложение Todo, когда пользователь нажмет на уведомление. В конце background.js создайте обработчик событий chrome.notifications.onClicked :

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

Обратный вызов обработчика событий просто вызывает метод launch() . chrome.app.window.create() либо создает новое окно приложения Chrome, если оно еще не существует, либо выделяет открытое в данный момент окно с идентификатором main .

Запустите готовое приложение Todo.

Вы закончили Шаг 3! Перезагрузите приложение Todo с напоминаниями.

Убедитесь, что эти поведения работают должным образом:

• Если у вас нет незавершенных задач, всплывающие уведомления не появятся.
• Если вы нажмете на уведомление, когда ваше приложение закрыто, приложение Todo откроется или перейдет в фокус.

Поиск неисправностей

Ваш окончательный файл background.js должен выглядеть следующим образом. Если уведомления не отображаются, убедитесь, что у вас Chrome версии 28 или выше. Если уведомления по-прежнему не отображаются, проверьте наличие сообщений об ошибках в консоли DevTools как в главном окне ( щелкните правой кнопкой мыши > Проверить элемент ), так и на фоновой странице ( щелкните правой кнопкой мыши > Проверить фоновую страницу ).

Для дополнительной информации

Более подробную информацию о некоторых API, представленных на этом этапе, см.:

• Объявить разрешения ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• Параметры уведомлений ↑
• chrome.notifications.onClicked ↑

Готовы перейти к следующему шагу? Перейдите к шагу 4. Открытие внешних ссылок с помощью веб-просмотра »