Krok 3. Dodaj alarmy i powiadomienia

W tym kroku poznasz:

• Jak wybudzać aplikację w określonych odstępach czasu, aby wykonywać zadania w tle.
• Jak używać powiadomień na ekranie, aby zwrócić uwagę na coś ważnego.

Szacowany czas potrzebny na wykonanie tego kroku: 20 minut. Aby zobaczyć, co wykonasz w tym kroku, przejdź na sam dół strony ↓.

Ulepsz swoją aplikację Todo dzięki przypomnieniom

Ulepsz aplikację Dodo

Najpierw musisz dodać do aplikacji funkcję regularnego sprawdzania, czy nie ma jeszcze nieukończonych zadań. Następnie aplikacja musi wyświetlić użytkownikowi komunikat nawet wtedy, gdy okno aplikacji Do zrobienia jest zamknięte. Aby to zrobić, musisz zrozumieć, jak działają alarmy i powiadomienia w aplikacjach Chrome.

Dodaj alarmy

Użyj chrome.alarms, aby ustawić interwał pobudek. Gdy działa Chrome, detektor alarmów jest wywoływany z mniej więcej ustawionymi odstępami czasu.

Aktualizowanie uprawnień aplikacji

W pliku manifest.json poproś o uprawnienie "alarms":

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

Zaktualizuj skrypty działające w tle

W pliku background.js dodaj odbiornik onAlarm. Na razie funkcja wywołania zwrotnego rejestruje wiadomość w konsoli za każdym razem, gdy pojawi się element do wykonania:

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);
});

Aktualizacja widoku HTML

Na stronie index.html dodaj przycisk Aktywuj alarm:

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

Musisz teraz napisać moduł obsługi zdarzeń JavaScript dla tego nowego przycisku. Przypomnijmy w kroku 2, że jedną z najczęstszych niezgodności w usługach dla dostawców CSP jest wbudowany kod JavaScript. W pliku index.html dodaj ten wiersz, aby zaimportować nowy plik alarms.js, który utworzysz w następnym kroku:

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

Utwórz skrypt alarmów

Utwórz w folderze js nowy plik o nazwie alarms.js.

Użyj podanego niżej kodu, by dodać metody checkAlarm(), createAlarm(), cancelAlarm() i toggleAlarm() oraz moduł obsługi zdarzeń kliknięcia, aby przełączać alarm po kliknięciu przycisku Aktywuj alarm.

(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();
})();

Załaduj ponownie aplikację i poświęć chwilę na aktywowanie (i dezaktywowanie) alarmu.

Po włączeniu alarmu w konsoli powinny być wyświetlane komunikaty dziennika za każdym razem, gdy alarm się włączy:

Zwróć uwagę na te kwestie:

• Nawet wtedy, gdy zamkniesz okno aplikacji Dodo, alarmy będą dzwoniły.
• Na platformach innych niż ChromeOS, jeśli całkowicie zamkniesz wszystkie instancje przeglądarki Chrome, alarmy nie będą się uruchamiać.

Przyjrzyjmy się poszczególnym elementom w pliku alarms.js, które korzystają z metod chrome.alarms.

Utwórz alarmy

W createAlarm() użyj interfejsu chrome.alarms.create() API, aby utworzyć alarm, gdy włączona jest opcja Aktywuj alarm.

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

Pierwszy parametr to opcjonalny ciąg znaków identyfikujący niepowtarzalną nazwę alarmu, np. remindme. (Uwaga: aby anulować nazwę alarmu, musisz podać jego nazwę).

Drugi parametr to obiekt alarmInfo. Prawidłowe właściwości alarmInfo to when, delayInMinutes i periodInMinutes. Aby zmniejszyć obciążenie komputera użytkownika, Chrome ogranicza alarmy do co minutę. Używamy tu małych wartości (0,1 minuty) tylko do celów demonstracyjnych.

Usuń alarmy

W cancelAlarm() użyj interfejsu chrome.alarms.clear() API, aby anulować alarm, gdy jest włączona opcja Anuluj alarm.

chrome.alarms.clear(alarmName);

Pierwszym parametrem powinien być ciąg identyfikujący nazwę użyty jako nazwa alarmu w chrome.alarms.create().

Drugi (opcjonalny) parametr to funkcja wywołania zwrotnego, która powinna przyjąć format:

function(boolean wasCleared) {...};

Otrzymuj alarmy

W checkAlarm() użyj interfejsu API chrome.alarms.getAll(), aby uzyskać tablicę wszystkich utworzonych alarmów, aby zaktualizować stan interfejsu użytkownika przycisku przełączania.

getAll() akceptuje funkcję wywołania zwrotnego, która jest przekazywana w tablicy obiektów Alarm. Aby zobaczyć, co zawiera Alarm, możesz sprawdzić uruchamianie alarmów w konsoli Narzędzi deweloperskich w ten sposób:

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

