Açık Web'de Push Bildirimleri

Bir geliştirici grubuna, push bildirimleri her zaman listenin üst sıralarında yer alır.

Push bildirimleri, kullanıcılarınızın web sitelerinden güncellemeleri zamanında almayı tercih etmelerine olanak tanır. hem de özelleştirilmiş, ilgi çekici içeriklerle onlarla etkili bir şekilde yeniden etkileşim kurmanıza olanak tanır.

Chrome sürüm 42'den itibaren Push API ve Notification API'yi kullananlar birlikte çalışır.

Chrome'daki Push API'si, aşağıdakileri de içeren birkaç farklı teknolojiden yararlanır: Web uygulaması manifestleri ve Hizmet Çalışanları. Bu gönderide, bu teknolojilerin her birine değineceğiz, ancak ve push mesajlaşmayı çalışır duruma getirin. Projenizin bazılarını daha iyi anlamak için manifestlerin diğer özellikleri ve Service Worker'lar, lütfen yukarıdaki bağlantılara göz atın.

Ayrıca, Chrome'un gelecekteki sürümlerinde API'ye nelerin ekleneceğine bakacağız. Son olarak da SSS bölümümüze geçelim.

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

Bu bölümde, push bildirimlerini desteklemek için tamamlamanız gereken her bir adım web uygulamanızda mesajlaşma.

Hizmet çalışanı kaydedin

İşlemler için push mesajları uygulamak üzere bir hizmet çalışanının olması yardımcı olur. Bunun nedeni, bir push mesajı alındığında, tarayıcı, herhangi bir güncelleme olmadan arka planda çalışan bir hizmet çalışanı başlatabilir. ve bunu nasıl işleyeceğinize karar verebilmeniz için bir etkinlik gönderin. push mesajı

Aşağıda, web uygulamanıza Service Worker'ı nasıl kaydettiğinizle ilgili bir örnek verilmiştir. Zaman kayıt başarıyla tamamlandı. initialiseState() yöntemini çağırıyoruz. birazdan ele alacağız.

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şleyicisi, kullanıcının push iletilerine abone olmasını veya e-posta listesinden çıkmasını sağlar. isPushEnabled, yalnızca push'un yayınlanıp yayınlanmadığını izleyen genel bir değişkendir. Mesajlaşma'ya şu anda abone olup olmadıkları. Bu belgelere kod snippet'lerini ekleyin.

Ardından service-worker.js öğesini kaydetmeden önce hizmet çalışanlarının desteklenip desteklenmediğini kontrol ederiz dosyası oluşturabilirsiniz. Burada tarayıcıya, bu JavaScript dosyasının hizmet çalışanı olduğunu bildirirse bir değerlerdir.

İlk Durumu Ayarlama

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

Kullanıcılar, sitenizde push mesajlarını etkinleştirmek veya devre dışı bırakmak için basit bir kullanıcı arayüzünde ve gerçekleşen değişikliklere ayak uydurmasını bekler. Başka sitenizde push mesajlarını etkinleştirirse, sitenizden ayrıldıktan sonra bir hafta sonra kullanıcı arayüzünüzde push mesajlarının zaten etkinleştirildiği vurgulanacaktır.

Bazı kullanıcı deneyimi yönergelerini bu dokümanda bulabilirsiniz. bu makalede, işin teknik yönlerine odaklanacağız.

Bu noktada başa çıkmanız gereken yalnızca iki eyalet olduğunu düşünebilirsiniz: etkin veya devre dışı olabilir. Ancak bölgede başka eyaletler de vardır. dikkat etmeniz gereken önemli noktalardır.

Düğmemizi etkinleştirmeden önce kontrol etmemiz gereken birkaç API vardır ve Her şey destekleniyorsa kullanıcı arayüzümüzü etkinleştirebilir ve başlangıç durumunu Push mesajlaşmasının abone olup olmadığını belirtin.

Bu denetimlerin çoğu kullanıcı arayüzümüzün devre dışı bırakılmasına neden olduğundan, başlangıç durumunu devre dışı olarak ayarlayın. Bu yöntem, olası herhangi bir karışık sayfanızın JavaScript'iyle ilgili bir sorun olabilir; örneğin, JS dosyası indirilmiş veya kullanıcı JavaScript'i devre dışı bırakmışsa.

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

