Powiadomienia push w otwartej sieci

Jeśli zapytasz kogoś z deweloperów, jakich funkcji na urządzeniach mobilnych brakuje w internecie, powiadomienia push są zawsze wysoko na liście.

Powiadomienia push umożliwiają użytkownikom wyrażenie zgody na otrzymywanie aktualnych informacji z witryn, i docierać do nich, aby skutecznie ich ponownie zaangażować dzięki dostosowanym, ciekawym treściom.

Od wersji Chrome 42 API Push oraz Interfejs API powiadomień jest dostępny dla: dla programistów.

Interfejs Push API w Chrome opiera się na kilku różnych technologiach, takich jak Pliki manifestu aplikacji internetowej i Service Workers. W tym poście przyjrzymy się każdej z tych technologii, ale tylko absolutne minimum aby zacząć wysyłać wiadomości push. Aby lepiej zrozumieć niektóre inne funkcje plików manifestu i możliwości offline skryptów service worker, znajdziesz w linkach powyżej.

Zobaczymy również, co zostanie dodane do interfejsu API w przyszłych wersjach Chrome, a w końcu – odpowiedzi na najczęstsze pytania.

Wdrażanie komunikatów push w Chrome

W tej sekcji opisujemy każdy krok, który musisz wykonać, aby obsługiwać powiadomienia push. w aplikacji internetowej.

Rejestrowanie skryptu Service Worker

Implementacja wiadomości push wymaga zastosowania mechanizmu Service Worker w sieci. Dzieje się tak dlatego, że po otrzymaniu wiadomości push może uruchomić skrypt service worker, który działa w tle bez i wysłać zdarzenie, aby zdecydować, jak obsłużyć komunikat push.

Poniżej znajduje się przykład rejestrowania skryptu service worker w aplikacji internetowej. Kiedy rejestracja została zakończona pomyślnie, wywołujemy funkcję initialiseState(), która które omówimy za chwilę.

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

Moduł obsługi kliknięć przycisku umożliwia subskrybowanie wiadomości push lub anulowanie subskrypcji użytkownika. isPushEnabled to zmienna globalna, która po prostu śledzi, czy push Wiadomości są obecnie subskrybowane bądź nie. Odniesienia do nich fragmenty kodu.

Następnie sprawdzamy, czy mechanizmy Service Worker są obsługiwane, zanim zarejestrujesz service-worker.js. który zawiera logikę do obsługi wiadomości push. Oto po prostu informują przeglądarkę, że ten plik JavaScript jest skryptem service worker dla naszej witryny.

Konfigurowanie stanu początkowego

Gdy skrypt service worker zostanie zarejestrowany, musimy skonfigurować stan naszego interfejsu użytkownika.

Użytkownicy oczekują prostego interfejsu, który umożliwia włączenie lub wyłączenie wiadomości push w witrynie, i oczekują, że będzie na bieżąco ze wszystkimi zmianami. W innym Jeśli pozwalają na wysyłanie wiadomości push do witryny, opuść i wróć tydzień później interfejs powinien pokazywać, że wiadomości push są już włączone.

Wskazówki dotyczące UX znajdziesz w tym dokumencie, W tym artykule skoncentrujemy się na aspektach technicznych.

W tym momencie można by pomyśleć, że są tylko 2 stany, którymi należy się zająć, włączone lub wyłączone. Istnieją jednak inne stany które musisz wziąć pod uwagę.

Istnieje wiele interfejsów API, które musimy sprawdzić przed włączeniem tego przycisku. jeśli wszystko jest obsługiwane, możemy włączyć interfejs i ustawić stan początkowy na wskazuje, czy jest subskrybowany.

Większość z tych kontroli kończy się wyłączeniem naszego interfejsu, więc ustaw stan początkowy na wyłączony. Pozwoli to także uniknąć nieporozumień, problemów ze skryptem JavaScript. Na przykład plik JS nie może być został pobrany lub użytkownik wyłączył JavaScript.

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

W tym stanie początkowym możemy przeprowadzać testy opisane powyżej initialiseState(), np. po zarejestrowaniu skryptu service worker.

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

Krótkie omówienie tych kroków:

