Açık Web'de Push Bildirimleri

Bir geliştirici grubuna, web'de bulunmayan mobil cihaz özelliklerini sorduğunuzda, push bildirimleri daima listenin üst sıralarında yer alır.

Push bildirimleri, kullanıcılarınızın sevdikleri sitelerden tam zamanında haberdar olmalarına olanak tanır. Ayrıca özelleştirilmiş, ilgi çekici içeriklerle kullanıcılarla yeniden etkileşime geçmelerini sağlarsınız.

Chrome sürüm 42'den itibaren Push API ve Bildirim API, geliştiriciler tarafından kullanılabilir.

Chrome'daki Push API'si, Web Uygulaması Manifest'leri ve Hizmet Çalışanları dahil birkaç farklı teknolojiden yararlanır. Bu gönderide, bu teknolojilerin her birine değineceğiz. Ancak, push mesajlaşmanın etkin ve çalışır duruma getirilmesi için yalnızca gereken minimum düzeye bakacağız. Manifestlerin diğer bazı özelliklerini ve Service Worker'ların çevrimdışı özelliklerini daha iyi anlamak için lütfen yukarıdaki bağlantılara göz atın.

Ayrıca, Chrome'un gelecekteki sürümlerinde API'ye nelerin ekleneceğini inceleyeceğiz. Son olarak, bir SSS bölümümüz olacak.

Chrome için Push Mesajlaşmasını Uygulama

Bu bölümde, web uygulamanızda push mesajı desteklemek için tamamlamanız gereken her adım açıklanmaktadır.

Hizmet çalışanı kaydedin

Web için push mesajlarını uygulayacak bir Service Worker'a sahip olma bağımlılığı vardır. Bunun nedeni, bir push mesajı alındığında tarayıcının, bir sayfa açılmadan arka planda çalışan bir Service Worker'ı başlatması ve push mesajının nasıl ele alınacağına karar verebilmeniz için bir etkinlik göndermesidir.

Aşağıda, web uygulamanıza bir hizmet çalışanının nasıl kaydedileceğine ilişkin bir örnek verilmiştir. Kayıt başarıyla tamamlandığında initialiseState() işlevini çağıracağız. Bu işleme birazdan değineceğiz.

var isPushEnabled = false;

…

window.addEventListener('load', function() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
        unsubscribe();
    } else {
        subscribe();
    }
    });

    // Check that service workers are supported, if so, progressively
    // enhance and add push messaging support, otherwise continue without it.
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(initialiseState);
    } else {
    console.warn('Service workers aren\'t supported in this browser.');
    }
});

Düğme tıklama işleyici, kullanıcının push mesajları için abone olmasını veya e-posta listesinden çıkmasını sağlar. isPushEnabled, push mesajlarının şu anda abone olup olmadığını izleyen genel bir değişkendir. Bunlara kod snippet'lerinde başvurulur.

Ardından, push mesajlarını işleme mantığına sahip service-worker.js dosyasını kaydetmeden önce hizmet çalışanlarının desteklenip desteklenmediğini kontrol ederiz. Burada, tarayıcıya sadece bu JavaScript dosyasının sitemizde hizmet çalışanı olduğunu söyleriz.

İlk Durumu Ayarlama

Service Worker kaydedildikten sonra kullanıcı arayüzümüzün durumunu ayarlamamız gerekir.

Kullanıcılar, sitenizdeki push mesajlarını etkinleştirmek veya devre dışı bırakmak için basit bir kullanıcı arayüzünden bekler ve yapılan değişikliklere ayak uydurmasını bekler. Başka bir deyişle, siteniz için push mesajlarını etkinleştiriyorlarsa, sitenizden çıkıp bir hafta sonra geri geliyorlarsa kullanıcı arayüzünüz push mesajlarının zaten etkin olduğunu vurgulayacaktır.

Bazı kullanıcı deneyimi yönergelerini bu belgede bulabilirsiniz. Bu makalede, teknik yönlerine odaklanacağız.

Bu noktada ilgilenmeniz gereken, etkin veya devre dışı olan yalnızca iki durum olduğunu düşünebilirsiniz. Bununla birlikte, bildirimlerle ilgili olarak dikkate almanız gereken bazı başka durumlar vardır.

Düğmemizi etkinleştirmeden önce kontrol etmemiz gereken birkaç API var. Her şey destekleniyorsa kullanıcı arayüzümüzü etkinleştirebilir ve push mesajının abone olup olmadığını belirtmek için ilk durumu ayarlayabiliriz.

