Stap 3: Alarmen en meldingen toevoegen

In deze stap leer je:

  • Hoe u uw app met bepaalde tussenpozen kunt wekken om achtergrondtaken uit te voeren.
  • Hoe u meldingen op het scherm kunt gebruiken om de aandacht op iets belangrijks te vestigen.

Geschatte tijd om deze stap te voltooien: 20 minuten. Om een ​​voorbeeld te zien van wat u in deze stap gaat voltooien, springt u naar de onderkant van deze pagina ↓ .

Verbeter uw Todo-app met herinneringen

Verbeter de Todo-app door functionaliteit toe te voegen om de gebruiker eraan te herinneren of hij openstaande taken heeft, zelfs als de app gesloten is.

Eerst moet u een manier toevoegen waarop de app regelmatig controleert op onvoltooide taken. Vervolgens moet de app een bericht aan de gebruiker weergeven, zelfs als het Todo-app-venster gesloten is. Om dit te bereiken, moet u begrijpen hoe alarmen en meldingen werken in Chrome Apps.

Alarmen toevoegen

Gebruik chrome.alarms om een ​​wekinterval in te stellen. Zolang Chrome actief is, wordt de alarmluisteraar met ongeveer het ingestelde interval gebeld.

Update app-machtigingen

Vraag in manifest.json de toestemming "alarms" aan: 

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

Update achtergrondscripts

Voeg in background.js een onAlarm listener toe. Voorlopig logt de callback-functie alleen een bericht in de console wanneer er een todo-item is: 

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-weergave bijwerken

Voeg in index.html een knop Alarm activeren toe:

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

U moet nu de JavaScript-gebeurtenishandler voor deze nieuwe knop schrijven. Bedenk uit stap 2 dat een van de meest voorkomende gevallen van niet-naleving van CSP wordt veroorzaakt door inline JavaScript. Voeg in index.html deze regel toe om een ​​nieuw alarms.js- bestand te importeren dat u in de volgende stap gaat maken: 

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

Maak een alarmscript

Maak een nieuw bestand in uw js- map met de naam alarms.js .

Gebruik de onderstaande code om de methoden checkAlarm() , createAlarm() , cancelAlarm() en toggleAlarm() toe te voegen, samen met een klikgebeurtenishandler om het alarm in of uit te schakelen wanneer op de knop Alarm activeren wordt geklikt.

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

Laad uw app opnieuw en besteed enkele ogenblikken aan het activeren (en deactiveren) van het alarm.

Inspecteer berichten op de achtergrondpagina

Telkens wanneer u het alarm heeft geactiveerd, ziet u dat er elke keer dat het alarm afgaat, logberichten in de console worden afgedrukt:

Alarmberichten worden afgedrukt naar de console

Je zou moeten opmerken dat:

  • Zelfs als je het Todo-app-venster sluit, blijven de alarmen komen.
  • Als u op andere platforms dan ChromeOS alle Chrome-browserinstanties volledig sluit, worden er geen alarmen geactiveerd.

Laten we enkele onderdelen in alarms.js die chrome.alarms -methoden gebruiken één voor één bekijken.

Alarmen maken

Gebruik in createAlarm() de chrome.alarms.create() API om een ​​alarm te maken wanneer Alarm activeren is omgeschakeld.

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

De eerste parameter is een optionele string die een unieke naam voor uw alarm identificeert, bijvoorbeeld remindme . (Opmerking: u moet een alarmnaam instellen om deze op naam te kunnen annuleren.)

De tweede parameter is een alarmInfo object. Geldige eigenschappen voor alarmInfo zijn onder meer when of delayInMinutes en periodInMinutes . Om de belasting van de machine van de gebruiker te verminderen, beperkt Chrome alarmen tot één keer per minuut. We gebruiken hier alleen kleine waarden (0,1 minuut) voor demodoeleinden.

Alarmen wissen

Gebruik in cancelAlarm() de chrome.alarms.clear() API om een ​​alarm te annuleren wanneer Alarm annuleren is omgeschakeld.

chrome.alarms.clear(alarmName);

De eerste parameter moet de identificerende tekenreeks zijn die u hebt gebruikt als alarmnaam in chrome.alarms.create() .

De tweede (optionele) parameter is een callback-functie die het volgende formaat moet aannemen: 

function(boolean wasCleared) {...};

Ontvang alarmen