• Sprawdzamy, czy uprawnienie showNotification jest dostępne w usłudze ServiceWorkerRegistration i prototypem. Bez niego nie będziemy mogli wyświetlić powiadomienia od naszego pracownika obsługi klienta po odebraniu wiadomości push.
• Sprawdzamy bieżącą wartość Notification.permission, aby się upewnić, że nie jest "denied" Odmowa dostępu oznacza, że nie możesz wyświetlać powiadomień. dopóki użytkownik ręcznie nie zmieni uprawnień w przeglądarce.
• Aby sprawdzić, czy obsługujemy wiadomości push, sprawdzamy, czy PushManager to dostępnej w obiekcie window.
• Na koniec użyliśmy narzędzia pushManager.getSubscription(), aby sprawdzić, czy którzy mają subskrypcję. W takim przypadku szczegóły subskrypcji wysyłamy do serwera, by mieć pewność, że mamy właściwe informacje, i ustawić w interfejsie użytkownika czy usługa przesyłania wiadomości push jest już włączona. Przyjrzymy się temu, są dostępne w obiekcie subskrypcji w dalszej części tego artykułu.

Czekamy, aż navigator.serviceWorker.ready zostanie rozwiązany, i sprawdzamy, czy aby włączyć subskrypcję i włączyć przycisk push, ponieważ jest on wyświetlany po usłudze Moduł roboczy jest aktywny, więc możesz subskrybować wiadomości push.

Następny krok polega na obsłudze sytuacji, gdy użytkownik chce włączyć wiadomości push, Zanim to będzie możliwe, musimy skonfigurować projekt w Google Developer Console. i dodanie kilku parametrów do pliku manifestu korzystasz z Komunikacji w chmurze Firebase (FCM), wcześniej znanej jako Google Cloud Messaging (GCM).

Tworzenie projektu w konsoli programisty Firebase

Chrome używa FCM do obsługi wysyłania i dostarczania wiadomości push. jednak, aby korzystasz z interfejsu FCM API, musisz skonfigurować projekt w konsoli programisty Firebase.

Te kroki dotyczą tylko przeglądarek Chrome, Opera na Androida i Samsunga Przeglądarka, której używają FCM. W dalszej części artykułu omówimy działanie tej funkcji w innych przeglądarkach.

Utwórz nowy projekt Firebase Developer

Na początek utwórz nowy projekt na stronie https://console.firebase.google.com/. kliknij „Utwórz nowy projekt”.

Aby przejść do projektu, dodaj jego nazwę i utwórz projekt panel:

W tym panelu kliknij ikonę koła zębatego u góry obok nazwy projektu. w lewym górnym rogu i kliknij „Ustawienia projektu”.

Na stronie ustawień kliknij „Komunikacja w chmurze”. .

Ta strona zawiera klucz interfejsu API na potrzeby przesyłania wiadomości, którego użyjemy później i identyfikator nadawcy, który musimy umieścić w pliku manifestu aplikacji internetowej w .

Dodaj plik manifestu aplikacji internetowej

W przypadku push musimy dodać plik manifestu z polem gcm_sender_id. aby subskrypcja push odniosła sukces. Ten parametr jest wymagany tylko przez Chrome, Opera na Androida i przeglądarki Samsung, aby mogli korzystać z FCM / GCM.

Te przeglądarki używają parametru gcm_sender_id, gdy subskrybują one użytkowników z fCM. Oznacza to, że FCM może zidentyfikować urządzenie użytkownika i wykorzystać upewnij się, że identyfikator nadawcy jest zgodny z odpowiednim kluczem interfejsu API, a użytkownik ma zezwala serwerowi na wysyłanie do nich wiadomości push.

Poniżej znajduje się wyjątkowo prosty plik manifestu:

{
    "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>"
}

Musisz ustawić wartość gcm_sender_id na identyfikator nadawcy z do projektu Firebase.

Po zapisaniu pliku manifestu w projekcie (plik manifest.json to dobry ), umieść w kodzie HTML następujący tag w nagłówku swojej strony stronę.

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