Bu kontrollerin çoğu, kullanıcı arayüzümüzün devre dışı bırakılmasına neden olduğundan başlangıç durumunu devre dışı olarak ayarlamanız gerekir. Bu ayrıca, sayfanızın JavaScript'iyle ilgili bir sorun olduğunda (örneğin, JS dosyasının indirilemediğinde veya kullanıcı JavaScript'i devre dışı bıraktığında) karışıklığı da önler.

<button class="js-push-button" disabled>
    Enable Push Messages
</button>

Bu başlangıç durumunda, yukarıda açıklanan kontrolleri initialiseState() yöntemiyle, yani hizmet çalışanımız kaydedildikten sonra gerçekleştirebiliriz.

// Once the service worker is registered set the initial state
function initialiseState() {
    // Are Notifications supported in the service worker?
    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
    console.warn('Notifications aren\'t supported.');
    return;
    }

    // Check the current Notification permission.
    // If its denied, it's a permanent block until the
    // user changes the permission
    if (Notification.permission === 'denied') {
    console.warn('The user has blocked notifications.');
    return;
    }

    // Check if push messaging is supported
    if (!('PushManager' in window)) {
    console.warn('Push messaging isn\'t supported.');
    return;
    }

    // We need the service worker registration to check for a subscription
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    serviceWorkerRegistration.pushManager.getSubscription()
        .then(function(subscription) {
        // Enable any UI which subscribes / unsubscribes from
        // push messages.
        var pushButton = document.querySelector('.js-push-button');
        pushButton.disabled = false;

        if (!subscription) {
            // We aren't subscribed to push, so set UI
            // to allow the user to enable push
            return;
        }

        // Keep your server in sync with the latest subscriptionId
        sendSubscriptionToServer(subscription);

        // Set your UI to show they have subscribed for
        // push messages
        pushButton.textContent = 'Disable Push Messages';
        isPushEnabled = true;
        })
        .catch(function(err) {
        console.warn('Error during getSubscription()', err);
        });
    });
}

Bu adımlara kısa bir genel bakış:

• ServiceWorkerRegistration prototipinde showNotification öğesinin mevcut olduğunu kontrol ederiz. Bu olmadan, push mesajı alındığında hizmet çalışanımızdan bildirim gösteremeyiz.
• "denied" olmadığından emin olmak için mevcut Notification.permission öğesinin ne olduğunu kontrol ederiz. Reddedilen izin, kullanıcı izni tarayıcıda manuel olarak değiştirene kadar bildirimleri gösteremeyeceğiniz anlamına gelir.
• Push mesajlarının desteklenip desteklenmediğini kontrol etmek için pencere nesnesinde PushManager öğesinin mevcut olup olmadığını kontrol ederiz.
• Son olarak, halihazırda aboneliğimiz olup olmadığını kontrol etmek için pushManager.getSubscription() kullandık. Bu durumda, doğru bilgilere sahip olduğumuzdan emin olmak için abonelik ayrıntılarını sunucumuza göndeririz ve kullanıcı arayüzümüzü, push mesajının etkin olup olmadığını belirtecek şekilde ayarlarız. Bu makalenin ilerleyen kısımlarında abonelik nesnesinde hangi ayrıntıların bulunduğuna bakacağız.

Abonelik olup olmadığını kontrol etmek ve push düğmesini etkinleştirmek için navigator.serviceWorker.ready işleminin çözüme ulaştırılmasını bekleriz. Çünkü push mesajlarına abone olabilmek için hizmet çalışanı aktif olduktan sonra bu işlemi yapabilirsiniz.

Sıradaki adım, kullanıcı push mesajlarını etkinleştirmek istediğinde ele alınmasıdır. Ancak bunu yapmadan önce bir Google Developer Console projesi oluşturmamız ve eskiden Google Cloud Messaging (GCM) olarak bilinen Firebase Cloud Messaging (FCM) uygulamasını kullanmak için manifest dosyamıza bazı parametreler eklememiz gerekir.

Firebase Developer Console'da Proje Oluşturma

Chrome, push mesajlarının gönderilmesi ve teslimi için FCM'yi kullanır. Ancak FCM API'yi kullanmak için Firebase Developer Console'da bir proje oluşturmanız gerekir.

Aşağıdaki adımlar, FCM'yi kullandıkları Chrome, Android için Opera ve Samsung Tarayıcı'ya özeldir. Bu yöntemin diğer tarayıcılarda nasıl işlediğini makalenin ilerleyen bölümlerinde ele alacağız.

Yeni bir Firebase Geliştirici Projesi oluşturun

Öncelikle https://console.firebase.google.com/ adresinde "Create New Project"i tıklayarak yeni bir proje oluşturmanız gerekiyor.

Proje adı ekleyin ve projeyi oluşturun. Proje kontrol paneline yönlendirilirsiniz:

Bu kontrol panelinde sol üst köşede bulunan proje adının yanındaki dişliyi ve ardından "Proje Ayarları"nı tıklayın.

Ayarlar sayfasında "Cloud Messaging" sekmesini tıklayın.

Bu sayfada, daha sonra kullanacağımız push mesajları için API anahtarı ve bir sonraki bölümde web uygulaması manifest dosyasına koymamız gereken gönderen kimliği bulunur.

Web uygulaması manifesti ekleyin

Push aboneliğinin başarılı olması için gcm_sender_id alanına sahip bir manifest dosyası eklememiz gerekir. Bu parametre yalnızca Chrome, Android için Opera ve Samsung Tarayıcı tarafından FCM / GCM'yi kullanabilmeleri için gereklidir.

gcm_sender_id, FCM'ye sahip bir kullanıcı cihazına abone olduğunda bu tarayıcılar tarafından kullanılır. Bu, FCM'nin kullanıcının cihazını tanımlayabileceği, gönderen kimliğinizin ilgili API anahtarıyla eşleştiğinden ve kullanıcının sunucunuza push mesajları göndermesine izin verdiğinden emin olabileceği anlamına gelir.

Aşağıda çok basit bir manifest dosyası verilmiştir:

{
    "name": "Push Demo",
    "short_name": "Push Demo",
    "icons": [{
        "src": "images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
        }],
    "start_url": "/index.html?homescreen=1",
    "display": "standalone",
    "gcm_sender_id": "<Your Sender ID Here>"
}

gcm_sender_id değerini, Firebase Projenizdeki gönderen kimliğine ayarlamanız gerekir.

Manifest dosyanızı projenize kaydettikten sonra (manifest.json iyi bir addır) sayfanızın başlığına aşağıdaki etiketi ekleyerek bu dosyaya HTML'nizden referans verin.

<link rel="manifest" href="/manifest.json">

Bu parametrelerle bir web manifesti eklemezseniz kullanıcıyı mesaj aktarmaya abone olmaya çalıştığınızda "Registration failed - no sender id provided" veya "Registration failed - permission denied" hatasıyla bir istisna görürsünüz.

Push Mesajlaşma'ya abone olun

Manifest ayarlarınızı yaptığınıza göre artık sitenizin JavaScript'ine dönebilirsiniz.

Abone olmak için PushManager nesnesinde subscribe() yöntemini çağırmanız gerekir. Bu yönteme ServiceWorkerRegistration üzerinden erişebilirsiniz.

Bu işlemle, kullanıcıdan push bildirimleri göndermesi için kaynağınıza izin vermesi istenir. Bu izin olmadan başarılı bir şekilde abone olamazsınız.

subscribe() yönteminin döndürdüğü sözleşme çözümlenirse size bir uç nokta içeren PushSubscription nesnesi verilir.

Push mesajlarının daha ileri bir tarihte gönderilmesi gerekeceğinden, uç nokta her kullanıcı için sunucunuza kaydedilmelidir.

Aşağıdaki kod, kullanıcıyı push mesajlaşmaya abone yapar:

function subscribe() {
    // Disable the button so it can't be changed while
    // we process the permission request
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe()
        .then(function(subscription) {
        // The subscription was successful
        isPushEnabled = true;
        pushButton.textContent = 'Disable Push Messages';
        pushButton.disabled = false;

        // TODO: Send the subscription.endpoint to your server
        // and save it to send a push message at a later date
        return sendSubscriptionToServer(subscription);
        })
        .catch(function(e) {
        if (Notification.permission === 'denied') {
            // The user denied the notification permission which
            // means we failed to subscribe and the user will need
            // to manually change the notification permission to
            // subscribe to push messages
            console.warn('Permission for Notifications was denied');
            pushButton.disabled = true;
        } else {
            // A problem occurred with the subscription; common reasons
            // include network errors, and lacking gcm_sender_id and/or
            // gcm_user_visible_only in the manifest.
            console.error('Unable to subscribe to push.', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        }
        });
    });
}

Bu noktada web uygulamanız push mesajı almaya hazırdır ancak hizmet çalışanı dosyamıza push etkinliği işleyici eklenene kadar hiçbir şey olmayacaktır.

Hizmet Çalışanı Push Etkinliği İşleyicisi

Push mesajı alındığında (bir sonraki bölümde push mesajının nasıl gönderileceğinden bahsedeceğiz), hizmet çalışanınıza bir push etkinliği gönderilir ve bu noktada bir bildirim görüntülemeniz gerekir.

self.addEventListener('push', function(event) {
    console.log('Received a push message', event);

    var title = 'Yay a message.';
    var body = 'We have received a push message.';
    var icon = '/images/icon-192x192.png';
    var tag = 'simple-push-demo-notification-tag';

    event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
    );
});

