Kaip siųsti tiesioginius pranešimus naudojant „JavaScript“.

„JavaScript“ pranešimai yra būdas siųsti pranešimus vartotojams realiuoju laiku. Galite juos naudoti norėdami pranešti apie svetainės atnaujinimus, naujus pokalbių pranešimus, el. laiškus ar bet kokią veiklą socialiniuose tinkluose. Taip pat galite naudoti pranešimus apie kalendoriaus priminimus (pvz., apie artėjantį susitikimą sistemoje „Google Meet“ arba „Zoom“).

Sužinokite, kaip sukurti pranešimus apie įvykius naudojant „JavaScript“ ir išsiųsti juos į telefoną arba žiniatinklio naršyklę. Tai pasieksite naudodami įmontuotą kliento pusės „JavaScript“ – nereikia jokios išorinės bibliotekos!

Prašymas leidimo siųsti pranešimus

Norėdami sukurti pranešimą, turite paskambinti Pranešimas klasėje sukurti objektą. Tai suteikia prieigą prie įvairių ypatybių ir metodų, kuriuos galite naudoti norėdami konfigūruoti pranešimą. Tačiau prieš kurdami pranešimą pirmiausia turėsite paprašyti naudotojo leidimo.

Šis „JavaScript“ prašys leidimo siųsti vartotojo pranešimus. The prašymasLeidimas skambutis grąžins pranešimą, nurodantį, ar naršyklė leidžia pranešimus, ar ne:

konst mygtukas = dokumentas.querySelector("mygtukas")
 button.addEventListener("spausti", ()=> {
 Notification.requestPermission().then(leidimas => {
 įspėjimas (leidimas)
 })
})

Kai paspausite mygtuką, galite gauti įspėjimą, kuriame sakoma paneigta. Tai reiškia, kad naršyklė uždraudė JavaScript siųsti pranešimų apie įvykius. Leidimo būsena yra paneigta tais atvejais, kai naudotojas aiškiai neleido svetainėms siųsti pranešimų (per naršyklės nustatymus) arba vartotojas naršo inkognito režimu.

Tokiais atvejais geriau gerbti vartotojo sprendimą atmesti pranešimus ir neturėtumėte toliau jiems trukdyti.

Pagrindinių pranešimų siuntimas

Galite sukurti tiesioginį pranešimą sukurdami a Pranešimas objektą su nauju raktiniu žodžiu. Norėdami giliau pasinerti į objektinį programavimą, galite peržiūrėti mūsų vadovą kaip sukurti klases JavaScript.

Kadangi pranešimus siųstumėte tik tada, kai bus suteiktas leidimas, turėsite juos suvynioti į jeigu patikrinti.

konst mygtukas = dokumentas.querySelector("mygtukas")
button.addEventListener("spausti", ()=> {
 Notification.requestPermission().then(perm => {
jeigu(perm 'suteikta') {
naujas Pranešimas („Pranešimo pavyzdys“)
 }
 })
})

Spustelėkite mygtuką ir apatiniame dešiniajame žiniatinklio naršyklės kampe gausite tiesioginį pranešimą su nurodytu tekstu.

Tai pats paprasčiausias būdas sukurti pranešimus, jis veikia ir telefone, ir kompiuteryje. Pažvelkime į kai kurias išplėstines pranešimų ypatybes.

Išplėstinių pranešimų ypatybės

Kurdami pranešimo objektą, be pranešimo pavadinimo, konstruktoriui taip pat galite perduoti parinkčių argumentą. Šis parinkčių argumentas turi būti objektas. Čia galite pridėti keletą pranešimų tinkinimo parinkčių.

Kūno nuosavybė

Pirmas turtas, kurį turėtumėte žinoti kūnas nuosavybė. Naudotumėte tai norėdami pridėti tekstą prie pranešimo, paprastai norėdami pateikti daugiau informacijos teksto forma. Štai paprastas pavyzdys:

konst mygtukas = dokumentas.querySelector("mygtukas")
button.addEventListener("spausti", ()=> {
 Notification.requestPermission().then(perm => {
jeigu(perm 'suteikta') {
naujas Pranešimas („Pranešimo pavyzdys“, {
 kūnas: "Tai daugiau teksto",
 })
 }
 })
})

Jei paleisite šį kodą, pagrindinis tekstas bus rodomas tiesioginiame pranešime, po Pranešimo pavyzdys antraštę.

Duomenų atributas

Dažnai galbūt norėsite pridėti tinkintų duomenų prie pranešimų. Galbūt norite, kad būtų rodomas konkretus klaidos pranešimas, jei leidimas atmestas, arba išsaugoti duomenis, gautus iš API. Visais tokiais atvejais galite naudoti duomenis nuosavybė, kad pridėtumėte tinkintus duomenis prie pranešimo.

button.addEventListener("spausti", ()=> {
 Notification.requestPermission().then(perm => {
jeigu(perm 'suteikta') {
konst pranešimas = naujas Pranešimas („Pranešimo pavyzdys“, {
 kūnas: "Tai daugiau teksto",
 duomenys: {Sveiki: "pasaulis"}
 })

 įspėjimas (notification.data.hello)
 }
 })
})