Bu başlangıç durumunda, yukarıda özetlenen kontrolleri initialiseState() yöntemini çağırın.

// 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ış:

• showNotification öğesinin ServiceWorkerRegistration'da mevcut olduğunu kontrol ederiz oluşturacaksınız. Bu olmadan hizmet çalışanlarımızdan gelen bir bildirimi gösteremeyiz bir push mesajı alındığında.
• Güvenli olmadığından emin olmak için mevcut Notification.permission "denied". İzin reddi, bildirimleri gösteremeyeceğiniz anlamına gelir Kullanıcı, tarayıcıda izni manuel olarak değiştirene kadar.
• Push mesajlaşmasının desteklenip desteklenmediğini kontrol etmek için PushManager öğesinin kullanılabilir hale getirebilirsiniz.
• Son olarak, kontrol etmek için pushManager.getSubscription() kullandık. abonelik ücreti olup olmadığını görebilirsiniz. Bu durumda, abonelik ayrıntılarını kontrol ederek doğru bilgilere sahip olduğumuzdan emin olun ve kullanıcı arayüzümüzü etkinleştirilip etkinleştirilmediğini kontrol edin. Hangi ayrıntıların bu makalenin ilerleyen kısımlarındaki abonelik nesnesinde yer alır.

Bir sorun olup olmadığını kontrol etmek için navigator.serviceWorker.ready adlı kullanıcının sorun çözülene kadar ve hizmet sonrası kullanılabildiğinden push düğmesini etkinleştirmek için etkin bir şekilde çalışıyor. Bu sayede push mesajlarına abone olabilirsiniz.

Bir sonraki adım, kullanıcı push mesajları etkinleştirmek istediğinde ancak Bunu yapabilmemiz için bir Google Developers Console projesi oluşturmamız gerekir. ve manifest dosyanıza bazı parametreler ekleyerek: Firebase Cloud Messaging (FCM) kullanıyorsanız (eski adıyla Google Cloud Messaging (GCM)).

Firebase Developer Console'da Proje Oluşturma

Chrome, push mesajlarının gönderilmesini ve teslimini işlemek için FCM'yi kullanır; ancak Firebase Developer Console'da bir proje oluşturmanız gerekir.

Aşağıdaki adımlar Chrome, Android için Opera ve Samsung'a özeldir FCM'yi kullandıkları tarayıcı. 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

İlk olarak https://console.firebase.google.com/ adresinde yeni bir proje oluşturmanız gerekiyor. “Yeni Proje Oluştur”u tıklayın.

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

Bu kontrol panelinin üst kısmında proje adınızın yanındaki dişliyi tıklayın sol köşeden ve 'Proje Ayarları'nı tıklayın.

Ayarlar sayfasında "Cloud Messaging"i tıklayın sekmesinden yararlanın.

Bu sayfa, daha sonra kullanacağımız, push mesajlaşmaya yönelik API anahtarını içerir. ve sonraki adımda web uygulaması manifest dosyasına eklememiz gereken gönderen kimliğini bölümüne ekleyin.

Web uygulaması manifesti ekleyin

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

gcm_sender_id bir kullanıcıya abone olduğunda bu tarayıcılar tarafından kullanılır kontrol edin. Bu, FCM'nin kullanıcının cihazını tanımlayabileceği ve Gönderen kimliğinizin ilgili API anahtarıyla eşleştiğinden ve kullanıcının sunucunuzun onlara push mesajları göndermesine izin verdiğinizi belirtir.

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 Projeniz.

