Bemærk: Der findes ingen ældre dokumentation tilgængelig for dette element, så du ser den aktuelle dokumentation.
Apple har frigivet iOS og iPadOS 16.4, som understøtter web push-notifikationer for webapps tilføjet til Hjem-skærmen på iPhone- og iPad-enheder. I denne guide hjælper vi dig med at opsætte dit website til at sende notifikationer til iPhone- og iPad-brugere, der besøger dit website.
Lås op for ubegrænset rækkevidde på iOS-enheder. Gå ikke glip af momentummet.
Kom i gang i dag, og få dine webstedsbesøgende tilbage, før de glemmer dig. Start gratis, send smartere, og vækst med en plan, der passer til dit websted.
Web push-notifikationer er tilgængelige for Safari-browseren, Google Chrome og Edge på iPhone og iPad med iOS og iPadOS 16.4. iOS kræver, at brugeren tilføjer dit website til deres Hjem-skærm og derefter åbner webappen ved at trykke på dens ikon. Webappen åbnes som enhver anden native app på iOS eller iPadOS i stedet for at åbne i en browser. Brugere kan give tilladelse til at modtage push-notifikationer og derefter administrere disse tilladelser i Notifikationsindstillinger ligesom enhver anden app på iPhone og iPad.
Før du starter
Du kræver et par ting for at få web push-kampagner kørende på iOS-enheder.
- Din webapp skal levere en Web Application Manifest-fil (manifest.json) med dens display-medlem sat til standalone eller fullscreen.
- Brugerne skal være på iOS eller iPadOS 16.4 eller nyere.
- Brugeren skal installere webappen på deres Hjem-skærm ved at trykke på Del-knappen for at åbne Del-menuen og derefter trykke på "Tilføj til Hjem-skærm".
- En brugerhandling, såsom et klik eller tryk på en knap, er påkrævet for at vise den native tilladelsesprompt og tillade tilladelsen til at modtage push-notifikationer.
Hvis dit website allerede er en Progressive Web App (PWA), behøver du ikke foretage yderligere opdateringer for at forberede dig på iOS/iPadOS Web Push. Hvis du er usikker på, om dit website er en PWA, skal du tjekke med dit udviklingsteam eller bruge Lighthouse i Chrome DevTools.
Opsætning af dit website til iOS og iPadOS Web Push-notifikation
Følg trinene for at aktivere og sende push-notifikationer til Safari på iPhone og iPad:
- 1. Tilføj en Web App Manifest-fil til dit website.
- 2. Integrer PushEngage på dit website.
- 3. Implementer og test din website-manifest.
- 4. Test abonnementsdialogboksen og tilladelsesprompten.
1. Tilføj en Web App Manifest-fil til dit website
Webappens manifest er en JSON-fil, der fortæller browseren om din Progressive Web App (PWA) og hvordan den skal se ud og opføre sig, når den er installeret på brugerens desktop- eller mobile enhed. Den indeholder metadata som din webapps navn, beskrivelse, ikoner, farveskema og den URL, der skal åbnes, når appen startes.
Du kan bruge ethvert online værktøj til hurtigt at generere en manifestfil. Manifestfilen kan have ethvert navn, men hedder almindeligvis manifest.json og bør uploades til rodmappen på dit website. Hvis du har brug for hjælp til at tilføje kode til dit WordPress-site, kan du prøve WPCode-pluginnet.
Et typisk manifest ser nogenlunde sådan ud:
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Bemærk: Værdien af display-medlemmet i manifestet skal sættes til enten standalone eller fullscreen.
Når manifestfilen er oprettet, skal du henvise til manifestet på din hjemmesides HTML-side ved hjælp af en <link>-tag i <head>-sektionen af siden.
For eksempel:
<link rel="manifest" href="/manifest.json">
2. Integrer PushEngage på din hjemmeside
Det næste skridt er at integrere PushEngage på din hjemmeside for at håndtere registrering og installation af Service Worker på siden.
Hvis du ikke har fuldført installationen, er her guiden til installation af PushEngage. Hvis du er WordPress-bruger, kan du bruge PushEngage WordPress Plugin, som vil håndtere service worker-registreringen.
Du kan følge trinene nævnt her, hvis du allerede har din service worker og skal flette den med PushEngages service worker.
3. Implementer og test din hjemmesides manifest
Når du har uploadet manifestet og integreret PushEngage, er det næste skridt at teste din webapp for at sikre, at dit webapp-manifest blev implementeret korrekt. Du kan teste din hjemmeside på forskellige enheder og browsere ved at tilføje den til din startskærm.
Følg disse trin:
- 1. Åbn hjemmesiden i Safari-browseren på iOS 16.4 eller nyere
- 2. Klik på "Del"-knappen for at åbne delingsmenuen.
- 3. Klik på indstillingen "Tilføj til startskærm".
- 4. Gem appen på din startskærm.
Hvis din hjemmeside er blevet konfigureret korrekt til web push, åbnes webappen som enhver anden app på iOS eller iPadOS i stedet for at åbne i en browser og blot fungere som en genvej.
Du bør informere din bruger ved at vise et banner på appens skærm, der opfordrer brugeren til at tilføje din app til startskærmen på deres iOS-enhed og abonnere på web push-notifikationer.
4. Test abonnementsdialogboksen
En startskærms-webapp på iOS og iPadOS kræver direkte brugerinteraktion, såsom at trykke på en knap på siden for at vise abonnementsdialogboksen for tilladelse. Følg disse trin for at teste, at tilladelsesprompten virker:
- 1. Åbn webappen ved at trykke på app-ikonet fra startskærmen på din enhed.
- 2. Vent på, at PushEngage-abonnementsdialogboksen vises på siden.
- 3. Klik på "Tillad"-knappen i PushEngage Popup-modalvinduet for at vise tilladelsesprompten.
- 4. Klik på "Tillad"-knappen i tilladelsesprompten.
Bemærk: Abonnementsdialogboksen vises kun, hvis din hjemmeside er HTTPS, og appen er blevet startet fra startskærmen. Du kan tilpasse designet og adfærden af abonnementsdialogboksen fra PushEngage-dashboardet.
Send Web Push-kampagne til iOS- og iPadOS-brugere
Når du har fuldført ovenstående trin, der kræves til iOS- og iPadOS-webpush-notifikationer, kan du nu begynde at sende en push-notifikation ved hjælp af PushEngage-dashboardet.
Web Push-notifikationer på iOS fungerer ligesom andre native apps. Web Push-notifikationer vises på skærmen som en "heads-up"-notifikation, i notifikationscenteret og også på låseskærmen. Brugere kan også administrere deres notifikationspræferencer fra iOS-indstillinger. Når du klikker på notifikationen, fører den dig til den ønskede landingsside i webappen.
Strukturen af en iOS Web Push-notifikation
iOS Safari push-notifikationer understøtter i øjeblikket ikke rich media, animerede GIF'er eller videoer. Når disse funktioner tilføjes, vil vi også aktivere dem. Følg venligst retningslinjerne nedenfor for at udforme dine notifikationer til iOS-brugere.
Web push-notifikationer på iOS og iPadOS inkluderer følgende elementer:
- 1. Ikon – Ikonet angivet i manifestfilen. Det kan ikke ændres for individuelle beskeder.
- 2. Titel – Titlen er begrænset til 30-40 tegn, hvorefter den afkortes.
- 3. Appnavn – Appnavnet er angivet i manifestfilen og kan ikke ændres for individuelle beskeder.
- 4. Besked – Teksten er begrænset til 120-150 tegn, hvorefter den afkortes.
- 5. Tidsstempel – Dette viser, hvor lang tid der er gået, siden notifikationen blev leveret til enheden.
Dette er alt, hvad du behøver for at begynde at indsamle abonnenter og sende kampagner til dine iPhone & iPad-brugere.
Hvis du støder på problemer, bedes du kontakte os ved at klikke her. Vores supportteam vil kunne hjælpe dig.
