3. Adım: Alarm ve bildirimleri ekleyin

Bu adımda şunları öğreneceksiniz:

  • Arka plan görevlerini yürütmek için uygulamanızı belirtilen aralıklarda uyandırma.
  • Önemli konulara dikkat çekmek için ekran bildirimleri nasıl kullanılır?

Bu adımın tamamlanması için tahmini süre: 20 dakika. Bu adımda ne tamamlayacağınızı önizlemek için bu sayfanın en altına atlayın ↓.

Todo uygulamanızı hatırlatıcılarla geliştirme

Todo uygulamasını, uygulama kapalıyken bile kullanıcıya açık işleri olup olmadığını hatırlatacak işlevler ekleyerek geliştirin.

Öncelikle, uygulamanın tamamlanmamış yapılacak işleri düzenli olarak kontrol edebileceği bir yöntem eklemeniz gerekir. Ardından, Todo uygulama penceresi kapalı olsa bile uygulamanın kullanıcıya bir mesaj görüntülemesi gerekir. Bunu yapmak için alarmların ve bildirimlerin Chrome Uygulamaları'nda nasıl çalıştığını anlamanız gerekir.

Alarm ekle

Uyanma aralığı ayarlamak için chrome.alarms aracını kullanın. Chrome çalıştığı sürece, alarm dinleyici yaklaşık belirlenen aralıkta çağrılır.

Uygulama izinlerini güncelleme

manifest.json dosyasında "alarms" iznini isteyin:

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

Arka plan komut dosyalarını güncelleme

background.js dosyasında bir onAlarm işleyicisi ekleyin. Şu an için, geri çağırma işlevi her yapılacaklar öğesi olduğunda konsola yalnızca bir mesaj kaydeder:

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 görünümünü güncelleme

index.html dosyasına bir Alarmı etkinleştir düğmesi ekleyin:

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

Şimdi bu yeni düğme için JavaScript etkinlik işleyiciyi yazmanız gerekir. 2. Adım'da, en sık karşılaşılan CSP uyumsuzluklarından birinin satır içi JavaScript'ten kaynaklandığını hatırlayın. Aşağıdaki adımda oluşturacağınız yeni bir alarms.js dosyasını içe aktarmak için index.html dosyasına bu satırı ekleyin:

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

Alarm komut dosyası oluştur

js klasörünüzde alarms.js adlı yeni bir dosya oluşturun.

Alarmı etkinleştir düğmesi tıklandığında alarmı açıp kapatmak için aşağıdaki kodu kullanarak checkAlarm(), createAlarm(), cancelAlarm() ve toggleAlarm() yöntemlerinin yanı sıra bir tıklama etkinlik işleyici de ekleyebilirsiniz.

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

Uygulamanızı yeniden yükleyin ve birkaç dakika boyunca alarmı etkinleştirin (ve devre dışı bırakın).

Arka plan sayfası mesajlarını inceleme

Alarmı etkinleştirdiğinizde, alarm her "çaldığında" günlük mesajlarının Console'da yazdırıldığını görürsünüz:

Konsola yazdırılan alarm mesajları

Şunları fark edeceksiniz:

  • Todo uygulamasının penceresini kapatsanız bile alarmlar çalmaya devam eder.
  • ChromeOS dışındaki platformlarda tüm Chrome tarayıcı örneklerini tamamen kapatırsanız alarmlar tetiklenmez.

alarms.js dosyasında chrome.alarms yöntemlerini kullanan bazı parçaları tek tek ele alalım.

Alarm oluşturma

createAlarm() ürününde, Alarmı etkinleştir açma/kapatma düğmesi açık konuma getirildiğinde alarm oluşturmak için chrome.alarms.create() API'sini kullanın.

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

İlk parametre, alarmınız için benzersiz bir adı tanımlayan isteğe bağlı bir dizedir (örneğin, remindme). (Not: Bir alarmın adını kullanarak iptal etmek için alarm adı ayarlamanız gerekir.)