Duomenis galite pasiekti iš duomenis savybė panašiai kaip parodyta aukščiau esančiame kodo bloke (viduje budrus()).

Taip pat galite susieti įvykių klausytojus su savo pranešimais. Pavyzdžiui, kai uždarote tiesioginį pranešimą, įvykdomas šis įvykių klausytojas. Atgalinio skambinimo funkcija tiesiog registruoja pasirinktinį pranešimą.

konst pranešimas = naujas Pranešimas („Pranešimo pavyzdys“, { 
 kūnas: "Tai daugiau teksto",
 duomenys: {Sveiki: "pasaulis"} 
})
pranešimas. addEventListener("Uždaryti", e => {
konsolė.log (e.target.data.hello)
})

Tai puikus būdas perduoti duomenis, jei reikia ką nors padaryti, kai kas nors uždaro pranešimą arba jį spusteli. Be to Uždaryti įvykį (kuris vykdomas uždarius pranešimą), turėtumėte juos pasilikti renginio klausytojai tavo mintyse:

• Rodyti: Vykdoma, kai rodomas pranešimas.
• spustelėkite: Vykdoma, kai vartotojas spusteli bet kurią pranešimo vietą.
• klaida: Vykdoma, kai atmetate „JavaScript“ leidimą siųsti pranešimus.

Piktograma Nuosavybė

The piktogramą ypatybė skirta pridėti piktogramą prie tiesioginio pranešimo. Darant prielaidą, kad turite piktogramos logotipą logotipas.png dabartiniame kataloge galite jį naudoti savo pranešimuose, pavyzdžiui:

konst pranešimas = naujas Pranešimas („Pranešimo pavyzdys“, { 
 piktograma: "logotipas.png"
})

Jei jums sunku susieti su savo failais, turite tai padaryti suprasti santykinių URL ir absoliučių URL veikimą.

Kai įrašote failą, atnaujinate naršyklę ir spustelėsite mygtuką, pranešimas bus rodomas kairėje antraštės ir turinio pusėje.

Žymos atributas

Kai nustatote žyma atributą pranešime, iš esmės pranešimui suteikiate unikalų ID. Du pranešimai negali egzistuoti kartu, jei jie turi tą pačią žymą. Vietoj to, naujausias pranešimas perrašys senesnį pranešimą.

Apsvarstykite ankstesnį mygtuko pavyzdį (be žymos). Jei spustelėsite mygtuką tris kartus iš eilės, bus rodomi trys pranešimai ir jie bus sukrauti vienas ant kito. Tarkime, kad prie pranešimo pridėjote šią žymą:

konst pranešimas = naujas Pranešimas („Pranešimo pavyzdys“, { 
 kūnas: "Tai daugiau teksto",
 žyma: „Mano nauja žyma“
})

Jei dar kartą spustelėsite mygtuką, pasirodys tik vienas pranešimų laukelis. Kiekvienas paskesnis paspaudimas perrašys išankstinį pranešimą, todėl bus rodomas tik vienas pranešimas, nesvarbu, kiek kartų spustelėsite mygtuką. Tai naudinga, jei norite pridėti dinaminių duomenų (pvz., Math.random()) prie kūno:

konst pranešimas = naujas Pranešimas („Pranešimo pavyzdys“, { 
 kūnas: Matematika.random()
 piktograma: "logotipas.png",
 žyma: „Mano kūno žyma“
})

Kiekvieną kartą spustelėjus mygtuką, pasirodys naujas numeris. Naudokite žymos ypatybę, jei norite perrašyti dabartinį pranešimą nauja informacija. Pavyzdžiui, pranešimų programoje galite naudoti žymos atributą, kad perrašytumėte pranešimą naujais pranešimais.

Push pranešimo naudojant „JavaScript“ pavyzdys

Toliau pateiktame pavyzdyje aptinkama kiekvieną kartą, kai prarandate dėmesį savo puslapyje (t. y. kai uždarote puslapį arba atidarote naują skirtuką). Tokiu atveju kodas siunčia pranešimą, kuriame prašoma grįžti:

leisti pranešimas
dokumentas.addEventListener("matomumo pokytis", ()=> {
jeigu(dokumentas.visibilityState "paslėpta") {
 pranešimas = naujas Pranešimas ("Prašau, sugrįžk", {
 kūnas: "Dar neišeik :("
 žyma: "Grįžk"
 })
 } Kitas {
 Pranešimas.uždaryti()
 }
})

Kai prarasite dėmesį į tą puslapį, gausite pranešimą, kuriame bus prašoma grįžti į puslapį. Bet kai grįšite į puslapį, Kitas blokas vykdomas, o tai uždaro tiesioginį pranešimą. Ši technika puikiai tinka tais atvejais, kai išėjus iš puslapio norite suteikti vartotojui tam tikros informacijos.

Sužinokite daugiau apie „JavaScript“.

Pranešimas apie įvykį yra tik viena iš daugelio funkcijų, kurias galite rasti „JavaScript“. Norėdami tikrai gerai valdyti pranešimus, pirmiausia turite suprasti pagrindines kalbos ypatybes ir „JavaScript“ sintaksę. Paprastų žaidimų kūrimas yra vienas iš būdų, kaip pagerinti savo įgūdžius ir susipažinti su pagrindinėmis kalbos sąvokomis.