Bu kod, bir push etkinliği işleyicisi kaydeder ve önceden tanımlanmış başlık, gövde metni, simge ve bildirim etiketi içeren bir bildirim gösterir. Bu örnekte vurgulanacak inceliklerden biri event.waitUntil() yöntemidir. Bu yöntem bir vadet gerektirir ve bir etkinlik işleyicinin ömrünü uzatır (veya hizmet çalışanına canlı tutma olarak düşünülebilir), vaat gerçekleşene kadar uzatılır. Bu durumda event.waitUntil öğesine iletilen taahhüt, showNotification() tarafından döndürülen Vaat olur.

Bildirim etiketi, benzersiz bildirimler için tanımlayıcı görevi görür. Aynı uç noktaya aralarında kısa bir gecikme olacak şekilde iki push mesajı gönderirsek ve bildirimleri aynı etiketle görüntülersek tarayıcı ilk bildirimi görüntüler ve push mesajı alındığında bunu ikinci bildirimle değiştirir.

Aynı anda birden fazla bildirim göstermek istiyorsanız farklı bir etiket kullanın veya hiç etiket kullanmamanız gerekir. Bu yayının ilerleyen kısımlarında, bir bildirimin gösterilmesiyle ilgili daha kapsamlı bir örneğe bakacağız. Şimdilik işleri basit tutalım ve push mesajı gönderirken bu bildirimin gösterilip gösterilmeyeceğini görelim.

Push Mesajı Gönderme

Push mesajlarına abone olduk ve hizmet çalışanımız bildirim göstermeye hazır. Şimdi FCM üzerinden push mesajı göndermenin zamanı geldi.

Bu yalnızca FCM'yi kullanan tarayıcılar için geçerlidir.

PushSubscription.endpoint değişkenini sunucunuza gönderdiğinizde FCM'nin uç noktası özel olur. URL'nin sonunda registration_id olan bir parametre vardır.

Örnek uç nokta şu şekildedir:

https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

FCM URL'si:

https://fcm.googleapis.com/fcm/send

registration_id şöyle olacak:

APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

Bu, FCM'yi kullanan tarayıcılara özeldir. Normal bir tarayıcıda bir uç nokta alırsınız ve bu uç noktayı standart bir şekilde çağırırsınız. Uç nokta, URL'den bağımsız olarak çalışır.

Yani, sunucunuzda uç noktanın FCM için olup olmadığını kontrol etmeniz gerekir. FCM için uygunsa record_id öğesini çıkarın. Python'da bunu yapmak için şu şekilde bir şey yapabilirsiniz:

if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
    endpointParts = endpoint.split('/')
    registrationId = endpointParts[len(endpointParts) - 1]

    endpoint = 'https://fcm.googleapis.com/fcm/send'

Kayıt kimliğini aldıktan sonra FCM API'ye çağrı yapabilirsiniz. FCM API ile ilgili referans belgeleri burada bulabilirsiniz.

FCM'yi ararken unutulmaması gereken temel noktalar şunlardır:

• API'yi çağırırken key=<YOUR_API_KEY> değerine sahip bir Yetkilendirme başlığı ayarlanmalıdır. Burada <YOUR_API_KEY>, Firebase projesinin API anahtarıdır.
  • API anahtarı, FCM tarafından uygun gönderen kimliğini bulmak, kullanıcının projeniz için izin verdiğinden emin olmak ve son olarak sunucunun IP adresinin ilgili proje için izin verilenler listesine eklendiğinden emin olmak amacıyla kullanılır.
• Verileri JSON veya form verisi olarak göndermenize bağlı olarak application/json veya application/x-www-form-urlencoded;charset=UTF-8 için uygun bir Content-Type üst bilgisi.
• registration_ids dizisi: Bunlar, kullanıcılarınızdan uç noktalardan çıkaracağınız kayıt kimlikleridir.

Sunucunuzdan push mesajları göndermeyle ilgili belgeleri inceleyin ancak hizmet çalışanınızı hızlı bir şekilde kontrol etmek için cURL kullanarak tarayıcınıza push mesajı gönderebilirsiniz.

Bu cURL komutundaki <YOUR_API_KEY> ve <YOUR_REGISTRATION_ID> değerlerini kendi komutunuzla değiştirin ve bu komutu bir terminalden çalıştırın.

Güzel bir bildirim görürsünüz:

    curl --header "Authorization: key=<YOUR_API_KEY>" --header
    "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
    "{\"registration_ids\":[\"<YOUR_REGISTRATION_ID>\"]}"