Jeśli nie dodasz pliku manifestu witryny z tymi parametrami, zostanie utworzony wyjątek gdy próbujesz subskrybować wiadomości push użytkownika, a pojawia się błąd. "Registration failed - no sender id provided" lub "Registration failed - permission denied".

Subskrybowanie wiadomości push

Po skonfigurowaniu pliku manifestu możesz wrócić do JavaScriptu w swoich witrynach.

Aby zasubskrybować, musisz wywołać metodę subscribe() na obiekt PushManager, do których można uzyskać dostęp za pomocą ServiceWorkerRegistration.

Spowoduje to wyświetlenie prośby do użytkownika o przyznanie Twojemu punktowi uprawnień do wysyłania powiadomień push powiadomienia. Bez tych uprawnień nie możesz i zasubskrybować kanał.

Jeśli obietnica została zwrócona rozwiązując problem z metodą subscribe(), otrzymasz PushSubscription który będzie zawierał punkt końcowy.

Punkt końcowy powinien być zapisany na serwerze dla każdego bo później będzie on potrzebny do wysyłania wiadomości push.

Ten kod umożliwia subskrybowanie użytkownika w wiadomościach push:

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

Na tym etapie aplikacja internetowa jest gotowa do odbioru wiadomości push, ale nic będzie trwać do momentu dodania detektora zdarzeń push do naszego pliku skryptu service worker.

Detektor zdarzeń push instancji usługi Service Worker

Po otrzymaniu wiadomości push (porozmawiamy o tym, jak faktycznie wysłać komunikat push wiadomość w następnej sekcji), zdarzenie push zostanie wysłana do skryptu service worker, aby wyświetlić powiadomienie.

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

Ten kod rejestruje detektor zdarzeń push i wyświetla powiadomienie z wstępnie zdefiniowany tytuł, tekst główny, ikonę i tag powiadomienia. W tym przykładzie warto podkreślić jeden subtelny element: event.waitUntil() . Ta metoda pobiera obietnica i rozszerza przez cały okres działania modułu obsługi zdarzeń (lub można go traktować jako żywy pracownik), aż do momentu, setled (rozstrzygnięte), W tym przypadku obietnica przekazana do event.waitUntil jest zwróconą obietnicą od showNotification().

Tag powiadomień działa jak Identyfikator unikalnych powiadomień. Jeśli wysłaliśmy 2 wiadomości push na ten sam adres z krótkim opóźnieniem między nimi i wyświetlać powiadomienia z tym samym tagiem, przeglądarka wyświetli pierwsze powiadomienie i zastąpi je drugie powiadomienie po odebraniu wiadomości push.

Jeśli chcesz wyświetlić kilka powiadomień jednocześnie, użyj innego tagu. bez tagu. Bardziej szczegółowy przykład wyświetlania powiadomienia na blogu. Na razie posłużmy się prostotą. Sprawdźmy, czy wysyłanie wiadomości push wyświetli się to powiadomienie.

Wysyłanie wiadomości push

Zasubskrybowaliśmy wiadomości push, a nasz skrypt service worker jest gotowy do wyświetlania więc pora wysłać wiadomość push przez FCM.

Dotyczy to tylko przeglądarek korzystających z FCM.

Gdy wyślesz zmienną PushSubscription.endpoint na swój serwer, w FCM to specjalny punkt końcowy. Na końcu adresu URL jest parametr ma status registration_id.

Przykładowy punkt końcowy to:

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

Adres URL FCM to:

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

registration_id to:

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

Dotyczy to przeglądarek korzystających z FCM. W normalnej przeglądarce uzyskać punkt końcowy i wywołać go w standardowy sposób, działa niezależnie od adresu URL.

Oznacza to, że na serwerze musisz sprawdzić, czy punkt końcowy jest przeznaczona dla FCM. Jeśli tak jest, wyodrębnij identyfikator rejestracji. Aby to zrobić w Pythonie, może na przykład:

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

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

Po uzyskaniu identyfikatora rejestracji możesz wywołać interfejs FCM API. Ty tutaj znajdziesz dokumentację referencyjnej FCM API.

Najważniejsze aspekty, o których należy pamiętać podczas wywoływania FCM:

• nagłówek Authorization o wartości key=<YOUR_API_KEY>, musi być ustawiony przy wywoływaniu interfejsu API, gdzie <YOUR_API_KEY> to Klucz interfejsu API z projektu Firebase.
  • FCM używa klucza interfejsu API do znalezienia odpowiedniego identyfikatora nadawcy. Upewnij się, że: użytkownik przyznał Twojemu projektowi uprawnienia, upewniając się, że adres IP serwera znajduje się na liście dozwolonych w danym projekcie.
• Odpowiedni nagłówek Content-Type właściwości application/json lub application/x-www-form-urlencoded;charset=UTF-8 w zależności od tego, czy wysłać dane w formacie JSON lub formularza.
• Tablica registration_ids – oto identyfikatory rejestracji, które należy wyodrębniania z punktów końcowych użytkowników.

Zapoznaj się z dokumentacją o wysyłaniu wiadomości push z serwera ale do szybkiego sprawdzenia skryptu service worker możesz użyć cURL aby wysłać wiadomość push do przeglądarki.

Zamień <YOUR_API_KEY> i <YOUR_REGISTRATION_ID> w tym poleceniu cURL i uruchom je z terminala.

Powinno wyświetlić się piękne powiadomienie:

    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\"]}"

Tworząc logikę backendu, pamiętaj, że nagłówek autoryzacji format treści POST jest specyficzny dla punktu końcowego FCM, więc wykryj, gdy jest przeznaczony dla FCM. Warunkowo dodaj nagłówek i sformatuj treść żądania POST. W innych przeglądarkach (a zapewne w Chrome w przyszłości) konieczne będzie Protokół Web Push Protocol.

Minusem obecnej implementacji interfejsu Push API w Chrome jest to, że nie może wysyłać żadnych danych za pomocą wiadomości push. Nic. Powodem jest to, że w przyszłej implementacji dane ładunków będą musiały być zaszyfrowane przed wysłaniem do punktu końcowego komunikacji push. Dzięki temu punkt końcowy niezależnie od tego, jaki jest to dostawca treści push, komunikat push. Chroni to również przed innymi lukami w zabezpieczeniach, takimi jak weryfikacji certyfikatów HTTPS i ataków typu „man in the middle” między Twoją serwera i dostawcy usług push. Jednak to szyfrowanie nie jest jeszcze obsługiwane, więc Tymczasem musisz pobrać dane, by uzyskać informacje potrzebne do wypełnij powiadomienie.

Bardziej kompletny przykład zdarzenia push

Powiadomienie, które do tej pory widzieliśmy, jest dość proste. Jeśli chodzi o próbki, ale radzi sobie z praktycznym przypadkiem użycia.

W rzeczywistości większość użytkowników będzie chciała uzyskać pewne informacje ze swojego serwera, przed wyświetleniem powiadomienia. Mogą to być dane służące do wypełniania tytuł i wiadomość z konkretnym tytułem lub o krok dalej i buforowanie niektórych stron lub danych, tak aby po kliknięciu powiadomienia przez użytkownika wszystkie informacje są dostępne od razu po uruchomieniu przeglądarki – nawet jeśli Sieć jest wtedy niedostępna.

W poniższym kodzie pobieramy niektóre dane z interfejsu API, konwertujemy odpowiedź na i użyj go do wypełnienia powiadomienia.

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

Trzeba jeszcze raz podkreślić, że event.waitUntil() spełnia oczekiwania, skutkuje obietnicą zwróconą przez funkcję showNotification(), co oznacza że odbiornik nie zostanie wyłączony do czasu zakończenia asynchronicznego wywołania fetch() oraz pojawi się powiadomienie.

Nawet jeśli wystąpi błąd, wyświetlamy powiadomienie. To jest bo jeśli tego nie zrobi, Chrome będzie wyświetlać ogólne powiadomienie.

Otwieranie adresu URL po kliknięciu powiadomienia przez użytkownika

Gdy użytkownik kliknie powiadomienie, wysyłane jest zdarzenie notificationclick w mechanizmie Service Worker. W ramach modułu obsługi możesz podjąć odpowiednie działania, np. zaznaczenie karty lub otwarcie okna z określonym adresem URL:

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