Spowoduje to wygenerowanie obiektu {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858}, jak widać poniżej:

Przygotuj się do następnej sekcji

Wprowadziliśmy alarmy, które w regularnych odstępach czasu odpytują aplikację, więc użyj tej funkcji jako podstawy do dodawania powiadomień wizualnych.

Dodawanie powiadomień

Zmieńmy powiadomienie o alarmie na takie, które użytkownik będzie mógł łatwo zauważyć. Użyj chrome.notifications, aby wyświetlić na pulpicie powiadomienie takie jak to:

Gdy użytkownik kliknie powiadomienie, powinno wyświetlić się okno aplikacji Do zrobienia.

Aktualizowanie uprawnień aplikacji

W pliku manifest.json poproś o uprawnienie "notifications":

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

Zaktualizuj skrypty działające w tle

W pliku background.js zmień wywołanie zwrotne chrome.app.window.create() na niezależną metodę, aby móc jej ponownie używać:

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

Zaktualizuj odbiornik alarmów

Na górze pliku background.js dodaj zmienną nazwy bazy danych używanej przez odbiornik:

var dbName = 'todos-vanillajs';

Wartość dbName to ta sama nazwa bazy danych ustawiona w wierszu 17 w pliku js/app.js:

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

Tworzenie powiadomienia

Zamiast rejestrować w konsoli nowy alarm, zaktualizuj odbiornik onAlarm, aby pobrać zapisane dane przez chrome.storage.local.get() i wywołać metodę showNotification():

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

Dodaj tę metodę showNotification() do pliku 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);
...

Aplikacja showNotification() będzie sprawdzać, czy są jakieś otwarte (nieukończone) zadania do wykonania. Jeśli masz co najmniej 1 otwarty element do wykonania, utwórz wyskakujące okienko z powiadomieniem, korzystając z chrome.notifications.create().

Pierwszy parametr to jednoznacznie identyfikująca nazwa powiadomienia. Aby wyczyścić dane powiadomienie lub obsługiwać ich interakcje z nim, musisz mieć ustawiony identyfikator. Jeśli identyfikator pasuje do istniejącego powiadomienia, create() najpierw usuwa je przed utworzeniem nowego powiadomienia.

Drugi parametr jest obiektem NotificationOptions. Wyskakujące okienko z powiadomieniem ma wiele opcji. Tutaj używamy „podstawowego” powiadomienia z ikoną, tytułem i komunikatem. Inne typy powiadomień to między innymi obrazy, listy i wskaźniki postępu. Możesz wrócić do tej sekcji, gdy ukończysz krok 3 i poeksperymentować z innymi funkcjami powiadomień.

Trzeci (opcjonalny) parametr to metoda wywołania zwrotnego, która powinna mieć następujący format:

function(string notificationId) {...};

Obsługa interakcji z powiadomieniami

Otwórz aplikację Do zrobienia, gdy użytkownik kliknie powiadomienie. Na końcu pliku background.js utwórz moduł obsługi zdarzeń chrome.notifications.onClicked:

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

Wywołanie zwrotne modułu obsługi zdarzeń wywołuje po prostu metodę launch(). chrome.app.window.create() tworzy nowe okno aplikacji Chrome, jeśli jeszcze nie istnieje, lub przenosi zaznaczenie na aktualnie otwarte okno o identyfikatorze okna main.

Uruchamianie gotowej aplikacji Todo

Krok 3 został ukończony. Załaduj ponownie aplikację Do zrobienia, korzystając z przypomnień.

Sprawdź, czy te działania działają zgodnie z oczekiwaniami:

• Jeśli nie masz żadnych nieukończonych zadań, wyskakujące powiadomienia nie są wyświetlane.
• Jeśli klikniesz powiadomienie, gdy aplikacja jest zamknięta, otworzy się lub stanie się fokusem.

Rozwiązywanie problemów

Ostateczny plik background.js powinien wyglądać tak. Jeśli nie widzisz powiadomień, sprawdź, czy używasz Chrome w wersji 28 lub nowszej. Jeśli powiadomienia nadal nie są widoczne, sprawdź, czy w konsoli Narzędzi deweloperskich nie ma komunikatów o błędach zarówno w oknie głównym (kliknij prawym przyciskiem myszy > Zbadaj element) i na stronie w tle (kliknij prawym przyciskiem myszy i wybierz Sprawdź stronę w tle).

Więcej informacji

Szczegółowe informacje o niektórych interfejsach API wprowadzonych w tym kroku znajdziesz tutaj:

• Deklarowanie uprawnień ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

Chcesz przejść do następnego kroku? Przejdź do Kroku 4. Otwieranie linków zewnętrznych w komponencie WebView