Arka uç mantığınızı geliştirirken POST gövdesinin Yetkilendirme başlığının ve biçiminin FCM uç noktasına özgü olduğunu unutmayın. Bu nedenle, uç noktanın FCM için olduğunu tespit edin ve başlığı koşullu olarak ekleyip POST gövdesini biçimlendirin. Diğer tarayıcılar için (ve gelecekte Chrome'da) Web Push Protokolü'nü uygulamanız gerekecektir.

Push API'sinin Chrome'daki mevcut uygulamasının dezavantajı, push mesajıyla veri gönderememenizdir. Yok, hiçbir şey. Bunun nedeni, gelecekteki bir uygulamada yük verilerinin, push mesajlaşma uç noktasına gönderilmeden önce sunucunuzda şifrelenmesi gerekmesidir. Bu şekilde, hangi push sağlayıcısı olursa olsun uç nokta, push mesajının içeriğini kolayca görüntüleyemez. Bu, HTTPS sertifikalarının zayıf doğrulanması ve sunucunuz ile push sağlayıcısı arasındaki ortadaki adam saldırıları gibi diğer güvenlik açıklarına karşı da koruma sağlar. Ancak bu şifreleme henüz desteklenmediğinden, bir bildirimi doldurmak için gereken bilgileri almak amacıyla getirme işlemi gerçekleştirmeniz gerekir.

Daha Eksiksiz Bir Push Etkinliği Örneği

Şu ana kadar gördüğümüz bildirim oldukça basit ve örneklere bakıldığında gerçek dünyadaki kullanım alanını kapsama konusunda oldukça kötü.

Gerçekçi bir şekilde, çoğu kişi bildirimi görüntülemeden önce sunucularından bazı bilgileri almak ister. Bu, bildirim başlığını ve mesajı belirli bir şeyle doldurmak veya bir adım daha ileri gidip bazı sayfaları ya da verileri önbelleğe almak için kullanılan veriler olabilir. Böylece, kullanıcı bildirimi tıkladığında tarayıcı açıldığında her şey anında kullanılabilir (ağ o anda kullanılabilir durumda olmasa bile).

Aşağıdaki kodda bir API'den bazı veriler getiriyoruz, yanıtı bir nesneye dönüştürüp bildirimimizi doldurmak için kullanıyoruz.

self.addEventListener('push', function(event) {
    // Since there is no payload data with the first version
    // of push messages, we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(SOME_API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        if (data.error || !data.notification) {
            console.error('The API returned an error.', data.error);
            throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
        });
    }).catch(function(err) {
        console.error('Unable to retrieve data', err);

        var title = 'An error occurred';
        var message = 'We were unable to get the information for this push message';
        var icon = URL_TO_DEFAULT_ICON;
        var notificationTag = 'notification-error';
        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
    })
    );
});

event.waitUntil() ürününün, showNotification() tarafından verilen sözle sonuçlanan bir söz aldığını bir kez daha vurgulamak isteriz. Bu sözler, etkinlik işleyicimizin eşzamansız fetch() çağrısı tamamlanana ve bildirim gösterilene kadar çıkış yapmayacağı anlamına gelir.

Hata olduğunda bile bildirim gösterdiğimizi fark edersiniz. Bunun nedeni, bildirim almadığımız takdirde Chrome'un kendi genel bildirimini göstermesidir.

Kullanıcı bir Bildirimi tıkladığında URL açma

Kullanıcı bir bildirimi tıkladığında hizmet çalışanınıza bir notificationclick etkinliği gönderilir. İşleyicinizde, bir sekmeye odaklanmak veya belirli bir URL'yi içeren bir pencereyi açmak gibi uygun işlemleri gerçekleştirebilirsiniz:

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    // Android doesn't close the notification when you click on it
    // See: http://crbug.com/463146
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(
    clients.matchAll({
        type: "window"
    })
    .then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
        return clients.openWindow('/');
        }
    })
    );
});

Bu örnek, mevcut bir aynı kaynak sekmesine odaklanarak ve aksi takdirde yeni bir sekme açarak tarayıcıyı, site kaynağının köküne açar.

Burada, Notification API ile yapabileceklerinizden bazılarına özel bir yayın bulabilirsiniz.

Kullanıcının Cihazı Aboneliğinden Çıkma

Bir kullanıcının cihazına abone oldunuz ve bu kullanıcı push mesajları alıyor. Peki bu kullanıcının aboneliğini nasıl iptal edebilirsiniz?

Kullanıcı cihazının e-posta listesinden çıkmak için gereken temel işlem, PushSubscription nesnesinde unsubscribe() yöntemini çağırmak ve uç noktayı sunucularınızdan kaldırmaktır (Böylece almayacağını bildiğiniz push iletileri göndermemiş olursunuz). Aşağıdaki kod tam olarak bunu yapar:

