Push-ilmoitukset
Pyydä lupa, tilaa push-viestit Push API:lla, vastaanota viestejä Service Workerissa ja näytä ilmoitukset showNotification-metodilla.
Push-ilmoitukset on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Miksi push-ilmoituksia käytetään?
Push-ilmoitukset houkuttelevat käyttäjiä palaamaan, vaikka sovellus ei olisi avoinna — esimerkiksi viestihälytykset, uutispäivitykset ja muistutukset hylätystä ostoskorista. Niiden taustalla on Service Worker, joten ne toimivat myös sivun ollessa suljettuna.
Push API + Notifications API
Kaksi selain-API:a toimii yhdessä. Push API vastaanottaa palvelimelta viestejä push-tilauksen kautta. Notifications API näyttää viestin käyttäjälle.
Käyttöoikeuden pyytäminen
Pyytäkää käyttäjältä käyttöoikeus ennen tilaamista — tehkää tämä vain selkeän käyttäjän toiminnon (painikkeen napsautuksen) seurauksena, ei sivun latautuessa.
async function enableNotifications() {
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
alert('Notifications denied');
return;
}
// proceed to subscribe...
}Push-tilaus
Tehkää tilaus aktiivisen service worker -rekisteröinnin kautta. Palvelimen VAPID-julkinen avain todentaa tilauksen.
async function subscribeToPush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true, // required: every push must show a notification
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});
// Send sub to your server:
await fetch('/api/save-subscription', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub)
});
}VAPID-avaimet
VAPID (Voluntary Application Server Identification) -avaimet tunnistavat palvelimenne push-palveluille (FCM, Mozilla ja niin edelleen). Luokaa avaimet kerran ja säilyttäkää yksityinen avain palvelimella.
# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys
# Output:
# Public Key: BJ...
# Private Key: ka...Palvelimelta lähetettävä push
Lähettäkää push-ilmoitus tallennettuun tilaukseen web-push-npm-kirjastolla.
import webpush from 'web-push';
webpush.setVapidDetails(
'mailto:you@example.com',
process.env.VAPID_PUBLIC,
process.env.VAPID_PRIVATE
);
await webpush.sendNotification(savedSubscription, JSON.stringify({
title: 'New message',
body: 'Alice sent you a message',
url: '/inbox/123'
}));Push-tapahtuman käsittely Service Workerissa
SW vastaanottaa push-tapahtuman ja näyttää ilmoituksen.
// sw.js
self.addEventListener('push', (event) => {
const data = event.data ? event.data.json() : {};
event.waitUntil(
self.registration.showNotification(data.title || 'Notification', {
body: data.body,
icon: '/icons/192.png',
badge: '/icons/badge.png',
data: { url: data.url }
})
);
});Ilmoituksen napsautuskäsittelijä
Avatkaa sovellus tai tuokaa se aktiiviseksi, kun käyttäjä napsauttaa ilmoitusta.
self.addEventListener('notificationclick', (event) => {
event.notification.close();
const url = event.notification.data.url || '/';
event.waitUntil(
clients.matchAll({ type: 'window' }).then(clientList => {
for (const client of clientList) {
if (client.url.endsWith(url) && 'focus' in client) return client.focus();
}
return clients.openWindow(url);
})
);
});Ilmoituksen asetukset
Mukauttakaa seuraavia asetuksia: icon, badge (pieni kuvake ilmoitusalueella), image (suuri kuva), actions (painikkeet), tag (korvaa samalla tag-arvolla varustetut vanhemmat ilmoitukset), requireInteraction (pysyy näkyvissä, kunnes se suljetaan), silent.
self.registration.showNotification('Message', {
body: 'Alice sent you a photo',
icon: '/icons/192.png',
image: '/images/alice-photo.jpg',
actions: [
{ action: 'view', title: 'View' },
{ action: 'reply', title: 'Reply' }
],
tag: 'message-from-alice', // replaces earlier 'message-from-alice'
requireInteraction: false
});Tilauksen peruuttaminen
Antakaa käyttäjille mahdollisuus kieltäytyä — kutsukaa pushSubscription.unsubscribe()-metodia ja poistakaa tilaus palvelimeltanne.
async function disablePush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.getSubscription();
if (sub) {
await sub.unsubscribe();
await fetch('/api/delete-subscription', {
method: 'POST',
body: JSON.stringify({ endpoint: sub.endpoint })
});
}
}iOS-tuki
iOS 16.4 ja uudemmat tukevat Web Pushia, mutta vain Koti-valikolle asennetuissa PWA-sovelluksissa. iOS 16.4:ää vanhemmat laitteet ja Safarin käyttö iPhonessa eivät tue web pushia lainkaan.
Parhaat käytännöt
1) Pyytäkää käyttöoikeutta vasta selkeän käyttäjän toiminnon jälkeen. 2) Lähettäkää merkityksellisiä ja harvoin toistuvia ilmoituksia. 3) Näyttäkää aina ilmoitus push-tapahtuman yhteydessä (selaimet voivat peruuttaa käyttöoikeuden, jos ette tee niin). 4) Tarjotkaa helppo tapa peruuttaa tilaus. 5) Testatkaa kaikilla kolmella push-palvelulla (FCM, Mozilla, WindowsPush).
Yleiset sudenkuopat
Push-ilmoitus epäonnistuu äänettömästi, jos userVisibleOnly on false (Chrome edellyttää arvoa true), VAPID-avaimet eivät täsmää, tilaus on vanhentunut (tehkää uusi tilaus) tai push-tapahtuman yhteydessä ei näytetä ilmoitusta (selain peruuttaa käyttöoikeuden).
Pikatarkistus
Miksi jokaisen push-viestin on tuotettava näkyvä ilmoitus (arvolla userVisibleOnly: true)?
Kertaus: push-ilmoitukset
Pyytäkää käyttöoikeutta vain käyttäjän toiminnon kautta. Tehkää tilaus kutsulla reg.pushManager.subscribe ja VAPID-julkisella avaimella. Palvelin lähettää ilmoitukset web-push-kirjastolla. SW:n push-tapahtuma kutsuu showNotification-metodia. notificationclick avaa sovelluksen tai tuo sen aktiiviseksi. Mukauttakaa icon-, badge-, image-, actions- ja tag-asetuksia. Näyttäkää aina ilmoitus (userVisibleOnly: true vaaditaan). iOS 16.4 ja uudemmat tukevat ominaisuutta, mutta vain PWA:na asennettuna.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Push-ilmoitukset” ilmainen?
Kyllä – oppitunnin ”Push-ilmoitukset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Push-ilmoitukset”?
Pyydä lupa, tilaa push-viestit Push API:lla, vastaanota viestejä Service Workerissa ja näytä ilmoitukset showNotification-metodilla. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Push-ilmoitukset”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Web App Manifest
- Service Workerin rekisteröinti ja elinkaari
- Offline-välimuististrategiat: CacheFirst ja NetworkFirst
- Push-ilmoitukset