Push értesítések küldése JavaScript segítségével

A JavaScript-értesítések segítségével valós időben küldhet üzeneteket a felhasználóknak. Használhatja őket arra, hogy értesítse webhelye frissítéseiről, új csevegési üzeneteiről, e-mailjeiről vagy bármilyen közösségi média tevékenységéről. Értesítéseket is használhat naptári emlékeztetőkhöz (például közelgő megbeszélésekhez a Google Meetben vagy a Zoomban).

Ismerje meg, hogyan hozhat létre eseményértesítéseket JavaScriptben, és hogyan küldheti el azokat telefonjára vagy webböngészőjére. Ezt a beépített, kliensoldali JavaScript használatával érheti el – nincs szükség külső könyvtárra!

Engedély kérése értesítések küldésére

Értesítés létrehozásához fel kell hívnia a Értesítés osztályt objektum létrehozásához. Hozzáférést biztosít különféle tulajdonságokhoz és módszerekhez, amelyek segítségével konfigurálhatja az értesítést. Mielőtt azonban értesítést hozna létre, először engedélyt kell kérnie a felhasználótól.

A következő JavaScript engedélyt kér felhasználói értesítések küldésére. A engedély kérése A hívás egy üzenetet ad vissza, amely jelzi, hogy a böngésző engedélyezi-e az értesítéseket vagy sem:

const gomb = dokumentum.querySelector('gomb')
 button.addEventListener("kattintás", ()=> {
 Notification.requestPermission().then(engedély => {
 riasztás (engedély)
 })
})

Amikor rákattint a gombra, figyelmeztetést kaphat, amely azt mondja: megtagadva. Ez azt jelenti, hogy a böngésző megtagadta a JavaScript eseményértesítések küldését. Az engedély állapota megtagadva olyan esetekben, amikor a felhasználó kifejezetten megakadályozta, hogy a webhelyek értesítéseket küldjenek (a böngésző beállításain keresztül), vagy a felhasználó inkognitó módban szörföl.

Ilyen esetekben jobb tiszteletben tartani a felhasználó elutasított értesítésekre vonatkozó döntését, és tartózkodnia kell a további zavarástól.

Alapvető értesítések küldése

Push értesítést úgy hozhat létre, hogy létrehoz egy Értesítés objektumot az új kulcsszóval. Az objektum-orientált programozás mélyebb megismeréséhez tekintse meg a következő útmutatónkat hogyan lehet osztályokat létrehozni JavaScriptben.

Mivel csak az engedély megadása esetén küldene értesítést, azt egy címkébe kell csomagolnia ha jelölje be.

const gomb = dokumentum.querySelector('gomb')
button.addEventListener("kattintás", ()=> {
 Notification.requestPermission().then(perm => {
ha(perm 'megadott') {
új Értesítés("Példa értesítés")
 }
 })
})

Kattintson a gombra, és egy push értesítést kap a böngésző jobb alsó sarkában a megadott szöveggel.

Ez a legalapvetőbb módja az értesítések létrehozásának, és működik a telefonon és a számítógépen is. Nézzünk meg néhány speciális értesítési tulajdonságot.

Speciális értesítések tulajdonságai

Az értesítés címén kívül opciós argumentumot is átadhat a konstruktornak az értesítési objektum létrehozásakor. Ennek az opciós argumentumnak egy objektumnak kell lennie. Itt több lehetőséget is megadhat az értesítések testreszabásához.

A test Tulajdonsága

Az első tulajdonság, amit tudnia kell test ingatlan. Ezt arra használhatja, hogy szöveget adjon az értesítéshez, általában több információ továbbítására szöveg formájában. Íme egy egyszerű példa:

const gomb = dokumentum.querySelector('gomb')
button.addEventListener("kattintás", ()=> {
 Notification.requestPermission().then(perm => {
ha(perm 'megadott') {
új Értesítés("Példa értesítés", {
 test: "Ez több szöveg",
 })
 }
 })
})

Ha futtatja ezt a kódot, a törzsszöveg megjelenik a push értesítésben a alatt Példa értesítés fejléc.

Az adatattribútum

Gyakran előfordulhat, hogy egyéni adatokat szeretne hozzáadni az értesítésekhez. Lehet, hogy egy adott hibaüzenetet szeretne megjeleníteni, ha az engedély meg van tagadva, vagy el szeretné tárolni az API-tól kapott adatokat. Minden ilyen esetben használhatja a adat tulajdonság egyéni adatok hozzáadásához az értesítéshez.

button.addEventListener("kattintás", ()=> {
 Notification.requestPermission().then(perm => {
ha(perm 'megadott') {
const értesítés = új Értesítés("Példa értesítés", {
 test: "Ez több szöveg",
 adatok: {Helló: "világ"}
 })

 riasztás (notification.data.hello)
 }
 })
})