Gebruik in checkAlarm() de chrome.alarms.getAll() API om een ​​array van alle gemaakte alarmen op te halen om de UI-status van de schakelknop bij te werken.

getAll() accepteert een callback-functie die een array van Alarm objecten doorgeeft. Om te zien wat er in een Alarm staat, kunt u lopende alarmen in de DevTools Console als volgt inspecteren:

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

Hierdoor wordt een object uitgevoerd zoals {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} zoals hieronder te zien:

Gebruik getAll() om lopende alarmen te inspecteren.

Maak je klaar voor het volgende gedeelte

Nu er alarmen zijn ingesteld om de app met regelmatige tussenpozen te ondervragen, kunt u dit als basis gebruiken voor het toevoegen van visuele meldingen.

Meldingen toevoegen

Laten we de alarmmelding veranderen in iets dat de gebruiker gemakkelijk kan opmerken. Gebruik chrome.notifications om een ​​bureaubladmelding zoals hieronder weer te geven:

Onze Todo-app-melding

Wanneer de gebruiker op de melding klikt, zou het Todo-appvenster in beeld moeten komen.

Update app-machtigingen

Vraag in manifest.json de machtiging "notifications" aan: 

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

Update achtergrondscripts

In background.js refactor je de callback chrome.app.window.create() in een zelfstandige methode, zodat je deze opnieuw kunt gebruiken: 

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

Update alarmluisteraar

Voeg bovenaan background.js een variabele toe voor een databasenaam die wordt gebruikt in de alarmlistener:

var dbName = 'todos-vanillajs';

De waarde van dbName is dezelfde databasenaam die is ingesteld in regel 17 van js/app.js : 

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

Maak een melding

In plaats van simpelweg een nieuw alarm in de console te registreren, update je de onAlarm listener om opgeslagen gegevens op te halen via chrome.storage.local.get() en roep je een showNotification() -methode aan:

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

Voeg deze showNotification() -methode toe aan 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() controleert op open (onvoltooide) taken. Als er minstens één open taakitem is, maak dan een meldingspop-up via chrome.notifications.create() .

De eerste parameter is een uniek identificerende meldingsnaam. U moet een ID hebben ingesteld om interacties met die specifieke melding te kunnen wissen of af te handelen. Als de id overeenkomt met een bestaande melding, wist create() eerst die melding voordat een nieuwe melding wordt gemaakt.

De tweede parameter is een NotificationOptions object. Er zijn veel opties voor het weergeven van de meldingspop-up. Hier gebruiken we een ‘basis’-melding met een pictogram, titel en bericht. Andere typen meldingen zijn afbeeldingen, lijsten en voortgangsindicatoren. Kom gerust terug naar dit gedeelte als u klaar bent met stap 3 en experimenteer met andere meldingsfuncties.

De derde (optionele) parameter is een callback-methode die het volgende formaat moet aannemen: 

function(string notificationId) {...};

Meldingsinteracties afhandelen

Open de Todo-app wanneer de gebruiker op de melding klikt. Maak aan het einde van background.js een gebeurtenishandler chrome.notifications.onClicked :

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

De callback van de gebeurtenishandler roept eenvoudigweg de methode launch() aan. chrome.app.window.create() maakt een nieuw Chrome App-venster als dit nog niet bestaat, of brengt het momenteel geopende venster met de venster-ID main in beeld.

Start uw voltooide Todo-app

Je bent klaar Stap 3! Herlaad je Todo-app nu met herinneringen.

Controleer of dit gedrag werkt zoals verwacht:

  • Als u geen onvoltooide taken heeft, zijn er geen pop-upmeldingen.
  • Als je op de melding klikt wanneer je app is gesloten, wordt de Todo-app geopend of in beeld gebracht.

Problemen oplossen

Je uiteindelijke background.js -bestand zou er als volgt uit moeten zien. Als er geen meldingen verschijnen, controleer dan of uw Chrome versie 28 of hoger is. Als er nog steeds geen meldingen verschijnen, controleer dan op foutmeldingen in de DevTools Console in zowel het hoofdvenster ( klik met de rechtermuisknop > Element inspecteren ) als op de achtergrondpagina ( klik met de rechtermuisknop > Achtergrondpagina inspecteren ).

Voor meer informatie

Voor meer gedetailleerde informatie over enkele van de API's die in deze stap zijn geïntroduceerd, raadpleegt u:

Klaar om door te gaan naar de volgende stap? Ga naar Stap 4 - Externe links openen met een webweergave »