Schritt 3: Wecker und Benachrichtigungen hinzufügen

In diesem Schritt erfahren Sie:

  • Informationen zum Aktivieren der App in bestimmten Intervallen, um Hintergrundaufgaben auszuführen.
  • Mit Benachrichtigungen auf dem Bildschirm die Aufmerksamkeit auf etwas Wichtiges lenken

Geschätzte Dauer für diesen Schritt: 20 Minuten. Um eine Vorschau zu sehen, was Sie in diesem Schritt tun werden, springen Sie zum Ende dieser Seite ↓.

To-do-App mit Erinnerungen ergänzen

Verbessern Sie die To-do-App, indem Sie Funktionen hinzufügen, die Nutzende daran erinnern, wenn sie noch offene Aufgaben haben – auch wenn sie 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 wird die App muss dem Nutzer auch dann eine Nachricht anzeigen, wenn das Fenster der To-do-App geschlossen ist. Um dies zu erreichen, wie Wecker und Benachrichtigungen in Chrome-Apps funktionieren.

Wecker hinzufügen

Verwende chrome.alarms, um ein Aufwachintervall festzulegen. Solange Chrome ausgeführt wird, kann der Alarm-Listener wird ungefähr gemäß dem 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. Für den Moment protokolliert die Callback-Funktion nur eine Nachricht an die Konsole, wenn eine Aufgabe 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>

Jetzt müssen Sie den JavaScript-Event-Handler für diese neue Schaltfläche schreiben. Denken Sie daran, dass in Schritt 2 Einer der häufigsten Verstöße gegen die CSP-Richtlinien wird durch Inline-JavaScript verursacht. Fügen Sie in index.html Folgendes ein: Zeile, 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>

Script für Wecker erstellen

Erstellen Sie in Ihrem js-Ordner eine neue Datei namens alarms.js.

Verwenden Sie den Code unten, um checkAlarm(), createAlarm(), cancelAlarm() und toggleAlarm() hinzuzufügen sowie einen Click-Event-Handler, um den Alarm ein- oder auszuschalten, wenn die Schaltfläche Alarm aktivieren aktiviert ist. angeklickt wurde.

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

Aktualisiere deine App und warte einen Moment damit, den Alarm zu aktivieren (und zu deaktivieren).

Nachrichten auf Hintergrundseite prüfen

Wenn der Alarm aktiviert ist, sollten in der Konsole Protokollmeldungen angezeigt werden. jedes Mal, wenn der Wecker klingelt:

Alarmmeldungen werden an die Konsole ausgegeben

Beachten Sie Folgendes:

  • Auch wenn du das Fenster der To-do-App schließt, klingelt der Wecker weiter.
  • Auf anderen Plattformen als ChromeOS gilt: Wenn Sie alle Chrome-Browserinstanzen schließen, werden Alarme wird nicht ausgelöst.

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

Wecker stellen

Verwende in createAlarm() die chrome.alarms.create() API, um einen Alarm zu erstellen, wenn du Aktivieren Wecker ist eingeschaltet.

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

Der erste Parameter ist eine optionale Zeichenfolge, die einen eindeutigen Namen für Ihren Alarm identifiziert, z. B. remindme (Hinweis: Sie müssen einen Namen für den Wecker festlegen, um ihn namentlich zu löschen.)

Der zweite Parameter ist ein alarmInfo-Objekt. Gültige Eigenschaften für alarmInfo sind when oder delayInMinutes und periodInMinutes. Um die Geräte der Nutzer zu entlasten, beschränkt Alarme auf einmal pro Minute. Wir verwenden hier für Demonstrationswerte kleine Werte (0,1 einer Minute). .

Wecker löschen

Verwende in cancelAlarm() die chrome.alarms.clear() API, um einen Wecker beim Abbrechen Wecker ist eingeschaltet.

chrome.alarms.clear(alarmName);

Der erste Parameter sollte die Zeichenfolge sein, die du als Name für den Alarm verwendet hast. chrome.alarms.create()

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