Az adatokhoz a adat tulajdonság hasonlóan a fenti kódblokkban láthatóhoz (a éber()).

Az eseményfigyelőket az értesítésekhez is kötheti. Például a következő eseményfigyelő végrehajtódik, amikor bezárja a push értesítést. A visszahívási funkció egyszerűen naplózza az egyéni üzenetet.

const értesítés = új Értesítés("Példa értesítés", { 
 test: "Ez több szöveg",
 adatok: {Helló: "világ"} 
})
értesítés. addEventListener("Bezárás", e => {
konzol.log (e.target.data.hello)
})

Ez egy kiváló módja az adatok átadásának, ha valamit tennie kell, amikor valaki bezár egy értesítést vagy rákattint. Eltekintve a Bezárás esemény (amely az értesítés bezárásakor fut le), ezeket meg kell őriznie eseményhallgatók az elmédben:

• előadás: Akkor fut le, amikor megjelenik az értesítés.
• kattintson: Akkor hajtódik végre, amikor a felhasználó az értesítés bárhová kattint.
• hiba: Akkor fut le, ha megtagadja a JavaScript-engedélyt az értesítések küldésére.

Az ikon Tulajdonság

A ikon tulajdonság egy ikon hozzáadására szolgál a push értesítéshez. Feltéve, hogy van egy ikonlogója logo.png az aktuális könyvtárban használhatja az értesítésekben, például:

const értesítés = új Értesítés("Példa értesítés", { 
 ikon: "logo.png"
})

Ha nehezen tud hivatkozni a fájljaira, akkor ezt meg kell tennie megértse a relatív URL-ek és az abszolút URL-ek működését.

Amikor menti a fájlt, frissíti a böngészőt, és rákattint a gombra, az értesítésben a kép megjelenik a fejléc és a törzs bal oldalán.

A címke attribútum

Amikor beállítja a címke attribútumot az értesítésben, akkor alapvetően egyedi azonosítót ad meg az értesítésnek. Két értesítés nem létezhet együtt, ha azonos címkével rendelkeznek. Ehelyett a legújabb értesítés felülírja a régebbi értesítést.

Tekintsük az előző gombpéldánkat (címke nélkül). Ha gyorsan egymás után háromszor kattint a gombra, megjelenik a három értesítés, és egymásra rakódnak. Tegyük fel, hogy hozzáadta a következő címkét az értesítéshez:

const értesítés = új Értesítés("Példa értesítés", { 
 test: "Ez több szöveg",
 címke: "Az új címkém"
})

Ha ismét rákattint a gombra, csak egy értesítési mező jelenik meg. Minden további kattintás felülírja az előzetes értesítést, így csak egy értesítés jelenik meg, függetlenül attól, hogy hányszor kattint a gombra. Ez akkor hasznos, ha dinamikus adatokat szeretne hozzáadni (pl Math.random()) a testre:

const értesítés = új Értesítés("Példa értesítés", { 
 test: Math.véletlen()
 ikon: "logo.png",
 címke: "Az én testem címkém"
})

Minden alkalommal, amikor a gombra kattint, egy új szám jelenik meg. Használja a címke tulajdonságot, ha felül szeretne írni egy aktuális értesítést a benne lévő új információkkal. Egy üzenetküldő alkalmazásban például a tag attribútum használatával felülírhatja az értesítést új üzenetekkel.

Példa a push értesítésekre JavaScript használatával

A következő példa azt észleli, amikor elveszíti a fókuszt az oldalra (például amikor bezárja az oldalt vagy megnyit egy új lapot). Ebben az esetben a kód értesítést küld, amelyben arra kéri, hogy térjen vissza:

hagyja értesítés
dokumentum.addEventListener("láthatóság-változás", ()=> {
ha(dokumentum.visibilityState "rejtett") {
 értesítés = új Értesítés("Gyere vissza kérlek", {
 test: "Még ne menj el :("
 címke: "Gyere vissza"
 })
 } más {
 notification.close()
 }
})

Amikor elveszíti a fókuszt az adott oldalra, értesítést kap, amely arra kéri, hogy térjen vissza az oldalra. De ha egyszer visszatér az oldalra, a más blokk fut, ami bezárja a push értesítést. Ez a technika kiváló olyan helyzetekben, amikor valamilyen információt szeretne adni a felhasználónak az oldal elhagyása után.

Tudjon meg többet a JavaScriptről

Az eseményértesítés csak egy a JavaScriptben található számos funkció közül. Ahhoz, hogy igazán jól kezelje az értesítéseket, először meg kell értenie a JavaScript alapvető nyelvi jellemzőit és szintaxisát. Az egyszerű játékok építése az egyik módja annak, hogy fejleszthesse készségeit és megismerkedjen a nyelv alapfogalmaival.