Notification API: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „Mit der Notification API kann eine Webseite Nachrichten auf Systemebene versenden.“)
 
Zeile 1: Zeile 1:
 
Mit der Notification API kann eine Webseite Nachrichten auf Systemebene versenden.
 
Mit der Notification API kann eine Webseite Nachrichten auf Systemebene versenden.
 +
 +
== Links ==
 +
https://stackoverflow.com/questions/32717824/notification-system-using-php-and-mysql Allgmeine Überlegungen kein Push
 +
https://webdamn.com/build-push-notification-system-with-php-mysql/
 +
https://web-push-book.gauntface.com/ // must read
 +
 +
== Stichworte ==
 +
Observer Design Pattern
 +
 +
== Übersicht ==
 +
Schritte in der Übersicht
 +
# Subscription
 +
# Send Push Message
 +
# Handle Push Event
 +
=== Schritt 1: Subscription ===
 +
 +
# Get permission
 +
# Get PushSubscription
 +
# Send PushSubscription to Server
 +
# Store PushSubscription Details
 +
=> JavaScript PushAPI
 +
https://developer.mozilla.org/en-US/docs/Web/API/Push_API
 +
==== Aplication Server Keys ====
 +
Der VAPID Key verifiziert den Server, so dass der Browser später weiß, dass es sich um den echten Server handelt. Eigentlich wird ein Schlüsselpaar generiert s.u.
 +
 +
=== Schritt 2: Push Message senden ===
 +
Server -> WebPush Protocol Request -> PushService -> End Device
 +
* Der Server der eine Nachrichtschicken will schickt diese Standartisiert an einen Push Service.
 +
* Welche URL dieser hat teilt der Browser im Schritt eins mit.
 +
* Der PushService schickt diese dann wenn der Browser des Nutzers Online ist an den Nutzer.
 +
* Der PushService kann Instruktionen entgegennehmen:
 +
** Lebensdauer einer Push Nachricht - danach wird sie verworfen.
 +
** Dringlichkeit (der Service entscheidet z.B. bei geringer Batteriekapazität nur Prio-Nachrichten durchzulassen)
 +
** Topic - Eine Nachricht mit dem selben Topic wie eine alte ersetzt die Alte.
 +
 +
=== Schritt 3: Push Events auf dem Endgerät ===
 +
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
 +
 +
Message kommt an -> Browser spricht mit Service Worker -> Push Event wird aufgelöst.
 +
* Wenn die Nachricht abgeliefert wurde wird dies dem Service Worker mitgeteilt. Der Service Worker ist eine JavaScript Datei, die der Browser aufrufen und ausführen kann, ohne dass die Webseite aufgerufen werden muss.
 +
* Innerhalb des Service Workers kann man eine spezielle API aufrufen. Diese ist nur im Service Worker verfügbar.
 +
* Der ServiceWorker kann ausgeführt werden wenn der Browser geschlossen ist.
 +
* Im Push Event des Service Worker kann man Hintergrundaufgaben erledigen (Analytics, Seiten Offline Cachen...)
 +
 +
== Subscription in Detail ==
 +
# Feature Detection
 +
## Check for serviceWoker on navigator
 +
## Check for PushManager on window
 +
#Register Service Worker
 +
#Request Permission

Version vom 24. Januar 2020, 14:27 Uhr

Mit der Notification API kann eine Webseite Nachrichten auf Systemebene versenden.

Links

https://stackoverflow.com/questions/32717824/notification-system-using-php-and-mysql Allgmeine Überlegungen kein Push
https://webdamn.com/build-push-notification-system-with-php-mysql/
https://web-push-book.gauntface.com/ // must read

Stichworte

Observer Design Pattern

Übersicht

Schritte in der Übersicht

  1. Subscription
  2. Send Push Message
  3. Handle Push Event

Schritt 1: Subscription

  1. Get permission
  2. Get PushSubscription
  3. Send PushSubscription to Server
  4. Store PushSubscription Details

=> JavaScript PushAPI 

https://developer.mozilla.org/en-US/docs/Web/API/Push_API

Aplication Server Keys

Der VAPID Key verifiziert den Server, so dass der Browser später weiß, dass es sich um den echten Server handelt. Eigentlich wird ein Schlüsselpaar generiert s.u.

Schritt 2: Push Message senden

Server -> WebPush Protocol Request -> PushService -> End Device
  • Der Server der eine Nachrichtschicken will schickt diese Standartisiert an einen Push Service.
  • Welche URL dieser hat teilt der Browser im Schritt eins mit.
  • Der PushService schickt diese dann wenn der Browser des Nutzers Online ist an den Nutzer.
  • Der PushService kann Instruktionen entgegennehmen:
    • Lebensdauer einer Push Nachricht - danach wird sie verworfen.
    • Dringlichkeit (der Service entscheidet z.B. bei geringer Batteriekapazität nur Prio-Nachrichten durchzulassen)
    • Topic - Eine Nachricht mit dem selben Topic wie eine alte ersetzt die Alte.

Schritt 3: Push Events auf dem Endgerät

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

Message kommt an -> Browser spricht mit Service Worker -> Push Event wird aufgelöst.
  • Wenn die Nachricht abgeliefert wurde wird dies dem Service Worker mitgeteilt. Der Service Worker ist eine JavaScript Datei, die der Browser aufrufen und ausführen kann, ohne dass die Webseite aufgerufen werden muss.
  • Innerhalb des Service Workers kann man eine spezielle API aufrufen. Diese ist nur im Service Worker verfügbar.
  • Der ServiceWorker kann ausgeführt werden wenn der Browser geschlossen ist.
  • Im Push Event des Service Worker kann man Hintergrundaufgaben erledigen (Analytics, Seiten Offline Cachen...)

Subscription in Detail

  1. Feature Detection
    1. Check for serviceWoker on navigator
    2. Check for PushManager on window
  2. Register Service Worker
  3. Request Permission
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Notification_API&oldid=24327“