W tym przykładzie otwiera się w przeglądarce główny element pochodzenia witryny, skupiając się na istniejącą kartę z tej samej domeny, jeśli istnieje, lub otwarcie nowej karty.

Opublikowaliśmy post na temat niektórych funkcji, które możesz zrobić przy użyciu interfejsu Notification API.

Anulowanie subskrypcji urządzenia użytkownika

Urządzenie użytkownika zostało zasubskrybowane i otrzymuje on wiadomości push, ale co zrobić, anulować subskrypcję?

Aby anulować subskrypcję na urządzeniu użytkownika, musisz wywołać metodę unsubscribe() na PushSubscription i usunąć punkt końcowy z serwerów (aby nie był możliwy wysyłanie wiadomości push, które nie zostaną odebrane). Poniższy kod dokładnie tak:

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

Aktualizowanie subskrypcji

Subskrypcje mogą nie być zsynchronizowane między FCM a Twoim serwerem. Upewnij się, serwer analizuje treść odpowiedzi żądania POST wysyłanego przez interfejs FCM API w poszukiwaniu Wyniki z kategorii error:NotRegistered i canonical_id, zgodnie z informacjami w dokumentacji FCM.

Subskrypcje mogą również nie być zsynchronizowane między skryptem service worker a serwera. Na przykład po pomyślnym zasubskrybowaniu/usunięciu subskrypcji system nie działa, połączenie sieciowe może uniemożliwić aktualizację serwera; lub użytkownik może unieważnić uprawnienia do powiadomień, co spowoduje automatyczne anulowanie subskrypcji. Uchwyt w takich przypadkach, sprawdzając wynik serviceWorkerRegistration.pushManager.getSubscription() okresowo (np. podczas wczytywania strony) i synchronizując ją z serwerem. Możesz także odnawiają się automatycznie, jeśli nie masz już subskrypcji. Notification.permission == 'przyznano'.

W tym kraju (sendSubscriptionToServer()) musisz zastanowić się, jak radzić sobie nieudanych żądań sieciowych podczas aktualizacji: endpoint. Jednym z rozwiązań jest śledzić stan elementu endpoint w pliku cookie aby określić, czy serwer potrzebuje najnowszych informacji.

Wszystkie powyższe czynności umożliwiają pełną implementację komunikatów push w w przeglądarce Chrome 46. Nadal są wyjątkowe funkcje, które ułatwią Ci (jak standardowy interfejs API do wyzwalania wiadomości push), ale ta wersja umożliwia już dziś zacznij tworzyć w swoich aplikacjach internetowych komunikaty push.

Debugowanie aplikacji internetowej

Podczas implementacji komunikatów push błędy pojawią się w jednym z 2 miejsc: na Twojej stronie lub skrypt service worker.

Błędy na stronie można debugować za pomocą DevTools. Do debugowania skryptu service worker masz 2 możliwości:

1. Otwórz chrome://inspect > Skrypty service worker. Ten widok nie zapewnia wiele informacji innych niż obecnie uruchomione mechanizmy Service Worker.
2. Otwórz chrome://serviceworker-internals, aby wyświetlić agentów Service Workers, i sprawdzić ewentualne błędy. Ta strona jest do czasu, aż Narzędzia deweloperskie będą miały podobny zestaw funkcji.

Jedną z najlepszych wskazówek, które mogę dać każdemu, kto dopiero zaczyna korzystać z service worker, jest to, użycie pola wyboru „Otwórz okno Narzędzi deweloperskich i wstrzymaj wykonywanie JavaScriptu” podczas uruchamiania skryptu service worker na potrzeby debugowania”. To pole wyboru spowoduje dodanie punktu przerwania w uruchomienia skryptu service worker i wstrzymania wykonywania, umożliwia to wznów skrypt service worker i sprawdź, czy .

Jeśli występuje problem między FCM a zdarzeniem push skryptu service worker, wtedy nie da się zbyt wiele zrobić, aby debugować problem, bo nie da się w ten sposób zobaczysz, czy Chrome coś otrzymał. Najważniejsze jest, aby reklamy odpowiedź z FCM zostanie zrealizowana, gdy serwer wykona wywołanie interfejsu API. Będzie ona wyglądać Na przykład:

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