function unsubscribe() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // To unsubscribe from push messaging, you need get the
    // subscription object, which you can call unsubscribe() on.
    serviceWorkerRegistration.pushManager.getSubscription().then(
        function(pushSubscription) {
        // Check we have a subscription to unsubscribe
        if (!pushSubscription) {
            // No subscription object, so set the state
            // to allow the user to subscribe to push
            isPushEnabled = false;
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            return;
        }

        var subscriptionId = pushSubscription.subscriptionId;
        // TODO: Make a request to your server to remove
        // the subscriptionId from your data store so you
        // don't attempt to send them push messages anymore

        // We have a subscription, so call unsubscribe on it
        pushSubscription.unsubscribe().then(function(successful) {
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            isPushEnabled = false;
        }).catch(function(e) {
            // We failed to unsubscribe, this can lead to
            // an unusual state, so may be best to remove
            // the users data from your data store and
            // inform the user that you have done so

            console.log('Unsubscription error: ', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        });
        }).catch(function(e) {
        console.error('Error thrown while unsubscribing from push messaging.', e);
        });
    });
}

Aboneliği Güncel Tutma

Abonelikler FCM ile sunucunuz arasında senkronize olmayabilir. Sunucunuzun, FCM belgelerinde açıklandığı gibi error:NotRegistered ve canonical_id sonuçlarını arayarak FCM API gönderme POST kodunun yanıt gövdesini ayrıştırdığından emin olun.

Ayrıca aboneliklerin Service Worker ile sunucunuz arasında senkronizasyonu bozulabilir. Örneğin, başarıyla abone olduktan veya abonelikten çıktıktan sonra, kesintili bir ağ bağlantısı sunucunuzu güncellemenizi engelleyebilir veya bir kullanıcı bildirim iznini iptal edebilir. Bu da otomatik abonelikten çıkma işlemini tetikler. Bu tür durumları, serviceWorkerRegistration.pushManager.getSubscription() sonucunu düzenli olarak (ör. sayfa yüklemede) kontrol ederek ve sunucuyla senkronize ederek ele alın. Artık aboneliğiniz yoksa otomatik olarak yeniden abone olmayı ve Notification.permission == 'granted' (izin verildi) seçeneğini de kullanabilirsiniz.

sendSubscriptionToServer() bölgesinde, endpoint öğesini güncellerken başarısız ağ isteklerini nasıl ele alacağınızı göz önünde bulundurmanız gerekir. Çözümlerden biri, sunucunuzun en son ayrıntılara ihtiyaç duyup duymadığını belirlemek için çerezdeki endpoint durumunu izlemektir.

Yukarıdaki adımların tümü, Chrome 46'da push mesajlarının web'de tam olarak uygulanmasıyla sonuçlanır. İşleri kolaylaştıracak spesifik özellikler (push mesajlarını tetiklemek için standart bir API gibi) mevcuttur, ancak bu sürüm, web uygulamalarınıza hemen push mesajları oluşturmaya başlamanızı sağlar.

Web Uygulamanızda Hata Ayıklama

Push mesajlarını uygularken hatalar şu iki yerden birinde bulunur: sayfanız veya hizmet çalışanınız.

Sayfadaki hatalar, DevTools kullanılarak hata ayıklanabilir. Hizmet çalışanıyla ilgili sorunları gidermek için iki seçeneğiniz vardır:

1. chrome://inspect > Hizmet çalışanları'na gidin. Bu görünüm, halihazırda çalışan hizmet çalışanları dışında çok fazla bilgi sağlamaz.
2. chrome://serviceworker-internals adresine gidin. Buradan hizmet çalışanlarının durumunu görüntüleyebilir ve varsa hataları görebilirsiniz. Bu sayfa, Geliştirici Araçları'nda benzer bir özellik kümesine sahip olana kadar geçicidir.

Service Worker'larda yeni olan herkese verebileceğim en iyi ipuçlarından biri, "Geliştirici Araçları penceresini aç ve hata ayıklama için Service Worker başlangıcında JavaScript yürütmesini duraklat" onay kutusunu kullanmaktır. Bu onay kutusu, Service Worker'ınızın başlangıcına bir ayrılma noktası ekler ve yürütmeyi duraklatır. Böylece, Service Worker komut dosyanızı devam ettirebilir veya komut dosyanız üzerinde adım adım ilerleyebilir ve herhangi bir sorunla karşılaşıp karşılaşmadığınızı görebilirsiniz.