function(boolean wasCleared) {...};

Wecker stellen

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

getAll() akzeptiert eine Callback-Funktion, die ein Array von Alarm-Objekten übergibt. Um zu sehen, was verfügbar ist ein Alarm, kannst du laufende Alarme in der Entwicklertools-Konsole prü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} wie unten zu sehen:

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

Mach dich bereit für den nächsten Abschnitt

Nachdem nun Alarme eingerichtet sind, mit denen die App in regelmäßigen Abständen abgefragt wird, dient dies als Grundlage für das Hinzufügen von visuelle Benachrichtigungen.

Benachrichtigungen hinzufügen

Ändern wir die Alarmbenachrichtigung in etwas, das der Benutzer leicht bemerken kann. Verwenden Sie chrome.notifications, um eine Desktopbenachrichtigung wie diese zu sehen:

Unsere Todo-App-Benachrichtigung

Wenn der Nutzer auf die Benachrichtigung klickt, sollte das Fenster der To-do-App sichtbar sein.

App-Berechtigungen aktualisieren

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

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

Hintergrundscripts aktualisieren

Refaktorieren Sie in background.js den chrome.app.window.create()-Callback in eine eigenständige Methode. um sie wiederzuverwenden:

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

Wecker-Listener aktualisieren

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

var dbName = 'todos-vanillajs';

Der Wert für dbName ist derselbe Datenbankname, 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 Konsole zu protokollieren, aktualisieren Sie den onAlarm-Listener, damit er gespeichert wird. Daten über chrome.storage.local.get() und rufen Sie eine showNotification()-Methode auf:

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

Fügen Sie background.js diese 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) To-do-Elementen. Wenn mindestens ein erstellen Sie über chrome.notifications.create() ein Pop-up-Benachrichtigungs-Pop-up.

Der erste Parameter ist ein eindeutig identifizierender Benachrichtigungsname. Sie müssen eine ID festgelegt haben, um Interaktionen mit dieser Benachrichtigung zu verarbeiten. Wenn die ID mit einer vorhandenen Benachrichtigung löschen können, löscht create() diese Benachrichtigung, bevor eine neue erstellt wird.

Der zweite Parameter ist ein NotificationOptions-Objekt. Es gibt viele Möglichkeiten, das Benachrichtigungs-Pop-up. Hier verwenden wir eine „Basic“- Benachrichtigung mit einem Symbol, einem Titel und einer Nachricht. Andere Benachrichtigungstypen sind Bilder, Listen und Fortschrittsanzeigen. Sie können jederzeit zu dieser wenn Sie mit Schritt 3 fertig sind und mit anderen Benachrichtigungsfunktionen experimentieren.

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

function(string notificationId) {...};

Umgang mit Benachrichtigungsinteraktionen

Die To-do-App öffnen, wenn der Nutzer auf die Benachrichtigung klickt. Erstellen Sie am Ende von background.js 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 ein neues Chrome App-Fenster, falls noch keines vorhanden ist, oder hebt das aktuell verwendete Fenster hervor offenes Fenster mit der Fenster-ID main

Fertige To-do-App starten

Sie haben Schritt 3 abgeschlossen. Lade deine Todo-App jetzt mit Erinnerungen neu.

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

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

Fehlerbehebung

Ihre endgültige background.js-Datei sollte so aussehen. Wenn keine Benachrichtigungen angezeigt werden, Überprüfen Sie, ob Sie die Chrome-Version 28 oder höher verwenden. Werden immer noch keine Benachrichtigungen angezeigt, überprüfe Fehlermeldungen in der Entwicklertools-Konsole im Hauptfenster (Rechtsklick > Element untersuchen) und die Hintergrundseite (Rechtsklick > Hintergrundseite prüfen).

Weitere Informationen

Ausführlichere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie hier:

Sind Sie bereit für den nächsten Schritt? Zu Schritt 4: Externe Links mit einer WebView öffnen