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 ukończenie tego kroku: 20 minut. Aby zobaczyć podgląd czynności, które wykonasz w tym kroku, przeskocz na sam dół strony ↓.

Ulepsz swoją aplikację Todo dzięki przypomnieniom

Ulepsz aplikację Todo, dodając funkcje przypominające użytkownikowi, jeśli ma on otwarte zadania do wykonania, nawet gdy aplikacja jest zamknięta.

Najpierw musisz dodać sposób, aby aplikacja regularnie sprawdzała, czy masz jakieś niezakończone zadania. Aplikacja musi wyświetlać użytkownikowi wiadomość, nawet jeśli okno aplikacji Todo jest zamknięte. W tym celu chcesz dowiedzieć się, jak działają alarmy i powiadomienia w aplikacjach Chrome.

Dodaj alarmy

Użyj chrome.alarms, aby ustawić interwał pobudki. Gdy działa Chrome, detektor alarmów jest wywoływana z mniej więcej ustawionym interwałem.

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 detektor onAlarm. Na razie funkcja wywołania zwrotnego to komunikat do konsoli zawsze, gdy pojawi się zadanie 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

Do strony index.html dodaj przycisk Aktywuj alarm:

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

Teraz musisz napisać moduł obsługi zdarzeń JavaScript dla tego nowego przycisku. wycofanie z kroku 2, jedna z najczęstszych niezgodności z zasadami CSP jest spowodowana przez wbudowany kod JavaScript. W pliku index.html dodaj ten kod , aby zaimportować nowy plik alarms.js, który utworzysz w tym kroku:

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

Utwórz skrypt alarmów

W folderze js utwórz nowy plik o nazwie alarms.js.

Użyj poniższego kodu, by dodać checkAlarm(), createAlarm(), cancelAlarm() i toggleAlarm() oraz moduł obsługi zdarzeń kliknięcia, który przełącza alarm, gdy przycisk Aktywuj alarm jest kliknięto.

(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 skup się na aktywowaniu (i dezaktywacji) alarmu.

Po aktywowaniu alarmu w Konsoli powinny wyświetlić się komunikaty dziennika wydrukowane. za każdym razem, gdy „dzwoni” alarm:

Pamiętaj, że:

• Nawet gdy zamkniesz okno aplikacji Todo, alarmy będą nadal odtwarzane.
• Na platformach innych niż ChromeOS po całkowitym zamknięciu wszystkich wystąpień przeglądarki Chrome, się nie uruchamia.

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

Tworzenie alarmów

W systemie createAlarm() użyj interfejsu API chrome.alarms.create(), aby utworzyć alarm, gdy Aktywuj alarm został przełączony.

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

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

Drugi parametr to obiekt alarmInfo. Prawidłowe właściwości alarmInfo to when lub delayInMinutes i periodInMinutes. Aby zmniejszyć obciążenie komputera użytkownika, Chrome ogranicza alarmy do raz na minutę. W demonstracji używamy małych wartości (0,1 minuty) wyłącznie w celach informacyjnych.

Usuń alarmy

W systemie cancelAlarm() użyj interfejsu API chrome.alarms.clear(), aby anulować alarm, gdy Anuluj alarm został przełączony.

chrome.alarms.clear(alarmName);

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

Drugi (opcjonalny) parametr to funkcja wywołania zwrotnego, która powinna mieć 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 przycisku przełączania.

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

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

Zwrócony zostanie obiekt taki jak {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} jak widać poniżej:

Przygotuj się do następnej sekcji

Skoro zostały już ustawione alarmy do regularnego sondowania aplikacji, wykorzystaj to jako podstawę przy powiadomienia wizualne.

Dodawanie powiadomień

Zmieńmy powiadomienie o alarmie na takie, które użytkownik z łatwością zauważy. Używaj chrome.notifications, aby wyświetlić na pulpicie powiadomienie podobne do tego:

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

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 przekształć wywołanie zwrotne chrome.app.window.create() w metodę samodzielną. więc możesz go użyć ponownie:

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 detektor alarmów

Na górze pliku background.js dodaj zmienną nazwy bazy danych, która będzie używana w alarmie. detektor:

var dbName = 'todos-vanillajs';

Wartość dbName jest taka sama jak nazwa bazy danych ustawiona w wierszu 17 pliku js/app.js:

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

Utwórz powiadomienie

Zamiast zapisywać nowy alarm w Konsoli, zaktualizuj detektor onAlarm, aby zapisać alarm za pomocą chrome.storage.local.get() i wywołaj 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() sprawdzi, czy są otwarte (nieukończone) zadania do wykonania. Jeśli jest co najmniej 1 otwarta element do zrobienia, utwórz wyskakujące okienko z powiadomieniem w chrome.notifications.create().

Pierwszy parametr to jednoznacznie identyfikująca nazwa powiadomienia. Musisz ustawić identyfikator w kolejności do czyszczenia lub obsługi interakcji z tym konkretnym powiadomieniem. Jeśli identyfikator pasuje do istniejącego powiadomienie, użytkownik create() najpierw usunie to powiadomienie przed wysłaniem nowego.

Drugi parametr to obiekt NotificationOptions. Dostępnych jest wiele opcji renderowania pojawi się wyskakujące okienko z powiadomieniem. Tutaj używamy „podstawowego” powiadomienie z ikoną, tytułem i wiadomością. Do innych typów powiadomień należą obrazy, listy i wskaźniki postępu. Możesz do tego wrócić po wykonaniu kroku 3 i wypróbuj inne funkcje powiadomień.

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

function(string notificationId) {...};

Obsługa interakcji z powiadomieniami

Otwierać aplikację Todo, 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() albo tworzy nowe okno aplikacji Chrome, jeśli jeszcze nie istnieje, lub wyróżnia otwórz okno, którego identyfikator okna to main.

Uruchom gotową aplikację Todo

To już wszystko. Krok 3. Załaduj ponownie aplikację Todo, używając przypomnień.

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

• Jeśli nie masz żadnych nieukończonych zadań do wykonania, nie wyświetlają się wyskakujące okienka z powiadomieniami.
• Jeśli klikniesz powiadomienie przy zamykaniu aplikacji, aplikacja Todo otworzy się ostrość.

Rozwiązywanie problemów

Ostateczny plik background.js powinien wyglądać tak. Jeśli nie widzisz powiadomień, upewnij się, że używasz Chrome w wersji 28 lub nowszej. Jeśli powiadomienia nadal się nie wyświetlają, sprawdź komunikaty o błędach w konsoli Narzędzi deweloperskich w oknie głównym (kliknij prawym przyciskiem myszy > Zbadaj element). i stronę 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ść dalej? Przejdź do sekcji Krok 4. Otwórz linki zewnętrzne za pomocą komponentu WebView »