FCM ile hizmet çalışanınızın push etkinliği arasında bir sorun varsa Chrome'un herhangi bir şey alıp almadığını anlamanızın bir yolu olmadığından, sorunu ayıklamak için yapabileceğiniz pek bir şey yoktur. Önemli olan, sunucunuz bir API çağrısı yaptığında FCM'nin verdiği yanıtın başarılı olmasıdır. Şöyle bir şey olacak:

{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}

"success": 1 yanıtına dikkat edin. Bunun yerine bir hata görürseniz bu, FCM kayıt kimliğinde bir sorun olduğu ve push mesajının Chrome'a gönderilmediği anlamına gelir.

Android için Chrome'da hizmet çalışanlarında hata ayıklama

Şu anda Android için Chrome'da hizmet çalışanları için hata ayıklama konusunda net bir fikre sahip değilsiniz. chrome://inspect adresine gitmeniz, cihazınızı bulmanız ve hizmet çalışanınızın URL'sini içeren "Worker pid:...." adlı bir liste öğesi bulmanız gerekir.

Push Bildirimleri için Kullanıcı Deneyimi

Chrome ekibi, push bildirimleriyle ilgili kullanıcı deneyimiyle ilgili en iyi uygulamaların yanı sıra push bildirimleriyle çalışırken karşılaşılan bazı nadir durumları kapsayan bir belge hazırlamaktadır.

• Push Bildirimleri İzinleri Kullanıcı Deneyimi İçin En İyi Uygulamalar
• Push Bildirimleri İçin Uç Durumlar ve Çözümler

Chrome'da ve Açık Web'de Push Mesajlaşmanın Geleceği

Bu bölümde, bu uygulamanın bilmeniz gereken Chrome'a özgü bazı bölümleri ve diğer tarayıcı uygulamalarından nasıl farklılık gösterebileceği ile ilgili biraz ayrıntıya giriyoruz.

Web Push Protokolü ve Uç Noktalar

Push API standardının güzel yanı, uç noktayı alıp sunucunuza iletebilmeniz ve Web Push Protokolü'nü uygulayarak push mesajları gönderebilmenizdir.

Web Push Protokolü, aktarma sağlayıcılarının uygulayabileceği yeni bir standarttır ve geliştiricilerin push sağlayıcının kim olduğu konusunda endişe duymalarına gerek kalmaz. Ana fikir, bu sayede API anahtarlarına kaydolma ve FCM'de olduğu gibi özel olarak biçimlendirilmiş veriler gönderme zorunluluğunu ortadan kaldırır.

Chrome, Push API'sini uygulayan ilk tarayıcıdır ve FCM, Web Push Protokolü'nü desteklemez. Bu nedenle Chrome, gcm_sender_id ve FCM için hareketli API'yi kullanmanızı gerektirir.

Chrome'un nihai hedefi, Chrome ve FCM ile Web Aktarma Protokolü'nü kullanmaya başlamaktır.

O zamana kadar, "https://fcm.googleapis.com/fcm/send" uç noktasını tespit etmeniz ve diğer uç noktalardan ayrı olarak işlemeniz, yani yük verilerini belirli bir şekilde biçimlendirmeniz ve Yetkilendirme anahtarını eklemeniz gerekir.

Web Push Protokolü Nasıl Uygulanır?

Firefox Nightly şu anda push tabanlı olarak çalışıyor ve muhtemelen Web Push Protokolü'nü uygulayan ilk tarayıcı olacak.

SSS

Özellikler nerede?

https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/

Web varlığımın birden fazla kaynağı varsa veya hem web'de hem de yerel varlığım varsa yinelenen bildirimleri önleyebilir miyim?

Şu anda bu sorunun bir çözümü yok ancak ilerleme durumunu Chromium'dan takip edebilirsiniz.

İdeal senaryo, kullanıcı cihazı için bir tür kimliğin olması, ardından sunucu tarafında yerel uygulama ve web uygulaması abonelik kimliklerinin eşleştirilmesi ve hangisinin push mesajı gönderileceğine karar verilmesidir. Bunu ekran boyutu, cihaz modeli, oluşturulan bir anahtarı web uygulaması ve yerel uygulama arasında paylaşarak yapabilirsiniz, ancak her yaklaşımın artıları ve eksileri vardır.

Neden gcm_sender_id alanına ihtiyacım var?

Bu, Chrome, Android için Opera ve Samsung Tarayıcı'nın Firebase Cloud Messaging (FCM) API'yi kullanabilmesi için gereklidir. Amaç, standart kesinleştiğinde ve FCM bunu destekleyebildiğinde Web Aktarma Protokolü'nü kullanmaktır.

Neden Web Yuvaları veya Sunucu Tarafından Gönderilen Etkinlikler (EventSource) kullanılmıyor?