Manifest dosyanızı projenize kaydettikten sonra (manifest.json iyi bir name (ad) kullanıyorsanız, sayfasını ziyaret edin.

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

Bu parametrelerle bir web manifesti eklemezseniz bir istisna alırsınız kullanıcı push mesajları için abone olmaya çalıştığınızda "Registration failed - no sender id provided" veya "Registration failed - permission denied".

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 nesnesi, Bu verilere ServiceWorkerRegistration.

Bu işlemle, kullanıcıdan push göndermek için kaynağınıza izin vermesi istenir bildirimleri etkinleştirebilirsiniz. Bu izin olmadan başarılı bir şekilde işlemi gerçekleştiremezsiniz abone ol.

Vaat geri döndüyse subscribe() yöntemi çözüldüğünde size bir PushSubscription uç nokta içeren nesne olarak kabul edilir.

Uç nokta, şunun için sunucunuza kaydedilmelidir: çünkü daha sonraki bir tarihte push mesajı göndermeleri gerekecektir.

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 bir push mesajı almaya hazırdır. hizmet çalışanı dosyamıza bir push etkinliği işleyicisi eklenene kadar olacaktır.

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

Bir push mesajı alındığında (bu sunumda, aslında bir push mesajının nasıl mesajı gösterilir), push etkinliği hizmet çalışanınıza gönderilir. Bu noktada bir bildirim görüntüleyin.

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. Bu örnekte vurgulanacak bir husus da event.waitUntil() yöntemidir. Bu yöntemde taahhütte bulunur ve bir olay işleyicinin kullanım ömrü boyunca (veya hizmeti kalıcı olarak korumak olarak düşünülebilir) işçiye yararlı olacaktır.) setled; Bu durumda, event.waitUntil adlı alıcıya iletilen taahhüt, döndürülen Vaat olur. kalkış: showNotification().

Bildirim etiketi benzersiz bildirimler için tanımlayıcı. Aynı adrese iki push mesajı göndersek arasında kısa bir gecikmeyle uç noktanızı iletir ve bildirimleri ilk bildirimi görüntülerse, tarayıcı ilk bildirimi görüntüler ve bunu push mesajı alındığında ikinci bildirim.

Aynı anda birden fazla bildirim göstermek istiyorsanız farklı bir etiket kullanın veya hiç etiket yok. Bu slaytta, ilerideki bir bildirimin gösterilmesiyle ilgili daha kapsamlı bir gönderin. Şimdilik işleri basit tutalım ve push mesajı göndermenin bu bildirime göz atın.

Push Mesajı Gönderme

Push mesajlarına abone olduk ve hizmet çalışanımız bir artık FCM aracılığıyla push mesajı gönderebilirsiniz.

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

PushSubscription.endpoint değişkenini sunucunuza gönderdiğinizde, olduğunu unutmayın. URL'nin sonunda, bir registration_id.

Ö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ırsanız bu uç noktayı standart bir şekilde URL'den bağımsız olarak çalışır.

Bu, sunucunuzda uç noktanın bağlantı noktasının kaydı FCM içindir ve bu şekildeyse register_id öğesini çıkarın. Bunu Python'da yapmak için: aşağıdaki gibi bir işlem yapabilir:

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. Siz FCM API ile ilgili referans belgeleri burada bulabilirsiniz.

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

• key=<YOUR_API_KEY> değerine sahip bir Yetkilendirme üstbilgisi API'yi çağırırken ayarlanmalıdır. Burada <YOUR_API_KEY> değeri Firebase projesinden API anahtarı.
  • API anahtarı, FCM tarafından uygun gönderen kimliğini bulmak için kullanılır. ve son olarak da kullanıcının projeniz için Sunucunun IP adresinin söz konusu proje için izin verilenler listesine eklendiğinden emin olun.
• Uygun bir Content-Type üstbilgisi application/json veya application/x-www-form-urlencoded;charset=UTF-8 veya form verisi olarak gönderebilirsiniz.
• registration_ids dizisi - bunlar, kullanacağınız kayıt kimlikleridir bu verileri kullanıcılarınızın uç noktalarından ayıklayın.

Lütfen belgeleri inceleyin. veya sunucunuzdan push iletileri gönderme hakkında Ancak Service Worker'ınızı hızlı bir şekilde kontrol etmek için cURL tarayıcınıza bir push mesajı gönderin.

<YOUR_API_KEY> ve <YOUR_REGISTRATION_ID> değerlerini değiştirin komutunuzu kullanarak bu cURL komutunu çalıştırın ve 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_REGISTRA>TION_ID\"]}"