Zwróć uwagę na odpowiedź "success": 1. Jeśli zamiast tego zobaczysz błąd, sugeruje, że wystąpił problem z identyfikatorem rejestracji FCM nie jest wysyłana do Chrome.

Debugowanie Service Worker w Chrome na Androida

Obecnie debugowanie instancji roboczych w Chrome na Androida nie jest oczywiste. Otwórz chrome://inspect, znajdź swoje urządzenie i znajdź element listy o nazwie „Worker pid:...”. zawierający adres URL Twojej usługi .

UX dla powiadomień push

Zespół Chrome stworzył dokument ze sprawdzonymi metodami dotyczące UX powiadomień push, a także dokument przedstawiający niektóre są bardzo ważne podczas pracy z powiadomieniami push.

• Sprawdzone metody dotyczące UX uprawnień powiadomień push
• Przypadki skrajne i działania eliminujące problemy z powiadomieniami push

Przyszłość komunikatora push w Chrome i otwartej sieci

W tej sekcji szczegółowo omawiamy niektóre funkcje Chrome o konkretnych częściach implementacji, o których należy pamiętać, oraz o tym, będzie się różnić od tych w innych przeglądarkach.

Protokół Web Push Protocol i Endpoints

Zaletą standardu Push API jest to, że trzeba potrafić punkt końcowy – przekazuj je na swój serwer i wysyłaj komunikaty push. przez wdrożenie protokołu Web Push Protocol.

Web Push Protocol to nowy standard, który mogą wdrożyć dostawcy usług push, Dzięki temu deweloperzy nie muszą się martwić o dostawcę usług push. co pozwala uniknąć konieczności rejestrowania kluczy API i wysyłania specjalnie jak w FCM.

Chrome była pierwszą przeglądarką, która wdrożyła interfejs Push API, a FCM nie obsługuje protokół Web Push Protocol, dlatego Chrome wymaga gcm_sender_id i musisz użyć spokojnego interfejsu API FCM.

Ostatnim celem Chrome jest przejście na protokół Web Push Protocol w Chrome i FCM.

Do tego czasu musisz wykryć punkt końcowy "https://fcm.googleapis.com/fcm/send" i przetwarzać je niezależnie od innych punktów końcowych, czyli formatować dane ładunku w formacie w określony sposób i dodać klucz autoryzacji.

Jak wdrożyć protokół Web Push Protocol?

Firefox Nightly działa obecnie w trybie push i prawdopodobnie będzie pierwszą przeglądarką aby wdrożyć protokół Web Push Protocol.

Najczęstsze pytania

Gdzie są dane techniczne?

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

Czy mogę zapobiec powielaniu powiadomień, jeśli moja obecność w internecie ma wiele źródeł lub jeśli działam zarówno w internecie, jak i w środowisku natywnym?

W tej chwili nie możemy rozwiązać tego problemu, ale możesz śledzić postępy w Chromium.

Najlepszym rozwiązaniem jest udostępnienie jakiegoś rodzaju identyfikatora na urządzeniu użytkownika, po stronie serwera dopasowują identyfikatory subskrypcji i wybrać, do którego z nich chcesz wysłać wiadomość push. Możesz to zrobić za pomocą rozmiaru ekranu, modelu urządzenia i współdzielącego wygenerowany klucz między aplikacją internetową a aplikacją natywną, Każde podejście ma swoje wady i zalety.

Dlaczego potrzebuję identyfikatora gcm_sender_id?

Jest to wymagane, aby przeglądarki Chrome, Opera dla Androida i Samsung używają interfejsu Firebase Cloud Messaging (FCM) API. Celem jest wykorzystanie Protokół Web Push Protocol, gdy standard zostanie sfinalizowany i FCM będzie go obsługiwać.

Dlaczego nie warto używać Web Sockets lub zdarzeń wysyłanych przez serwer (EventSource)?

Zaletą korzystania z wiadomości push jest to, że nawet po zamknięciu strony skrypt service worker się obudzi i będzie mógł wyświetlić powiadomienie. Gniazda internetowe i EventSource zamykają połączenie po zamknięciu strony lub przeglądarki.

