Schritt 3: Wecker und Benachrichtigungen hinzufügen

In diesem Schritt lernen Sie:

  • Hier erfahren Sie, wie Sie Ihre App in bestimmten Intervallen aktivieren, um Hintergrundaufgaben auszuführen.
  • Wie Sie mithilfe von Bildschirmbenachrichtigungen die Aufmerksamkeit auf etwas Wichtiges lenken.

Geschätzte Zeit für diesen Schritt: 20 Minuten Eine Vorschau der Aufgaben in diesem Schritt finden Sie auf dieser Seite ganz unten ↓.

To-do-App mit Erinnerungen optimieren

Verbessern Sie die Todo-App, indem Sie Funktionen hinzufügen, die den Nutzer daran erinnern, wenn er offene Aufgaben hat, auch wenn die App geschlossen ist.

Zuerst müssen Sie eine Möglichkeit hinzufügen, mit der die App regelmäßig nach nicht erledigten Aufgaben suchen kann. Als Nächstes muss die App dem Nutzer eine Nachricht anzeigen, auch wenn das Todo-App-Fenster geschlossen ist. Dazu müssen Sie wissen, wie Alarme und Benachrichtigungen in Chrome-Apps funktionieren.

Wecker hinzufügen

Verwenden Sie chrome.alarms, um ein Weckintervall festzulegen. Solange Chrome ausgeführt wird, wird der Alarm-Listener ungefähr im festgelegten Intervall aufgerufen.

App-Berechtigungen aktualisieren

Fordern Sie in manifest.json die Berechtigung "alarms" an:

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

Hintergrundscripts aktualisieren

Fügen Sie in background.js einen onAlarm-Listener hinzu. Vorerst protokolliert die Callback-Funktion nur eine Nachricht in der Konsole, wenn ein To-do-Element vorhanden ist:

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-Ansicht aktualisieren

Fügen Sie in der Datei index.html die Schaltfläche Alarm aktivieren hinzu:

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

Nun müssen Sie den JavaScript-Event-Handler für diese neue Schaltfläche schreiben. In Schritt 2 wird deutlich, dass einer der häufigsten Verstöße gegen die CSP durch Inline-JavaScript verursacht wird. Fügen Sie diese Zeile in der Datei index.html hinzu, um eine neue Datei alarms.js zu importieren, die Sie im folgenden Schritt erstellen:

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

Skript für Weckrufe erstellen

Erstellen Sie im Ordner js eine neue Datei mit dem Namen alarms.js.

Verwenden Sie den folgenden Code, um die Methoden checkAlarm(), createAlarm(), cancelAlarm() und toggleAlarm() sowie einen Klick-Event-Handler hinzuzufügen, um den Alarm ein- und auszuschalten, wenn auf die Schaltfläche Alarm aktivieren geklickt wird.

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

Aktualisieren Sie Ihre App und nehmen Sie sich kurz Zeit, um den Alarm zu aktivieren und zu deaktivieren.

Nachrichten auf der Hintergrundseite prüfen

Wenn der Alarm aktiviert ist, sollten jedes Mal Logmeldungen in der Konsole ausgegeben werden, wenn der Alarm „klingelt“:

Benachrichtigungen in der Konsole werden angezeigt

Sie sollten Folgendes sehen:

  • Auch wenn Sie das Fenster der To-do-App schließen, werden weiterhin Wecker gestellt.
  • Auf anderen Plattformen als ChromeOS werden keine Alarme ausgelöst, wenn Sie alle Chrome-Browserinstanzen vollständig schließen.

Sehen wir uns einige der Elemente in alarms.js an, bei denen chrome.alarms-Methoden verwendet werden.

Wecker erstellen

Verwenden Sie in createAlarm() die chrome.alarms.create() API, um einen Alarm zu erstellen, wenn Alarm aktivieren aktiviert ist.

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

Der erste Parameter ist ein optionaler String, der einen eindeutigen Namen für den Alarm angibt, z. B. remindme. (Hinweis: Du musst einen Namen festlegen, um den Wecker durch den Namen abzubrechen.)

Der zweite Parameter ist ein alarmInfo-Objekt. Gültige Properties für alarmInfo sind when, delayInMinutes und periodInMinutes. Um die Auslastung des Geräts des Nutzers zu reduzieren, begrenzt Chrome Alarme auf eine Minute pro Minute. Wir verwenden hier nur zu Demozwecken kleine Werte (0,1 einer Minute).

Wecker löschen

Verwenden Sie in cancelAlarm() die chrome.alarms.clear() API, um einen Alarm auszuschalten, wenn Wecker abbrechen aktiviert ist.

chrome.alarms.clear(alarmName);

Der erste Parameter sollte der String zur Identifizierung sein, den Sie als Alarmname in chrome.alarms.create() verwendet haben.

Der zweite (optionale) Parameter ist eine Callback-Funktion, die folgendes Format annehmen sollte:

function(boolean wasCleared) {...};

Wecker erhalten

Verwenden Sie in checkAlarm() die chrome.alarms.getAll() API, um ein Array aller erstellten Alarme abzurufen und den UI-Status der Ein-/Aus-Schaltfläche zu aktualisieren.

