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).
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:
Ş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:
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:
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:
- İzin Bildirme ↑
- chrome.alarms ↑
- chrome.alarms.onAlarm ↑
- chrome.alarms.create() ↑
- chrome.alarms.clear() ↑
- chrome.alarms.getAll() ↑
- chrome.notifications ↑
- chrome.notifications.create() ↑
- NotificationOptions ↑
- chrome.notifications.onClicked ↑
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