Co zrobić, jeśli nie potrzebuję dostarczania zdarzeń w tle?

Jeśli nie potrzebujesz przesyłania w tle, interfejs Web Sockets jest doskonałym rozwiązaniem.

Kiedy mogę używać funkcji push bez pokazywania powiadomień (np. ciche powiadomienia push w tle)?

Nie wiadomo jeszcze, kiedy ta funkcja będzie dostępna, ale zamiar wdrożenia synchronizacji w tle i chociaż nie zostało to jeszcze ustalone ani ustalone, toczy się dyskusja o tym, ciche powiadomienia push dzięki synchronizacji w tle.

Dlaczego wymagany jest protokół HTTPS? Jak mogę obejść ten problem na etapie tworzenia aplikacji?

Skrypty service worker wymagają bezpiecznych źródeł, aby zapewnić, że skrypt skryptu service worker pochodzi z zamierzonego pochodzenia i nie pochodzi od człowieka ataku. Obecnie oznacza to korzystanie z protokołu HTTPS w aktywnych witrynach, chociaż host lokalny będzie i pracować w czasie tworzenia.

Jak wygląda obsługa przeglądarek?

Chrome działa w wersji stabilnej, a w Firefoksie Nightly pracowano w trybie push. Więcej informacji znajdziesz w artykule o implementowaniu błędu interfejsu Push API. Ich implementację powiadomień możesz śledzić tutaj.

Czy mogę usunąć powiadomienie po pewnym czasie?

W tej chwili nie jest to możliwe, ale planujemy dodać wsparcie, aktualnie widocznych powiadomień. Jeśli masz przykład zastosowania, aby ustawić wygasa po jego utworzeniu, poinformuj nas, co to jest, dodaj komentarz, a my przekażemy go zespołowi Chrome.

Jeśli musisz tylko zatrzymać wysyłanie powiadomień push do użytkownika po upływie określonego czasu, i nie obchodzi się, jak długo powiadomienie będzie widoczne, możesz użyć parametru czasu życia danych (TTL) w FCM, więcej informacji.

Jakie są ograniczenia komunikatów push w Chrome?

Istnieje kilka ograniczeń opisanych w tym poście:

• Wykorzystanie CCM jako usługi push w Chrome powoduje powstanie szeregu zastrzeżonych rozwiązań . Wspólnie pracujemy nad tym, aby wprowadzić niektóre z tych rozwiązań. przyszłości.
• Po otrzymaniu wiadomości push musisz pokazać powiadomienie.
• Chrome na komputerze ma pewne ograniczenie, które polega na tym, że jeśli Chrome nie jest uruchomiony, wiadomości push nie zostaną odebrane. Różni się to od ChromeOS i Androida, gdzie wiadomości push będą zawsze odbierane.

Czy nie powinniśmy używać interfejsu Permissions API?

Interfejs Permission API jest zaimplementowany w Chrome. ale niekoniecznie będzie dostępny we wszystkich przeglądarkach. Więcej informacji znajdziesz tutaj

Dlaczego po kliknięciu powiadomienia Chrome nie otwiera poprzedniej karty?

Ten problem dotyczy tylko stron, które nie są obecnie kontrolowane przez usługę . Więcej informacji znajdziesz tutaj

Co się stanie, jeśli powiadomienie będzie nieaktualne w chwili otrzymania urządzenia użytkownika?

Po otrzymaniu wiadomości push musisz zawsze pokazywać powiadomienie. W sytuacji, gdy chcesz wysłać powiadomienie, ale jest to przydatne tylko dla danego okresu można użyć parametru „time_to_live” w CCM. aby FCM nie wysłał wiadomości push po upływie terminu jej wygaśnięcia.

Więcej informacji znajdziesz tutaj

Co się stanie, jeśli wyślę 10 wiadomości push, ale chcę, aby urządzenie je otrzymało tylko jedną?

FCM ma element „Zwiń_key” możesz go użyć, by poinformować FCM o zastąpieniu oczekujących wiadomość, która ma ten sam element „Zwiń_key” z nową wiadomością.

Więcej informacji znajdziesz tutaj