PWA-Push-Benachrichtigungen Teil 3: Benachrichtigungen an Android, Windows, Linux und MacOS senden

Begleiten Sie mich beim Integrieren von Push-Benachrichtigungen – eines der vielen Dinge, die ich tun muss, um meine PWA zu erstellen. Teil 1 Teil 2 Teil 3 Zeitstempel 0:15 Den Plan durchgehen 1:20 Route erstellen, um das Push-Abonnement zu akzeptieren (Hapi) 5:10 Nutzlastvalidierung hinzufügen (Joi) — 13:15 Validierung zur Route hinzufügen 15:14 Serviceanruf hinzufügen Push-Abonnement an Server (Axios) senden 17:50 Serviceaufruf in Push-Registrierungscode implementieren 21:52 Code ausführen (Oder versuchen Sie es zumindest) 23:18 Attributplatzierung „validate“ in der Routenstruktur korrigieren 24:58 Hard Code API-Port # da config nicht funktioniert 26:43 Testen des Codes durch Zulassen von Push-Benachrichtigungen im Browser — 29:56 Speichern Sie den Abonnement-Endpunkt auf dem Server über `fs.WriteFileSync` — nicht meine endgültige Implementierung 34:38 ​​Erstellen Sie eine Route zu Push-Benachrichtigungen an Browser — ein entkoppelter Test des Benachrichtigungssystems 37:53 Rebuild API and Test `curl`ing the `/push-notify` Route 40:01 Integriere `sendNotification` in die `/push-notify` Route — 41 :04 Relevante `Web-Push`-Dokumentation durchsehen (meistens starren und murmeln) — 42:03 Mit der Implementierung beginnen — 42:59 Die Parameter richtig machen — 46:52 Testen Sie `/push-notify` bis zum Ende — 48:20 Die Fehlerbehebung beginnt — 50:18 Die Suche nach den Schlüsseln `auth` und `p256dh` — 52:52 Fail 1 — 56:43 I find `. getKey()` zum Aufrufen der `PushSubscription`-Versprechensabwicklung — 58:00 Ich versuche `ArrayBuffer` zu parsen Plan 1. Route zum Akzeptieren des Abonnements erstellen Objekt erstellt `push-subscribe` 2. Serviceaufruf erstellen, um das Abonnement an Server 2 zu pushen . Erstellen Sie eine Save-Methode zum Aufrufen * Platzieren Sie sie vorerst in der fs `fs.writeFileSync` * Methode um auch `fs.readFileSync` abzurufen 4. Testen Sie das Senden einer Nachricht an den Endpunkt * Erstellen Sie den Endpunkt `push-notify` mit ` message` param * curl it! Links [ArrayBuffer]( [ArrayBuffer to String]( [ArrayBuffer to String Alternate]( [ArrayBuffer to String S/O]( node.js@12.16.1 „dependencies“: „bootstrap“: „^4.5.3“, „react“: „^16.13.1“, „react-bootstrap“: „^1.3.0“, „react- dom“: „^16.13.1“, „react-hook-form“: „^6.9.2“, „react-redux“: „^7.2.2“, „react-router-dom“: „^5.2. 0“, „redux“: „^4.0.5“, „redux-thunk“: „^2.3.0“, „workbox-precaching“: „^5.1.4“, „workbox-routing“: „^5.1. 4“, „workbox-strategies“: „^5.1.4“ „devDependencies“: „@babel/core“: „^7.0.0-0“, „@babel/plugin-transform-runtime“: „^7.12. 1“, „@babel/preset-env“: „^7.12.1“, „@babel/preset-typescript“: „^7.12.1“, „@babel/runtime“: „^7.12.1″, “ autoprefixer“: „^10.0.1“, „parcel“: „^1.12.4“, „postcss“: „^8.1.4“, „sass“: „^1.27.0“, „shelljs“: „^0.8 .4“, „typescript“: „^4.0.3“, „upath“: „^2.0.0“ .

Video Statistik:

18x angesehen // Bewertung: 0.00// Likes: 0 // Dislikes: 1
Standardbild
Tom Scharlock
PWA.ist ein PWA App Store, ein Blog, eine Video Wissensseite und die Agenturpräsenz der _PRGRSV _WEB /nd APP Agentur _Arnstadt. Tragen Sie noch heute Ihre LIEBLINGS PWA ein, kontaktieren Sie uns: /Kontakt/ oder beteiligen Sie sich einfach an der Diskussion. Meine Biografie
Artikel: 137

Schreibe einen Kommentar

ajax-loader