Push-ilmoitukset ovat loistava tapa lähettää nopeita viestejä käyttäjille. Opi lähettämään niitä JavaScriptin avulla ilman ulkoista kirjastoa.

JavaScript-ilmoitukset ovat tapa lähettää viestejä käyttäjillesi reaaliajassa. Voit käyttää niitä ilmoittamaan verkkosivustosi päivityksistä, uusista chat-viesteistä, sähköposteista tai mistä tahansa sosiaalisen median toiminnasta. Voit myös käyttää ilmoituksia kalenterimuistutuksiin (kuten lähestyvästä kokouksesta Google Meetissä tai Zoomissa).

Opi luomaan tapahtumailmoituksia JavaScriptillä ja lähettämään ne puhelimeesi tai verkkoselaimeen. Voit saavuttaa tämän käyttämällä sisäänrakennettua, asiakaspuolen JavaScriptiä – ulkoista kirjastoa ei tarvita!

Luvan pyytäminen ilmoitusten lähettämiseen

Jos haluat luoda ilmoituksen, sinun on soitettava numeroon Ilmoitus luokkaa objektin luomiseksi. Sen avulla voit käyttää erilaisia ​​ominaisuuksia ja menetelmiä, joilla voit määrittää ilmoituksesi. Mutta ennen ilmoituksen luomista sinun on ensin pyydettävä lupa käyttäjältä.

instagram viewer

Seuraava JavaScript pyytää lupaa lähettää käyttäjäilmoituksia. The pyytää lupaa puhelu palauttaa viestin, joka ilmoittaa salliiko selain ilmoitukset vai ei:

konst painike = asiakirja.querySelector('painike')
 button.addEventListener("klikkaus", ()=> {
 Notification.requestPermission().then(lupa => {
 hälytys (lupa)
 })
})

Kun napsautat painiketta, saatat saada varoituksen, joka sanoo kielletty. Tämä tarkoittaa, että selain on estänyt JavaScriptiä lähettämästä tapahtumailmoituksia. Luvan tila on kielletty tapauksissa, joissa käyttäjä on nimenomaisesti estänyt sivustoja lähettämästä ilmoituksia (selaimen asetusten kautta) tai käyttäjä surffailee incognito-tilassa.

Tällaisissa tapauksissa on parempi kunnioittaa käyttäjän päätöstä kieltäytyä ilmoituksista ja pidättäytyä häiritsemästä heitä enempää.

Perusilmoitusten lähettäminen

Luot push-ilmoituksen luomalla a Ilmoitus objekti uudella avainsanalla. Jos haluat syventää olio-ohjelmointia, voit katsoa oppaamme aiheesta kuinka luoda luokkia JavaScriptissä.

Koska lähetät ilmoituksia vain, jos lupa myönnetään, sinun on käärittävä se sisään jos tarkistaa.

konst painike = asiakirja.querySelector('painike')
button.addEventListener("klikkaus", ()=> {
 Notification.requestPermission().then(permanentti => {
jos(permanentti 'myönnetty') {
Uusi Ilmoitus ("Esimerkkiilmoitus")
 }
 })
})

Napsauta painiketta, niin saat verkkoselaimen oikeaan alakulmaan push-ilmoituksen, jossa on määritetty teksti.

Tämä on yksinkertaisin tapa luoda ilmoituksia, ja se toimii sekä puhelimessa että tietokoneessa. Katsotaanpa joitain edistyneitä ilmoitusominaisuuksia.

Ilmoitusten lisäominaisuudet

Ilmoituksen otsikon lisäksi voit myös välittää asetukset-argumentin rakentajalle ilmoitusobjektia luodessasi. Tämän vaihtoehto-argumentin on oltava objekti. Täällä voit lisätä useita vaihtoehtoja mukauttaaksesi ilmoitustasi.

Kehon omaisuus

Ensimmäinen ominaisuus, jonka sinun pitäisi tietää, on kehon omaisuutta. Voit käyttää tätä lisätäksesi ilmoitukseesi tekstin, yleensä välittääksesi lisätietoja tekstin muodossa. Tässä on yksinkertainen esimerkki:

konst painike = asiakirja.querySelector('painike')
button.addEventListener("klikkaus", ()=> {
 Notification.requestPermission().then(permanentti => {
jos(permanentti 'myönnetty') {
Uusi Ilmoitus ("Esimerkkiilmoitus", {
 runko: "Tämä on enemmän tekstiä",
 })
 }
 })
})

Jos suoritat tämän koodin, leipäteksti näkyy push-ilmoituksessa alla Esimerkki ilmoituksesta otsikko.

Tietojen attribuutti

Usein saatat haluta lisätä mukautettuja tietoja ilmoituksiin. Haluat ehkä näyttää tietyn virheilmoituksen, jos lupa evätään, tai tallentaa API: lta saamasi tiedot. Kaikissa tällaisissa tapauksissa voit käyttää tiedot -ominaisuus lisätäksesi mukautettuja tietoja ilmoitukseesi.

button.addEventListener("klikkaus", ()=> {
 Notification.requestPermission().then(permanentti => {
jos(permanentti 'myönnetty') {
konst ilmoitus = Uusi Ilmoitus ("Esimerkkiilmoitus", {
 runko: "Tämä on enemmän tekstiä",
 tiedot: {Hei: "maailman"}
 })

 hälytys (notification.data.hello)
 }
 })
})

Pääset tietoihin osoitteesta tiedot ominaisuus samalla tavalla kuin yllä olevassa koodilohkossa ( hälytys()).

