Observera: Det finns ingen äldre dokumentation tillgänglig för det här objektet, så du ser den aktuella dokumentationen.
Apple har släppt iOS och iPadOS 16.4, som stöder webb push-meddelanden för webbappar som lagts till på hemskärmen på iPhone- och iPad-enheter. I den här guiden hjälper vi dig att konfigurera din webbplats för att skicka meddelanden till iPhone- och iPad-användare som besöker din webbplats.
Lås upp obegränsad räckvidd på iOS-enheter. Missa inte momentumet.
Kom igång idag och få tillbaka dina webbplatsbesökare innan de glömmer dig. Börja gratis, skicka smartare och växa med en plan som passar din webbplats.
Webb push-meddelanden är tillgängliga för Safari-webbläsaren, Google Chrome och Edge på iPhone och iPad med iOS och iPadOS 16.4. iOS kräver att användaren lägger till din webbplats på sin hemskärm och sedan öppnar webbappen genom att trycka på dess ikon. Webbappen öppnas som vilken annan inbyggd app som helst på iOS eller iPadOS istället för att öppnas i en webbläsare. Användare kan ge tillstånd att ta emot push-meddelanden och sedan hantera dessa tillstånd i Meddelandeinställningar precis som vilken annan app som helst på iPhone och iPad.
Innan du börjar
Du behöver några saker för att webb push-kampanjer ska fungera på iOS-enheter.
- Din webbapp måste servera en Web Application Manifest-fil (manifest.json) med sitt display-medlem satt till standalone eller fullscreen.
- Användarna måste ha iOS eller iPadOS 16.4 eller senare.
- Användaren måste installera webbappen på sin hemskärm genom att trycka på Dela-knappen för att öppna Dela-menyn och sedan trycka på "Lägg till på hemskärmen".
- En användargest, som ett klick eller tryck på en knapp, krävs för att visa den inbyggda tillåtelseprompten och tillåta tillstånd att ta emot push-meddelanden.
Om din webbplats redan är en Progressive Web App (PWA) behöver du inte göra några ytterligare uppdateringar för att förbereda dig för iOS/iPadOS Web Push. Om du är osäker på om din webbplats är en PWA, kontrollera med ditt utvecklingsteam eller använd Lighthouse i Chrome DevTools.
Konfigurera din webbplats för iOS och iPadOS Web Push-meddelanden
Följ stegen för att aktivera och skicka push-meddelanden till Safari på iPhone och iPad:
- 1. Lägg till en Web App Manifest-fil på din webbplats.
- 2. Integrera PushEngage på din webbplats.
- 3. Driftsätt och testa din webbplatsmanifest.
- 4. Testa prenumerationsdialogrutan och tillåtelseprompten.
1. Lägg till en Web App Manifest-fil på din webbplats
Webbappmanifestet är en JSON-fil som talar om för webbläsaren om din Progressive Web App (PWA) och hur den ska se ut och bete sig när den installeras på användarens dator eller mobila enhet. Den innehåller metadata som din webbapps namn, beskrivning, ikoner, färgschema och URL som ska öppnas när appen startas.
Du kan använda vilket onlineverktyg som helst för att snabbt generera en manifestfil. Manifestfilen kan ha vilket namn som helst men heter vanligtvis manifest.json och bör laddas upp till webbplatsens rotkatalog. Om du behöver hjälp med att lägga till kod på din WordPress-webbplats, prova pluginet WPCode.
Ett typiskt manifest ser ut ungefär så här:
{
"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"
}
]
}
Obs: Värdet för medlemmen display i manifestet måste vara satt till antingen standalone eller fullscreen.
När manifestfilen har skapats, referera till manifestet på din webbplats HTML-sida med en <link>-tagg i <head>-sektionen på sidan.
Till exempel:
<link rel="manifest" href="/manifest.json">
2. Integrera PushEngage på din webbplats
Nästa steg är att integrera PushEngage på din webbplats för att hantera registrering och installation av Service Worker på sidan.
Om du inte har slutfört installationen, finns här guiden för att installera PushEngage. Om du är en WordPress-användare kan du använda PushEngage WordPress Plugin, som hanterar registreringen av service worker.
Du kan följa stegen som nämns här om du redan har din service worker och behöver slå ihop den med PushEngages service worker.
3. Driftsätt och testa din webbplatsmanifest
När du har laddat upp manifestet och integrerat PushEngage är nästa steg att testa din webbapp för att säkerställa att ditt webbappmanifest har implementerats korrekt. Du kan testa din webbplats på olika enheter och webbläsare genom att lägga till den på din startskärm.
Följ dessa steg:
- 1. Öppna webbplatsen i Safari-webbläsaren som körs på iOS 16.4 eller senare
- 2. Klicka på "Dela"-knappen för att öppna delningsmenyn.
- 3. Klicka på alternativet "Lägg till på startskärmen".
- 4. Spara appen på din startskärm.
Om din webbplats har konfigurerats framgångsrikt för webb-push kommer den att öppna webbappen som vilken annan app som helst på iOS eller iPadOS istället för att öppnas i en webbläsare och endast fungera som en genväg.
Du bör informera din användare genom att visa en banner på appskärmen, som uppmanar användaren att lägga till din app på startskärmen på sin iOS-enhet och prenumerera på webb-push-notiser.
4. Testa prenumerationsdialogrutan
En webbapp på startskärmen på iOS och iPadOS kräver direkt användarinteraktion, som att trycka på en knapp på sidan för att visa prenumerationsdialogrutan för tillstånd. Följ dessa steg för att testa att tillståndsförfrågan fungerar:
- 1. Öppna webbappen genom att trycka på appikonen från startskärmen på din enhet.
- 2. Vänta tills PushEngage-prenumerationsdialogrutan visas på sidan.
- 3. Klicka på "Tillåt"-knappen i PushEngage Popup-modalen för att visa tillståndsförfrågan.
- 4. Klicka på "Tillåt"-knappen i tillståndsförfrågan.
Observera: Prenumerationsdialogrutan visas bara om din webbplats är HTTPS och appen har startats från startskärmen. Du kan anpassa designen och beteendet för prenumerationsdialogrutan från PushEngage-instrumentpanelen.
Skicka webb-push-kampanj till iOS- och iPadOS-användare
När du har slutfört ovanstående steg som krävs för iOS- och iPadOS-webb-push-notiser kan du nu börja skicka en push-notis med hjälp av PushEngage-instrumentpanelen.
Web Push Notifications on iOS works similar to other native apps. Web Push notifications are displayed on the screen as a heads-up notification, in the notification center and also on the lock screen. Users can also manage their notification preferences from iOS Settings. Once you click on the notification, it will take you to the desired landing page within the web app.
The Structure of an iOS Web Push Notification
iOS Safari push notifications do not currently support rich media, animated GIFs or videos. Once these features are added, we will enable them as well. Please follow the guidelines below to craft your notifications for iOS users.
Web push notifications on iOS and iPadOS include the following elements:
- 1. Icon – The icon specified in the manifest file. It can’t be changed for individual messages.
- 2. Title – The title is restricted to 30-40 characters, after which it gets truncated.
- 3. App Name – The app name is given in the manifest file and cannot be changed for individual messages.
- 4. Message – The text is restricted to 120-150 characters, after which it gets truncated.
- 5. Timestamp – This shows how long ago the notification was delivered to the device.
This is all you need to start collecting subscribers and sending campaigns to your iPhone & iPad users.
Om du stöter på några problem, vänligen kontakta oss genom att klicka här. Vårt supportteam kommer att kunna hjälpa dig.