İkinci parametre bir alarmInfo nesnesidir. alarmInfo için geçerli özellikler arasında when veya delayInMinutes ve periodInMinutes yer alır. Chrome, kullanıcının makinesindeki yükü azaltmak amacıyla alarmları dakikada bir olacak şekilde sınırlandırır. Burada yalnızca demo amaçlı küçük değerler (dakikanın 0,1'i) kullanıyoruz.

Alarmları temizle

cancelAlarm() ürününde, Alarmı iptal et ayarı etkinleştirildiğinde alarmı iptal etmek için chrome.alarms.clear() API'sini kullanın.

chrome.alarms.clear(alarmName);

İlk parametre, chrome.alarms.create() uygulamasında alarm adı olarak kullandığınız tanımlayıcı dize olmalıdır.

İkinci (isteğe bağlı) parametre, şu biçimi alması gereken bir geri çağırma işlevidir:

function(boolean wasCleared) {...};

Alarm al

checkAlarm() ürününde, açma/kapatma düğmesinin kullanıcı arayüzü durumunu güncellemek amacıyla oluşturulan tüm alarmlardan oluşan bir dizi almak için chrome.alarms.getAll() API'yi kullanın.

getAll(), Alarm nesne dizisinde geçen bir geri çağırma işlevini kabul eder. Alarm bölümünde ne olduğunu görmek için Geliştirici Araçları Konsolu'nda çalışan alarmları şu şekilde inceleyebilirsiniz:

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

Bu, aşağıda gösterildiği gibi {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} gibi bir nesnenin çıktısını verir:

Çalışan alarmları incelemek için getAll() işlevini kullanın.

Bir sonraki bölüme hazırlanın

Artık alarmlar uygulamayı düzenli aralıklarla yoklamaya başladığına göre, görsel bildirimleri eklemek için bunu temel olarak kullanın.

Bildirim ekleme

Alarm bildirimini kullanıcının kolayca fark edebileceği bir şekilde değiştirelim. Aşağıdakine benzer bir masaüstü bildirimi göstermek için chrome.notifications simgesini kullanın:

Todo uygulaması bildirimimiz

Kullanıcı bildirimi tıkladığında Todo uygulama penceresi açılır.

Uygulama izinlerini güncelleme

manifest.json dosyasında "notifications" iznini isteyin:

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

Arka plan komut dosyalarını güncelleme

Yeniden kullanabilmeniz için background.js'de, chrome.app.window.create() geri çağırmasını bağımsız bir yöntem olarak yeniden düzenleyin:

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 dinleyiciyi güncelleme

background.js'nin üst kısmına, alarm dinleyicisinde kullanılan bir veritabanı adı için değişken ekleyin:

var dbName = 'todos-vanillajs';

dbName değeri, js/app.js dosyasının 17. satırında ayarlanan veritabanı adıyla aynıdır:

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

Bildirim oluşturma

Konsola yeni bir alarm kaydetmek yerine onAlarm işleyicisini, depolanan verileri chrome.storage.local.get() üzerinden alacak şekilde güncelleyin ve bir showNotification() yöntemini çağırın:

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

Bu showNotification() yöntemini background.js'ye ekleyin:

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(), açık (tamamlanmamış) yapılacaklar öğelerini kontrol eder. En az bir açık yapılacaklar öğesi varsa chrome.notifications.create() aracılığıyla bir bildirim pop-up'ı oluşturun.

İlk parametre, benzersiz bir şekilde tanımlayıcı bir bildirim adıdır. Söz konusu bildirimle olan etkileşimleri temizlemek veya işlemek için kimlik ayarlamanız gerekir. Kimlik mevcut bir bildirimle eşleşirse create() yeni bir bildirim oluşturmadan önce bu bildirimi siler.

İkinci parametre bir NotificationOptions nesnesidir. Bildirim pop-up'ını oluşturmak için birçok seçenek vardır. Burada simge, başlık ve mesaj içeren "temel" bir bildirim kullanıyoruz. Diğer bildirim türleri arasında resimler, listeler ve ilerleme göstergeleri bulunur. 3. Adım'ı tamamladıktan sonra bu bölüme dönüp diğer bildirim özelliklerini denemekten çekinmeyin.

Üçüncü (isteğe bağlı) parametre, biçimi alması gereken bir geri çağırma yöntemidir:

function(string notificationId) {...};

Bildirim etkileşimlerini işleme

Kullanıcı bildirimi tıkladığında Yapılacaklar uygulamasını açın. background.js'nin sonunda bir chrome.notifications.onClicked etkinlik işleyici oluşturun:

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

Etkinlik işleyici geri çağırması yalnızca launch() yöntemini çağırır. chrome.app.window.create(), zaten yoksa yeni bir Chrome Uygulaması penceresi oluşturur veya main pencere kimliğine sahip, şu anda açık olan pencereye odaklanır.

Tamamlanmış Todo uygulamanızı başlatma

3. adımı tamamladınız! Todo uygulamanızı hatırlatıcılar ile hemen yeniden yükleyin.

Aşağıdaki davranışların beklendiği gibi çalışıp çalışmadığını kontrol edin:

  • Tamamlanmamış yapılacaklar listeniz yoksa pop-up bildirimi gösterilmez.
  • Uygulamanız kapalıyken bildirimi tıklarsanız Todo uygulaması açılır veya odak haline gelir.

Sorun giderme

Son background.js dosyanız bu gibi görünmelidir. Bildirimler görünmüyorsa Chrome'unuzun 28 veya daha yeni bir sürüm olduğundan emin olun. Bildirimler hâlâ görünmüyorsa Geliştirici Araçları Konsolu'nda, hem ana pencerede (sağ tıklayın > Öğeyi Denetle) hem de arka plan sayfasında (sağ tıklama > Arka Plan Sayfasını Denetle) hata mesajı olup olmadığını kontrol edin.

Daha fazla bilgi için

Bu adımda tanıtılan API'lerden bazıları hakkında daha ayrıntılı bilgi için aşağıdaki makalelere bakın:

Bir sonraki adıma geçmeye hazır mısınız? 4. Adım - Harici bağlantıları web görünümüyle açın » bölümüne gidin