Voit myös sitoa tapahtumakuuntelijoita ilmoituksiisi. Esimerkiksi seuraava tapahtuman kuuntelija suoritetaan aina, kun suljet push-ilmoituksen. Takaisinsoittotoiminto yksinkertaisesti kirjaa mukautetun viestin lokiin.

konst ilmoitus = Uusi Ilmoitus ("Esimerkkiilmoitus", { 
 runko: "Tämä on enemmän tekstiä",
 tiedot: {Hei: "maailman"} 
})
ilmoitus. addEventListener("kiinni", e => {
konsoli.log (e.target.data.hello)
})

Tämä on erinomainen tapa siirtää tietoja, jos sinun on tehtävä jotain, kun joku sulkee ilmoituksen tai napsauttaa sitä. Paitsi kiinni tapahtuma (joka suoritetaan, kun suljet ilmoituksen), sinun tulee säilyttää nämä tapahtuman kuulijoita mielessäsi:

  • näytä: Suoritetaan, kun ilmoitus tulee näkyviin.
  • klikkaus: Suoritetaan, kun käyttäjä napsauttaa mitä tahansa ilmoituksen kohtaa.
  • virhe: Suoritetaan, kun estät JavaScriptin luvan lähettää ilmoituksia.

Ominaisuuskuvake

The kuvake Ominaisuus on tarkoitettu kuvakkeen lisäämiseen push-ilmoitukseen. Olettaen, että sinulla on nimetty kuvakkeen logo logo.png nykyisessä hakemistossa voit käyttää sitä ilmoituksissasi seuraavasti:

konst ilmoitus = Uusi Ilmoitus ("Esimerkkiilmoitus", { 
 kuvake: "logo.png"
})

Jos sinulla on vaikeuksia linkittää tiedostoihisi, sinun on tehtävä se ymmärtää suhteellisten URL-osoitteiden ja absoluuttisten URL-osoitteiden toiminnan.

Kun tallennat tiedoston, päivität selaimen ja napsautat painiketta, kuva näkyy ilmoituksessa otsikon ja tekstin vasemmalla puolella.

Tunnisteen attribuutti

Kun asetat tag attribuuttia ilmoituksessasi, annat periaatteessa ilmoitukselle yksilöllisen tunnuksen. Kaksi ilmoitusta ei voi olla olemassa yhdessä, jos niillä on sama tunniste. Sen sijaan uusin ilmoitus korvaa vanhemman ilmoituksen.

Harkitse edellistä painikeesimerkkiämme (ilman tunnistetta). Jos napsautat painiketta kolme kertaa nopeasti peräkkäin, kolme ilmoitusta tulevat näkyviin, ja ne pinoutuvat päällekkäin. Oletetaan nyt, että olet lisännyt ilmoitukseen seuraavan tunnisteen:

konst ilmoitus = Uusi Ilmoitus ("Esimerkkiilmoitus", { 
 runko: "Tämä on enemmän tekstiä",
 tag: "Uusi tagini"
})

Jos napsautat painiketta uudelleen, vain yksi ilmoitusruutu tulee näkyviin. Jokainen myöhempi napsautus korvaa aiemman ilmoituksen, joten vain yksi ilmoitus näytetään riippumatta siitä, kuinka monta kertaa napsautat painiketta. Tämä on hyödyllistä, jos haluat lisätä dynaamisia tietoja (esim Math.random()) kehoon:

konst ilmoitus = Uusi Ilmoitus ("Esimerkkiilmoitus", { 
 runko: Matematiikka.random()
 kuvake: "logo.png",
 tag: "My body tag"
})

Joka kerta kun napsautat painiketta, uusi numero tulee näkyviin. Käytä tag-ominaisuutta, jos haluat korvata nykyisen ilmoituksen uusilla tiedoilla. Esimerkiksi viestisovelluksessa voit käyttää tag-attribuuttia korvataksesi ilmoituksen uusilla viesteillä.

Esimerkki push-ilmoituksesta JavaScriptiä käyttävästä

Seuraava esimerkki havaitsee aina, kun menetät keskittymisen sivullesi (eli kun suljet sivun tai avaat uuden välilehden). Tässä tapauksessa koodi lähettää ilmoituksen, jossa sinua pyydetään palauttamaan:

antaa ilmoitus
asiakirja.addEventListener("näkyvyyden muutos", ()=> {
jos(asiakirja.visibilityState "piilotettu") {
 ilmoitus = Uusi Ilmoitus ("Tule takaisin", {
 runko: "Älä lähde vielä :("
 tag: "Tule takaisin"
 })
 } muu {
 notifikaatio.sulje()
 }
})

Aina kun menetät keskittymisen kyseiselle sivulle, saat ilmoituksen, jossa sinua pyydetään palaamaan sivulle. Mutta kun palaat sivulle, muu esto suoritetaan, mikä sulkee push-ilmoituksen. Tämä tekniikka on erinomainen tilanteissa, joissa haluat antaa käyttäjälle jonkinlaista tietoa sivultasi poistumisen jälkeen.

Lisätietoja JavaScriptistä

Tapahtumailmoitus on vain yksi lukuisista JavaScriptin ominaisuuksista. Jotta voisit olla todella hyvä ilmoitusten kanssa, sinun on ensin ymmärrettävä JavaScriptin peruskieliominaisuudet ja syntaksi. Yksinkertaisten pelien rakentaminen on yksi tavoista, joilla voit kehittää taitojasi ja tutustua kielen peruskäsitteisiin.