nb en en da en en sv nb nb nb da da da da da en en en da fr en fr da id en en en sv fr de de fr fr fr sv en fr en ja fr de fr es ms en es en en en en en en en en en es ceb en kn kn da da da da da da da da da da en en da da sv da da sv da nb nb en da da da da en nl da sv da en
Angular: Browser webpush- og desktop notifikationer – NerdGirl
Forbud fører sjældent noget godt med sig
(Last Updated On: 18. februar 2019)
Dette er mine noter om implemententering af push- og desktop notifikationer i en Angular 7 PWA. Se den fulde beskrivelse på engelsk her: Angular Push Notifications – a Complete Step-by-Step Guide
Web Push notifikationer: Notifikationer der sendes fra en server til en browser, også når hjemmesiden ikke har fokus og endda når browseren er helt lukket. Dette er en pendant til de notifikationer man også bruger til at sende notifikationer til app’s i mobile enheder.
Således bruges Push til at sende beskeden til browseren og Desktop til at vise beskeden når den modtages i browseren.
Start med at installere web-push globalt:
# npm install web-push -g
# npm install web-push -g
Generér VAPID nøgler med følgende kommando:
$ web-push generate-vapid-keys --json
$ web-push generate-vapid-keys --json
Den offentlige nøgle publicKey bruges til at identificere den service brugeren abonnerer på beskeder fra, dvs. din backend. Den private nøgle privateKey bruges af serveren ved udsendelse af beskeder. Sidstnævnte skal naturligvis opbevares bag lås og slå.
eksport class AppComponent { readonly VAPID_PUBLIC_KEY = "BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo"; constructor( private swPush: SwPush, private newsletterService: NewsletterService) {} subscribeToNotifications() { this.swPush.requestSubscription({ serverPublicKey: this.VAPID_PUBLIC_KEY }) .then(sub => this.newsletterService.addPushSubscriber(sub).subscribe()) .catch(err => console.error("Could not subscribe to notifications", err)); } }
eksport class AppComponent {
readonly VAPID_PUBLIC_KEY = "BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo";
private newsletterService: NewsletterService) {}
.catch(err => console.error("Could not subscribe to notifications", err));
Nu kan du lave en knap eller lign. i din PWA der ved tryk kalder subscribeToNotifications(). Dette vil få browseren til at spørge om brugeren vil tillade browser beskeder.
I then blokken tilføjer du det der skal ske, når brugeren har bekræftet og forespørgslen til browserudbyderens push service er lykkedes.
Variablen sub indeholder et json objekt med alt det du fremover skal bruge, for at kunne sende notifikationer til brugeren. Dette er brugerenes ‘abonnement’ på din push service. Det er derfor vigtigt at gemme disse informationer centralt i en backend. Hver browser (Chrome, Safari, Internet Explorer, Firefox m.fl) har sin egen push service server. Når brugeren tager din PWA i brug i en ny browser, skal vedkommende derfor igen acceptere notifikationer, og ‘abonnementet’ gemmes i backend.
Når en push besked sendes, skal den sendes til alle de browsere hvor brugeren har ‘abonnement’ på push beskeder. Samtidig gemmer du information om hvornår abonnementet sidst var aktivt således at du kan ignorere og i sidste ende fjerne inaktive abonnementer. Der er jo ikke grund til at bruge kræfter på at sende til en browser brugeren ikke har benyttet i måneder.
Min strategi vil være som følger:
Brugeren tilgår app’en for første gang i den aktuelle browser.
Brugeren bekræfter modtagelse af notifikationer
Abonnementet gemmes i backend, eller overskrives hvis der i forvejen ligger et abonnement med samme endpoint.
App’en bekræfter dette endpoint med jævnlige intervaller.
Efter 1 år hvor et endpoint ikke er bekræftet, fjernes det fra databasen.
Posted in Webudvikling Tagged angular 7, browser, desktop, notifikationer, push
Low carb Seitan brød med gær
ejabberd 18.01 på Ubuntu 18.04
I gang med Angular 13 på Linux
Brug af grep kommandoen
Installer Asbru Connection Manager på Fedora
Installer DBeaver på Fedora
Node Package Manager (npm)
Linux: Afvikle en kommando som en anden bruger
MariaDB: Slå generel log til midlertidigt
Udskift nouveau driver med NVIDIA på Fedora 33 – og fortryd
Skab overblik over dine DMARC rapporter
Kategorier Vælg kategori Aftensmad Akrylmaling Bagværk Computer Dessert Fotografi Generelt Grød Hakket oksekød Hobby Hvidkål Ikke kategoriseret Internet IT Krop og sind PHP Pizza Politik Samfund Server Tips & Tricks Vegansk Webudvikling
Arkiver Vælg måned august 2022 april 2022 marts 2022 oktober 2021 maj 2021 marts 2021 februar 2021 januar 2021 december 2020 november 2020 oktober 2020 august 2020 juli 2020 juni 2020 marts 2020 januar 2020 december 2019 november 2019 oktober 2019 august 2019 juni 2019 april 2019 februar 2019 december 2018 oktober 2018 september 2018 juli 2018 juni 2018 maj 2018 april 2018 februar 2018 januar 2018 december 2017 oktober 2017 september 2017 august 2017 juli 2017 juni 2017 maj 2017 april 2017 januar 2017 december 2016 november 2016 oktober 2016 september 2016 januar 2016 december 2015 november 2015 oktober 2015 september 2015
Proudly powered by WordPress | Theme: chichi by xtianmark.