Arka uç mantığınızı geliştirirken Yetkilendirme başlığı ve biçimi FCM uç noktasına özgüdür; bu nedenle, uç nokta, FCM içindir ve başlığı koşullu olarak ekleyip POST gövdesini biçimlendirir. Diğer tarayıcılarda (ve ileride Chrome'da) normal bir şekilde Web Push Protokolü.

Chrome'daki Push API'sinin mevcut uygulamasının dezavantajı, push mesajıyla veri gönderemezsiniz. Yok, hiçbir şey. Bunun nedeni, ileride yük verilerinin sizin tarayıcınızda şifrelenmesi gerekeceğini gönderilmeden önce bir push mesajlaşma uç noktasına gönderilir. Bu sayede uç nokta, bir push mesajının içeriğini kolayca görüntüleyemez ve push mesajı Bu, kötü amaçlı yazılım gibi diğer güvenlik açıklarına karşı da ve ortadaki adam (man-in-the-middle) saldırılarını doğruladığınızda ve push sağlayıcıyı kontrol edin. Ancak bu şifreleme henüz desteklenmediği için e-postanıza ne yapması gerektiğini anlatmak için gereken bilgileri bir bildirim doldurabilir.

Daha Eksiksiz Bir Push Etkinliği Örneği

Şu ana kadar gördüğümüz bildirim oldukça basit ve örneklere göre gerçek hayattaki kullanım alanını kapsama konusunda çok kötü.

Gerçekçi bir şekilde, çoğu kişi sunucularından bazı bilgileri almak isteyecektir. bildirimi görüntülemeden önce. Bu, belirli bir şey içeren veya bir adım daha ileri giden bildirim başlığı ve mesajı ve bazı sayfaları veya verileri önbelleğe alma, böylece kullanıcı bildirimi tıkladığında her şey anında kullanılabilir durumda olur; tarayıcı açıldığında ağı şu anda kullanılamıyor.

Aşağıdaki kodda bir API'den bazı veriler getiriyoruz. Bu yanıtı bildirimimizi doldurmak için kullanabilirsiniz.

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() için taahhütte bulunulduğunu bir kez daha hatırlatmakta fayda var. Bu durum, showNotification() tarafından döndürülen sözüyle sonuçlanır. Bu da etkinlik işleyicimizin eşzamansız fetch() çağrısı tamamlanana kadar çıkış yapmayacağını ve bildirim gösterilir.

Hata olduğunda bile bildirim gösterdiğimizi fark edersiniz. Bu çünkü almazsak Chrome kendi genel bildirimini gösterir.

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

Kullanıcı bir bildirimi tıkladığında notificationclick etkinliği gönderilir kendi hizmet çalışanınız için geçerli. İşleyici içinde uygun işlemi yapabilir, Örneğin, bir sekmeye odaklanmak veya belirli bir URL'yi içeren bir pencereyi açmak gibi

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, bir web sitesine odaklanarak tarayıcıyı site kaynağının köküne açar ve aynı kaynak sekmelerini kullanabilir ve aksi takdirde yeni bir sekme açabilirsiniz.

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. Ancak, bunu abonelikten çıkmak istiyor musunuz?

Kullanıcı cihazının aboneliğinden çıkmak için gereken temel şey, unsubscribe() yöntemi PushSubscription uç noktayı sunucularınızdan kaldırmanız gerekir (böylece, almayacağını bildiğiniz push mesajları göndermek). Aşağıdaki kod tam olarak şu:

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. Şunlardan emin olun: sunucunuz, FCM API'sinin POST göndermesinin yanıt gövdesini ayrıştırır ve FCM dokümanlarında açıklandığı şekilde error:NotRegistered ve canonical_id sonuçları.

Abonelikler, Service Worker ile sunucu. Örneğin, başarılı bir şekilde abone olduktan/abonelikten çıktıktan sonra, ağ bağlantısı sunucunuzu güncellemenizi engelleyebilir; veya kullanıcı Bildirim iznini iptal edebilir. Bu işlem, otomatik abonelikten çıkma işlemini tetikler. Herkese açık kullanıcı adı sonuçları kontrol ederek Düzenli aralıklarla serviceWorkerRegistration.pushManager.getSubscription() (ör. sırasında) ve sunucuyla senkronize etmesini kolaylaştırır. Ayrıca isterseniz aboneliğiniz yoksa otomatik olarak yeniden abone olabilirsiniz. Notification.permission == 'granted' (izin verildi).

sendSubscriptionToServer() ayında, mevcut süreçleri nasıl düzenleyeceğinizi endpoint güncellenirken başarısız ağ istekleri. Çözümlerden biri endpoint öğesinin durumunu bir çerezde izlemek için sunucunuzun en son ayrıntılara ihtiyaç duyup duymadığını belirler.

Yukarıdaki adımların tümü, push mesajlarının Chrome 46'da web'i açın. Hâlâ işleri kolaylaştıracak belirli özellikler mevcut. (push mesajlarını tetiklemek için kullanılan standart bir API gibi) ancak bu sürüm, Hemen web uygulamalarınızda push mesajlaşması oluşturmaya başlayın.

Web Uygulamanızda Hata Ayıklama

Push mesajlarını uygularken hatalar şu iki yerden birinde yayınlanır: sayfanız veya hizmet çalışanınız için geçerli olur.

Sayfadaki hatalar aşağıdaki komut dosyası kullanılarak ayıklanabilir: DevTools. Hizmet çalışanında hata ayıklamak için iki seçeneğiniz vardır:

1. chrome://inspect > adresine gidin. Hizmet çalışanları. Bu görünüm şunları sağlamaz: hizmet çalışanları dışında ek bilgi sağlar.
2. chrome://serviceworker-internals sayfasına gidin. Buradaki olup olmadığını kontrol edin ve varsa hataları görüntüleyin. Bu sayfa Geliştirici Araçları benzer bir özellik kümesine sahip olana kadar

Service Worker'larda yeni olan herkese verebileceğim en iyi ipuçlarından biri "Geliştirici Araçları penceresini aç ve JavaScript'in yürütülmesini duraklat" adlı onay kutusunun kullanılması hata ayıklama için hizmet çalışanı başlatma sırasında yürütülür." Bu onay kutusu şu noktaya bir ayrılma noktası ekler: hizmet çalışanınızın başlamasını ve yürütmeyi duraklatmanızı sağlar. hizmet çalışanı komut dosyanızda devam edin veya adım adım ilerleyin ve herhangi bir neden olabilir.

FCM ile hizmet çalışanınızın push etkinliği arasında bir sorun varsa Bu durumda, hata ayıklamak için yapabileceğiniz pek bir şey yoktur. Çünkü Chrome'un herhangi bir şey alıp almadığını görebilirsiniz. Burada dikkat edilmesi gereken en önemli nokta, sunucusu bir API çağrısı yaptığında yanıtın başarılı olduğunu gösterir. Bir Örneğin:

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

"success": 1 yanıtına dikkat edin. Bir hata görürseniz bu FCM kayıt kimliğinde ve aktarma işleminde bir yanlışlık olduğunu gösteriyorsa ileti Chrome'a gönderilmiyor.

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 gidin, cihazınızı bulun ve "Çalışan pid:...." adlı liste öğesi Burada, hizmetinizin URL'si yer alıyor. bir kontrol noktası görevi görebilir.

Push Bildirimleri için Kullanıcı Deneyimi

Chrome ekibi, en iyi uygulamaları içeren bir doküman oluşturuyor bir dokümanın yanı sıra push bildirimleriyle ilgili kullanıma sunuyoruz.

• 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, Chrome Tarayıcı'nın bir bölümü ile ilgili bu uygulamanın bilmeniz gereken bazı bölümleri ve bunların , diğer tarayıcı uygulamalarından farklı olur.

Web Push Protokolü ve Uç Noktalar

Push API standardının güzel tarafı, artık uç nokta'yı kullanıyorsanız, bunları sunucunuza iletin ve Web Push Protokolü'nü uygulayarak daha fazla mesaj alırsınız.

Web Push Protokolü, push sağlayıcıların uygulayabileceği yeni bir standarttır. Böylece geliştiricilerin push sağlayıcının kim olduğu konusunda endişe duymalarına gerek kalmaz. İlgili içeriği oluşturmak için kullanılan Bu sayede API anahtarları için kayıt yaptırma ve özel bir istek gönderme ihtiyacı ortadan kalkar. (FCM'de olduğu gibi biçimlendirilmiş veriler)

Chrome, Push API'sini uygulayan ilk tarayıcıydı ve FCM, Web Push Protokolü'nü destekler. Bu nedenle, Chrome'un gcm_sender_id ve FCM için hareketli API'yi kullanmanız gerekir.

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

O zamana kadar uç noktayı algılamanız gerekir "https://fcm.googleapis.com/fcm/send" ve diğer uç noktalardan ayrı olarak işleyebilir, yani yük verilerini izin verin ve Yetkilendirme anahtarını ekleyin.

Web Push Protokolü Nasıl Uygulanır?

Firefox Nightly şu anda push özellikli olarak çalışıyor ve muhtemelen ilk tarayıcı olacak web push protokolü uygulamak için kullanılır.

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 senaryoda, kullanıcının cihazına ait bir tür kimliğin olması gerekir. yerel uygulama ve web uygulaması abonelik kimliklerinin yanı sıra hangisine push mesajı gönderileceğine karar verir. Bunun için ekran boyutu, oluşturulan bir anahtarı web uygulaması ile yerel uygulama arasında paylaştırırken ve yaklaşımın artıları ve eksileri var.

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 kullanın. Hedef, Standart kesinleştiğinde ve FCM tarafından desteklenebileceğinde Web Push Protokolü'nü gönderin.

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

Push mesajlarını kullanmanın avantajı, sayfanız kapalı olsa bile hizmet çalışanı uyandırılır ve bildirim gösterebilir. Web Yuvaları ve EventSource'un bağlantısı sayfa veya tarayıcı kapatıldığında 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ıma sunulacağına dair kesin bir tarih yok ancak şu an için arka plan senkronizasyonu uygulama niyeti Karar verilmemiş veya herhangi bir spesifikasyon sunulmamış olsa da, arka plan senkronizasyonu ile sessiz itme.

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

Service Worker'lar, hizmet çalışanı komut dosyasının sağlandığından emin olmak için güvenli kaynaklar gerektirir kastedilen kaynaktır ve ortadaki adamdan gelmemiştir anlamına gelir. Şu anda bu, canlı sitelerde HTTPS kullanılması anlamına gelir ancak localhost nasıl yardımcı olabileceğini açıklayacaksınız.

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ına bakın Ayrıca, bildirimlerin uygulanma durumunu buradan takip edebilirsiniz.

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

Şu an için bu mümkün değil ancak daha kapsamlı bir geri bildirim alabilmek için o anda görünür olan bildirimlerin listesi. Belirli bir ürün grubu için bildiriminin süresinin dolduğunu Dolayısıyla, lütfen bir yorum ekleyin ve Chrome ekibine ileteceğiz.

Yalnızca kullanıcıya bir push bildirimi gönderilmesini durdurmanız gerekiyorsa belirli bir süre geçtikten sonra ne kadar süre boyunca görünürse FCM'nin geçerlilik süresi (ttl) parametresini kullanabilirsiniz. daha fazla bilgi edinin.

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ı, gereksinimlerini karşılayın. Bu çabaların kaldırılabileceğini görmek için birlikte çalışıyoruz sahip olacaksınız.
• Push mesajı aldığınızda bildirim göstermeniz gerekir.
• Masaüstündeki Chrome'da, Chrome çalışmıyorsa push mesajlarının sonuç alınmaz. Bu, push mesajların bulunduğu ChromeOS ve Android'den farklıdır her zaman alınır.

Permissions API'yi kullanmamız gerekmez mi?

İlgili içeriği oluşturmak için kullanılan İzin API'si ancak tüm tarayıcılarda kullanılabilir olmayabilir. 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 tarafından kontrol edilmeyen sayfaları etkiliyor bir kontrol noktası görevi görebilir. 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 seçeneği kullanmak istediğiniz senaryoda belirli bir süre için “time_to_live” CCM'deki parametre Böylece, son kullanım tarihini geçerse 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'de bir "daraltma_anahtarı" bulunur parametre, FCM'ye beklemede olan tüm etiketleri yeni iletiyle birlikte aynı "daraltma_anahtarı"na sahip olan iletidir.

Daha fazla ayrıntıyı burada bulabilirsiniz.