Pushmeldingen verzenden met JavaScript

JavaScript-meldingen zijn een manier om in realtime berichten naar uw gebruikers te sturen. U kunt ze gebruiken om te informeren over uw website-updates, nieuwe chatberichten, e-mails of andere activiteiten op sociale media. U kunt notificaties ook gebruiken voor agendaherinneringen (zoals een naderende vergadering op Google Meet of Zoom).

Leer hoe u gebeurtenismeldingen in JavaScript kunt maken en deze naar uw telefoon of webbrowser kunt sturen. U bereikt dit met behulp van ingebouwde JavaScript aan de clientzijde - geen externe bibliotheek vereist!

Toestemming vragen om meldingen te verzenden

Om een ​​melding te maken, moet u de Kennisgeving klasse om een ​​object te maken. Het geeft u toegang tot verschillende eigenschappen en methoden die u kunt gebruiken om uw melding te configureren. Maar voordat u een melding maakt, moet u eerst toestemming vragen aan de gebruiker.

Het volgende JavaScript vraagt ​​toestemming om gebruikersmeldingen te verzenden. De toestemming vragen call retourneert een bericht dat aangeeft of de browser meldingen toestaat of niet:

const knop = document.querySelector('knop')
 knop.addEventListener("Klik", ()=> {
 Notification.requestPermission().then(toestemming => {
 waarschuwing (toestemming)
 })
})

Wanneer u op de knop klikt, krijgt u mogelijk een melding die zegt geweigerd. Dit betekent dat de browser JavaScript heeft geweigerd om gebeurtenismeldingen te verzenden. De machtigingsstatus is geweigerd voor gevallen waarin de gebruiker de sites expliciet heeft verhinderd om meldingen te verzenden (via browserinstellingen) of de gebruiker in incognitomodus surft.

In dergelijke gevallen is het beter om de beslissing van de gebruiker voor geweigerde meldingen te respecteren en moet u ervan afzien hen verder lastig te vallen.

Basismeldingen verzenden

Een push notificatie maak je aan door een Kennisgeving object met het nieuwe trefwoord. Voor een grondige duik in objectgeoriënteerd programmeren, kunt u onze gids raadplegen op hoe klassen in JavaScript te maken.

Aangezien u alleen meldingen verzendt als toestemming is verleend, moet u deze in een als rekening.

const knop = document.querySelector('knop')
knop.addEventListener("Klik", ()=> {
 Notification.requestPermission().then(permanent => {
als(permanent 'toegekend') {
nieuw Kennisgeving("Voorbeeld melding")
 }
 })
})

Klik op de knop en u krijgt een pushmelding in de rechterbenedenhoek van uw webbrowser met de opgegeven tekst.

Dit is de eenvoudigste manier om meldingen te maken en het werkt zowel op je telefoon als op je computer. Laten we eens kijken naar enkele geavanceerde meldingseigenschappen.

Geavanceerde meldingseigenschappen

Naast de meldingstitel kunt u ook een optie-argument doorgeven aan de constructor bij het maken van het meldingsobject. Dit optieargument moet een object zijn. Hier kunt u verschillende opties toevoegen om uw melding aan te passen.

Het lichaamseigendom

De eerste eigenschap die u moet weten is lichaam eigendom. U zou dit gebruiken om een ​​hoofdtekst aan uw melding toe te voegen, meestal om meer informatie in de vorm van tekst over te brengen. Hier is een eenvoudig voorbeeld:

const knop = document.querySelector('knop')
knop.addEventListener("Klik", ()=> {
 Notification.requestPermission().then(permanent => {
als(permanent 'toegekend') {
nieuw Kennisgeving("Voorbeeld melding", {
 lichaam: "Dit is meer tekst",
 })
 }
 })
})

Als u deze code uitvoert, wordt de hoofdtekst weergegeven in de pushmelding, onder de Voorbeeld melding koptekst.

Het gegevenskenmerk

Vaak wilt u mogelijk aangepaste gegevens aan meldingen toevoegen. Misschien wilt u een bepaalde foutmelding weergeven als toestemming wordt geweigerd, of gegevens opslaan die u van een API hebt ontvangen. Voor al deze gevallen kunt u de gegevens eigenschap om aangepaste gegevens aan uw melding toe te voegen.

knop.addEventListener("Klik", ()=> {
 Notification.requestPermission().then(permanent => {
als(permanent 'toegekend') {
const melding = nieuw Kennisgeving("Voorbeeld melding", {
 lichaam: "Dit is meer tekst",
 gegevens: {Hallo: "wereld"}
 })

 waarschuwing (notification.data.hello)
 }
 })
})

U kunt de gegevens van de gegevens eigenschap op dezelfde manier als weergegeven in het bovenstaande codeblok (in de waarschuwing()).