getAll() akzeptiert eine Callback-Funktion, die ein Array von Alarm-Objekten übergibt. Um den Inhalt eines Alarm-Objekts zu sehen, können Sie laufende Alarme in der Entwicklertools-Konsole so überprüfen:

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

Dadurch wird ein Objekt wie {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} ausgegeben, wie unten gezeigt:

Verwenden Sie getAll() , um laufende Alarme zu überprüfen.

Vorbereitungen für den nächsten Abschnitt treffen

Da Alarme nun vorhanden sind, um die App in regelmäßigen Abständen abzufragen, können Sie diese als Basis für das Hinzufügen visueller Benachrichtigungen verwenden.

Benachrichtigungen hinzufügen

Ändern wir die Alarmbenachrichtigung so, dass sie für den Nutzer leicht zu erkennen ist. Verwenden Sie chrome.notifications, um eine Desktopbenachrichtigung wie die folgende anzuzeigen:

Benachrichtigung in der Todo App

Wenn der Nutzer auf die Benachrichtigung klickt, sollte das Fenster der Todo-App zu sehen sein.

App-Berechtigungen aktualisieren

Fordern Sie in manifest.json die Berechtigung "notifications" an:

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

Hintergrundscripts aktualisieren

Refaktorieren Sie den chrome.app.window.create()-Callback in background.js in eine eigenständige Methode, damit Sie ihn wiederverwenden können:

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

Alarm-Listener aktualisieren

Fügen Sie oben in background.js eine Variable für einen Datenbanknamen hinzu, der im Alarm-Listener verwendet wird:

var dbName = 'todos-vanillajs';

Der Wert von dbName entspricht dem Datenbanknamen, der in Zeile 17 von js/app.js festgelegt ist:

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

Benachrichtigung erstellen

Anstatt einfach einen neuen Alarm in der Console zu protokollieren, aktualisieren Sie den Listener onAlarm, um gespeicherte Daten über chrome.storage.local.get() abzurufen und eine showNotification()-Methode aufzurufen:

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

Fügen Sie background.js die folgende showNotification()-Methode hinzu:

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() sucht nach offenen (nicht abgeschlossenen) Aufgaben. Ist mindestens eine Aufgabe geöffnet, erstellen Sie über chrome.notifications.create() ein Benachrichtigungs-Pop-up.

Der erste Parameter ist ein eindeutig identifizierender Benachrichtigungsname. Es muss eine ID festgelegt sein, um Interaktionen mit dieser Benachrichtigung zu löschen oder zu verarbeiten. Wenn die ID mit einer vorhandenen Benachrichtigung übereinstimmt, löscht create() zuerst diese Benachrichtigung, bevor eine neue Benachrichtigung gesendet wird.

Der zweite Parameter ist ein NotificationOptions-Objekt. Es gibt viele Optionen zum Rendern des Benachrichtigungs-Pop-ups. Hier verwenden wir eine „einfache“ Benachrichtigung mit Symbol, Titel und Nachricht. Weitere Benachrichtigungstypen sind Bilder, Listen und Fortschrittsanzeigen. Sie können gerne zu diesem Abschnitt zurückkehren, wenn Sie mit Schritt 3 fertig sind, und andere Benachrichtigungsfunktionen ausprobieren.

Der dritte (optionale) Parameter ist eine Callback-Methode, die folgendes Format annehmen sollte:

function(string notificationId) {...};

Interaktionen mit Benachrichtigungen verarbeiten

Öffne die Todo-App, wenn der Nutzer auf die Benachrichtigung klickt. Erstellen Sie am Ende von background.js einen chrome.notifications.onClicked-Event-Handler:

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

Der Event-Handler-Callback ruft einfach die Methode launch() auf. chrome.app.window.create() erstellt entweder ein neues Chrome App-Fenster, falls noch keines vorhanden ist, oder hebt das aktuell geöffnete Fenster mit der Fenster-ID main hervor.

Fertige Todo-App starten

Sie haben Schritt 3 abgeschlossen! Aktualisieren Sie jetzt Ihre Todo App mit Erinnerungen.

Prüfen Sie, ob die folgenden Verhaltensweisen wie erwartet funktionieren:

  • Wenn keine nicht erledigten Aufgaben vorhanden sind, werden keine Pop-up-Benachrichtigungen angezeigt.
  • Wenn Sie beim Schließen der App auf die Benachrichtigung klicken, wird die Todo-App geöffnet oder fokussiert.

Fehlerbehebung

Ihre endgültige Datei background.js sollte so aussehen. Wenn keine Benachrichtigungen angezeigt werden, prüfen Sie, ob Chrome 28 oder höher installiert ist. Wenn weiterhin keine Benachrichtigungen angezeigt werden, suchen Sie in der Entwicklertools-Konsole sowohl im Hauptfenster (Rechtsklick > Element untersuchen) als auch auf der Hintergrundseite (Rechtsklick > Hintergrundseite prüfen) nach Fehlermeldungen.

Weitere Informationen

Detailliertere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie unter:

Sind Sie bereit, mit dem nächsten Schritt fortzufahren? Gehen Sie zu Schritt 4 – Externe Links mit einer Webansicht öffnen »