Push mesajlarını kullanmanın avantajı, sayfanız kapatılsa bile hizmet çalışanınızın uyanması ve bildirim göstermesidir. Sayfa veya tarayıcı kapatıldığında Web Sockets ve EventSource'un bağlantıları da kapatılır.

Arka planda etkinlik teslimine ihtiyacım yoksa ne yapmam gerekir?

Arka planda dağıtıma ihtiyacınız yoksa Web Yuvaları harika bir seçenektir.

Bildirimleri göstermeden push bildirimlerini (ör. sessiz arka planda push) ne zaman kullanabilirim?

Bu özelliğin ne zaman kullanılabileceği konusunda henüz bir zaman çizelgesi yoktur, ancak arka plan senkronizasyonunu uygulama niyeti vardır ve buna karar verilmese veya belirtilmese de arka plan senkronizasyonu ile sessiz push özelliğinin etkinleştirilmesi tartışılmaktadır.

Bunun için neden HTTPS gerekiyor? Geliştirme sırasında bu konudaki çalışmam nasıl yapılır?

Service Worker'lar, Service Worker komut dosyasının hedeflenen kaynaktan geldiğinden ve ortadaki adam saldırısından kaynaklanmadığından emin olmak için güvenli kaynaklara ihtiyaç duyar. Şu anda bu, canlı sitelerde HTTPS kullanılması anlamına gelir ancak localhost geliştirme sırasında çalışacaktır.

Tarayıcı desteği nasıl olur?

Chrome, kararlı sürümünü desteklerken Mozilla'nın da Firefox Nightly'de çalışması devam ediyor. Daha fazla bilgi için Push API'sini uygulama hatasını inceleyin ve Bildirim uygulamalarını buradan takip edebilirsiniz.

Bildirimi belirli bir süre sonra kaldırabilir miyim?

Şu anda bu mümkün değil ancak gösterilen bildirimlerin listesini almak için destek eklemeyi planlıyoruz. Bildirim oluşturulduktan sonra bildirim için bir süre sonu ayarlamaya yönelik bir kullanım alanınız varsa, bunun ne olduğunu öğrenmek isteriz. Bunun için lütfen yorum ekleyin, biz de Chrome ekibine ileteceğiz.

Push bildiriminin kullanıcıya gönderilmesini yalnızca belirli bir süre sonra durdurmanız gerekiyorsa ve bildirimin ne kadar süre görünür kaldığı sizin için önemli değilse FCM'nin geçerlilik süresi (ttl) parametresini kullanabilirsiniz. Buradan daha fazla bilgi edinebilirsiniz.

Chrome'da push mesajlaşmanın sınırlamaları nelerdir?

Bu yayında özetlenen birkaç sınırlama bulunmaktadır:

• Chrome'un CCM'yi bir push hizmeti olarak kullanması bir dizi özel gereksinim doğurur. Bu önerilerin gelecekte desteklenip kaldırılamayacağını görmek için birlikte çalışıyoruz.
• Push mesajı aldığınızda bildirim göstermeniz gerekir.
• Masaüstündeki Chrome'da, Chrome çalışmıyorsa push mesajlarının alınamayacağına dair uyarıda bulunulur. Bu, push mesajlarının her zaman alınacağı ChromeOS ve Android'den farklıdır.

Permissions API'yi kullanmamız gerekmez mi?

İzin API'si Chrome'da uygulanmış olsa da tüm tarayıcılarda kullanılamayabilir. Daha fazla bilgiyi buradan edinebilirsiniz.

Bir bildirimi tıkladığımda Chrome neden önceki sekmeyi açmıyor?

Bu sorun yalnızca şu anda bir hizmet çalışanı tarafından kontrol edilmeyen sayfaları etkiler. Buradan daha fazla bilgi edinebilirsiniz.

Bildirim, kullanıcının cihazının push bildirimi aldığı saatte güncel değilse ne olur?

Push mesajı aldığınızda her zaman bildirim göstermeniz gerekir. Bildirim göndermek istediğiniz ancak bu özelliğin yalnızca belirli bir süre için yararlı olduğu senaryoda, CCM'de "time_to_live" parametresini kullanabilirsiniz. Böylece, geçerlilik süresi dolarsa FCM push mesajı göndermez.

Daha fazla ayrıntıyı burada bulabilirsiniz.

10 push mesajı gönderirsem ancak cihazın yalnızca bu push mesajı almasını istersem ne olur?

FCM, aynı "daraltma_anahtarı"na sahip beklemedeki tüm iletileri yeni mesajla değiştirmesi için FCM'ye bildirmek üzere kullanabileceğiniz bir "daraltma_anahtarı" parametresine sahiptir.

Daha fazla ayrıntıyı burada bulabilirsiniz.