U kunt ook gebeurtenislisteners aan uw meldingen binden. De volgende gebeurtenislistener wordt bijvoorbeeld uitgevoerd wanneer u de pushmelding sluit. De callback-functie registreert eenvoudig het aangepaste bericht.

const melding = nieuw Kennisgeving("Voorbeeld melding", { 
 lichaam: "Dit is meer tekst",
 gegevens: {Hallo: "wereld"} 
})
kennisgeving. addEventListener("dichtbij", e => {
troosten.log (e.target.data.hallo)
})

Dit is een uitstekende manier om gegevens door te geven als u iets moet doen wanneer iemand een melding sluit of erop klikt. Los van de dichtbij gebeurtenis (die wordt uitgevoerd wanneer u de melding sluit), moet u deze behouden gebeurtenis luisteraars in je gedachten:

• show: Wordt uitgevoerd wanneer de melding verschijnt.
• Klik: Wordt uitgevoerd wanneer de gebruiker ergens in de melding klikt.
• fout: Wordt uitgevoerd wanneer u JavaScript-toestemming weigert om meldingen te verzenden.

Het pictogram Eigendom

De icoon eigenschap is voor het toevoegen van een pictogram aan de pushmelding. Ervan uitgaande dat u een pictogramlogo heeft met de naam logo.png in de huidige map kunt u het als volgt in uw meldingen gebruiken:

const melding = nieuw Kennisgeving("Voorbeeld melding", { 
 icoon: "logo.png"
})

Als je moeite hebt om naar je bestanden te linken, moet je dat doen de werking van relatieve URL's en absolute URL's begrijpen.

Wanneer u het bestand opslaat, de browser vernieuwt en op de knop klikt, wordt in de melding de afbeelding aan de linkerkant van de koptekst en hoofdtekst weergegeven.

Het tagkenmerk

Wanneer u de label attribuut in uw melding, geeft u de melding in feite een uniek ID. Twee meldingen kunnen niet samen bestaan ​​als ze dezelfde tag hebben. In plaats daarvan zal de nieuwste melding de oudere melding overschrijven.

Bekijk ons ​​vorige voorbeeld van een knop (zonder tag). Als u drie keer snel achter elkaar op de knop zou klikken, verschijnen de drie meldingen en worden ze op elkaar gestapeld. Stel nu dat u de volgende tag aan de melding hebt toegevoegd:

const melding = nieuw Kennisgeving("Voorbeeld melding", { 
 lichaam: "Dit is meer tekst",
 label: "Mijn nieuwe label"
})

Als u nogmaals op de knop zou klikken, verschijnt er slechts één meldingsvenster. Elke volgende klik overschrijft de eerdere melding, dus er wordt slechts één melding weergegeven, ongeacht hoe vaak u op de knop klikt. Dit is handig als u dynamische gegevens (zoals Wiskunde.willekeurig()) naar het lichaam:

const melding = nieuw Kennisgeving("Voorbeeld melding", { 
 lichaam: Wiskunde.willekeurig()
 icoon: "logo.png",
 label: "Mijn lichaamslabel"
})

Elke keer dat u op de knop klikt, verschijnt er een nieuw nummer. Gebruik de tag-eigenschap als u een huidige melding wilt overschrijven met nieuwe informatie erin. In een berichten-app kun je bijvoorbeeld het tag-attribuut gebruiken om de melding te overschrijven met nieuwe berichten.

Een voorbeeld van pushmeldingen met behulp van JavaScript

Het volgende voorbeeld detecteert wanneer u de focus op uw pagina verliest (d.w.z. wanneer u de pagina sluit of een nieuw tabblad opent). In dit geval stuurt de code een melding waarin u wordt gevraagd om terug te keren:

laten kennisgeving
document.addEventListener("zichtbaarheidsverandering", ()=> {
als(document.visibilityState "verborgen") {
 melding = nieuw Kennisgeving("Kom terug alsjeblieft", {
 lichaam: "Ga nog niet weg :("
 label: "Terugkomen"
 })
 } anders {
 melding.close()
 }
})

Telkens wanneer u de focus op die pagina verliest, krijgt u een melding waarin u wordt gevraagd terug te gaan naar de pagina. Maar zodra u terugkeert naar de pagina, de anders block wordt uitgevoerd, waardoor de pushmelding wordt gesloten. Deze techniek is uitstekend in situaties waarin u de gebruiker informatie wilt geven na het verlaten van uw pagina.

Meer informatie over JavaScript

Gebeurtenismelding is slechts een van de vele functies die u in JavaScript kunt vinden. Om echt goed te zijn met meldingen, moet u eerst de fundamentele taalkenmerken en syntaxis van JavaScript begrijpen. Het bouwen van eenvoudige spellen is een van de manieren waarop u uw vaardigheden kunt vergroten en vertrouwd kunt raken met de basisconcepten van de taal.