Σημείωση: Δεν υπάρχει διαθέσιμη παλιά τεκμηρίωση για αυτό το στοιχείο, επομένως βλέπετε την τρέχουσα τεκμηρίωση.
Η Apple κυκλοφόρησε τα iOS και iPadOS 16.4, τα οποία υποστηρίζουν ειδοποιήσεις push μέσω ιστού για εφαρμογές ιστού που προστίθενται στην Αρχική Οθόνη σε συσκευές iPhone και iPad. Σε αυτόν τον οδηγό, σας βοηθάμε να ρυθμίσετε τον ιστότοπό σας για να στέλνετε ειδοποιήσεις σε χρήστες iPhone και iPad που επισκέπτονται τον ιστότοπό σας.
Ξεκλειδώστε την Απεριόριστη Εμβέλεια σε Συσκευές iOS. Μην Χάσετε τη Δυναμική.
Ρυθμιστείτε σήμερα και φέρτε πίσω τους επισκέπτες του ιστότοπού σας πριν σας ξεχάσουν. Ξεκινήστε δωρεάν, στείλτε πιο έξυπνα και αναπτυχθείτε με ένα πλάνο που ταιριάζει στον ιστότοπό σας.
Οι Ειδοποιήσεις Push Ιστού είναι διαθέσιμες για το πρόγραμμα περιήγησης Safari, το Google Chrome και το Edge σε iPhone και iPad με iOS και iPadOS 16.4. Το iOS απαιτεί από τον χρήστη να προσθέσει τον ιστότοπό σας στην Αρχική Οθόνη του και στη συνέχεια να ανοίξει την Εφαρμογή Ιστού πατώντας το εικονίδιό της. Η εφαρμογή ιστού ανοίγει όπως κάθε άλλη εγγενής εφαρμογή σε iOS ή iPadOS αντί να ανοίγει σε πρόγραμμα περιήγησης. Οι χρήστες μπορούν να παραχωρήσουν άδεια λήψης ειδοποιήσεων push και στη συνέχεια να διαχειριστούν αυτές τις άδειες στις Ρυθμίσεις Ειδοποιήσεων, όπως κάθε άλλη εφαρμογή σε iPhone και iPad.
Πριν Ξεκινήσετε
Χρειάζεστε μερικά πράγματα για να λειτουργήσουν οι καμπάνιες push ιστού σε συσκευές iOS.
- Η εφαρμογή ιστού σας πρέπει να παρέχει ένα αρχείο Web Application Manifest (manifest.json) με το μέλος display να έχει οριστεί σε standalone ή fullscreen.
- Οι χρήστες πρέπει να έχουν iOS ή iPadOS 16.4 ή νεότερη έκδοση.
- Ο χρήστης πρέπει να εγκαταστήσει την εφαρμογή ιστού στην Αρχική Οθόνη του πατώντας το κουμπί Κοινή Χρήση για να ανοίξει το μενού Κοινή Χρήση, και στη συνέχεια πατώντας “Προσθήκη στην Αρχική Οθόνη”.
- Απαιτείται μια ενέργεια χρήστη, όπως κλικ ή πάτημα σε ένα κουμπί, για να εμφανιστεί η εγγενής προτροπή άδειας και να επιτραπεί η άδεια λήψης ειδοποίησης push.
Εάν ο ιστότοπός σας είναι ήδη μια Προοδευτική Εφαρμογή Ιστού (PWA), δεν χρειάζεται να κάνετε επιπλέον ενημερώσεις για να προετοιμαστείτε για το iOS/iPadOS Web Push. Εάν δεν είστε σίγουροι αν ο ιστότοπός σας είναι PWA, συμβουλευτείτε την ομάδα ανάπτυξής σας ή χρησιμοποιήστε το Lighthouse στο Chrome DevTools.
Ρύθμιση του Ιστοτόπου σας για Ειδοποιήσεις Push Ιστού iOS και iPadOS
Ακολουθήστε τα βήματα για να ενεργοποιήσετε και να στείλετε ειδοποιήσεις push στο Safari σε iPhone και iPad:
- 1. Προσθέστε ένα αρχείο Web App Manifest στον ιστότοπό σας.
- 2. Ενσωματώστε το PushEngage στον ιστότοπό σας.
- 3. Αναπτύξτε και δοκιμάστε το manifest του ιστότοπού σας.
- 4. Δοκιμάστε το modal του παραθύρου διαλόγου εγγραφής και την προτροπή άδειας.
1. Προσθέστε ένα αρχείο Web App Manifest στον Ιστότοπό σας
Το web app manifest είναι ένα αρχείο JSON που ενημερώνει το πρόγραμμα περιήγησης για την Προοδευτική Εφαρμογή Ιστού σας (PWA) και πώς πρέπει να φαίνεται και να συμπεριφέρεται όταν εγκαθίσταται στη συσκευή επιφάνειας εργασίας ή κινητής συσκευής του χρήστη. Περιέχει μεταδεδομένα όπως το όνομα της εφαρμογής ιστού σας, την περιγραφή, τα εικονίδια, το χρωματικό σχήμα και τη διεύθυνση URL που πρέπει να ανοίξει όταν ξεκινά η εφαρμογή.
Μπορείτε να χρησιμοποιήσετε οποιοδήποτε διαδικτυακό εργαλείο για να δημιουργήσετε γρήγορα ένα αρχείο manifest. Το αρχείο manifest μπορεί να έχει οποιοδήποτε όνομα, αλλά συνήθως ονομάζεται manifest.json και πρέπει να μεταφορτωθεί στον ριζικό κατάλογο του ιστότοπού σας. Εάν χρειάζεστε βοήθεια για την προσθήκη κώδικα στον ιστότοπό σας WordPress, δοκιμάστε το plugin WPCode.
Ένα τυπικό manifest μοιάζει κάπως έτσι:
{
"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"
}
]
}
Σημείωση: Η τιμή του μέλους display στο manifest πρέπει να οριστεί σε standalone ή fullscreen.
Αφού δημιουργήσετε το αρχείο manifest, αναφέρετε το manifest στη σελίδα HTML του ιστότοπού σας χρησιμοποιώντας μια ετικέτα <link> στην ενότητα <head> της σελίδας.
Για παράδειγμα:
<link rel="manifest" href="/manifest.json">
2. Ενσωμάτωση του PushEngage στον Ιστότοπό σας
Το επόμενο βήμα είναι να ενσωματώσετε το PushEngage στον ιστότοπό σας για να χειριστεί την εγγραφή και την εγκατάσταση του Service Worker στη σελίδα.
Εάν δεν έχετε ολοκληρώσει την εγκατάσταση, εδώ είναι ο οδηγός για την εγκατάσταση του PushEngage. Εάν είστε χρήστης WordPress, μπορείτε να χρησιμοποιήσετε το PushEngage WordPress Plugin, το οποίο θα χειριστεί την εγγραφή του service worker.
Μπορείτε να ακολουθήσετε τα βήματα που αναφέρονται εδώ εάν έχετε ήδη τον service worker σας και χρειάζεται να τον συγχωνεύσετε με τον service worker του PushEngage.
3. Ανάπτυξη και Δοκιμή του Manifest του Ιστοτόπου σας
Μόλις ανεβάσετε το manifest και ενσωματώσετε το PushEngage, το επόμενο βήμα είναι να δοκιμάσετε την web εφαρμογή σας για να διασφαλίσετε ότι το manifest της web εφαρμογής σας υλοποιήθηκε σωστά. Μπορείτε να δοκιμάσετε τον ιστότοπό σας σε διάφορες συσκευές και προγράμματα περιήγησης προσθέτοντάς τον στην αρχική σας οθόνη.
Ακολουθήστε αυτά τα βήματα:
- 1. Ανοίξτε τον ιστότοπο στο πρόγραμμα περιήγησης Safari που εκτελείται σε iOS 16.4 ή νεότερη έκδοση
- 2. Κάντε κλικ στο κουμπί “Κοινή χρήση” για να ανοίξετε το μενού κοινής χρήσης.
- 3. Κάντε κλικ στην επιλογή “Προσθήκη στην Αρχική Οθόνη”.
- 4. Αποθηκεύστε την εφαρμογή στην Αρχική σας Οθόνη.
Εάν ο ιστότοπός σας έχει ρυθμιστεί με επιτυχία για web push, θα ανοίξει την web εφαρμογή όπως οποιαδήποτε άλλη εφαρμογή σε iOS ή iPadOS αντί να ανοίγει σε πρόγραμμα περιήγησης και να λειτουργεί απλώς ως συντόμευση.
Θα πρέπει να ενημερώσετε τον χρήστη σας εμφανίζοντας ένα banner στην οθόνη της εφαρμογής, προτρέποντας τον χρήστη να προσθέσει την εφαρμογή σας στην αρχική οθόνη της συσκευής του iOS και να εγγραφεί στις ειδοποιήσεις web push.
4. Δοκιμή Παραθύρου Διαλόγου Εγγραφής
Μια web εφαρμογή στην Αρχική Οθόνη σε iOS και iPadOS απαιτεί άμεση αλληλεπίδραση χρήστη, όπως η πατώντας ένα κουμπί στη σελίδα για να εμφανιστεί το Παράθυρο Διαλόγου Εγγραφής για άδεια. Ακολουθήστε αυτά τα βήματα για να δοκιμάσετε ότι η προτροπή άδειας λειτουργεί:
- 1. Ανοίξτε την web εφαρμογή πατώντας το εικονίδιο της εφαρμογής από την αρχική οθόνη στη συσκευή σας.
- 2. Περιμένετε να εμφανιστεί το Παράθυρο Διαλόγου Εγγραφής PushEngage στη σελίδα.
- 3. Κάντε κλικ στο κουμπί “Να επιτρέπεται” στο αναδυόμενο παράθυρο του PushEngage για να εμφανιστεί η προτροπή άδειας.
- 4. Κάντε κλικ στο κουμπί “Να επιτρέπεται” στην προτροπή άδειας.
Σημείωση : Το παράθυρο διαλόγου εγγραφής θα εμφανιστεί μόνο εάν ο ιστότοπός σας είναι HTTPS και η εφαρμογή έχει εκκινηθεί από την αρχική οθόνη. Μπορείτε να προσαρμόσετε το σχεδιασμό και τη συμπεριφορά του Παραθύρου Διαλόγου Εγγραφής από τον πίνακα ελέγχου του PushEngage.
Αποστολή καμπάνιας Web Push σε χρήστες iOS και iPadOS
Αφού ολοκληρώσετε τα παραπάνω βήματα που απαιτούνται για τις ειδοποιήσεις web push σε iOS και iPadOS, μπορείτε τώρα να αρχίσετε να στέλνετε μια ειδοποίηση push χρησιμοποιώντας τον πίνακα ελέγχου του PushEngage.
Οι ειδοποιήσεις push Ιστού στο iOS λειτουργούν παρόμοια με άλλες εγγενείς εφαρμογές. Οι ειδοποιήσεις push Ιστού εμφανίζονται στην οθόνη ως ειδοποίηση κεφαλίδας, στο κέντρο ειδοποιήσεων και επίσης στην οθόνη κλειδώματος. Οι χρήστες μπορούν επίσης να διαχειριστούν τις προτιμήσεις ειδοποιήσεών τους από τις Ρυθμίσεις του iOS. Μόλις κάνετε κλικ στην ειδοποίηση, θα σας μεταφέρει στην επιθυμητή σελίδα προορισμού εντός της εφαρμογής Ιστού.
Η Δομή μιας Ειδοποίησης Push Ιστού στο iOS
Οι ειδοποιήσεις push Safari στο iOS δεν υποστηρίζουν επί του παρόντος πλούσια μέσα, κινούμενα GIF ή βίντεο. Μόλις προστεθούν αυτές οι δυνατότητες, θα τις ενεργοποιήσουμε επίσης. Ακολουθήστε τις παρακάτω οδηγίες για να δημιουργήσετε τις ειδοποιήσεις σας για χρήστες iOS.
Οι ειδοποιήσεις push Ιστού σε iOS και iPadOS περιλαμβάνουν τα ακόλουθα στοιχεία:
- 1. Εικονίδιο – Το εικονίδιο που καθορίζεται στο αρχείο μανιφέστου. Δεν μπορεί να αλλάξει για μεμονωμένα μηνύματα.
- 2. Τίτλος – Ο τίτλος περιορίζεται σε 30-40 χαρακτήρες, μετά τους οποίους περικόπτεται.
- 3. Όνομα Εφαρμογής – Το όνομα της εφαρμογής δίνεται στο αρχείο μανιφέστου και δεν μπορεί να αλλάξει για μεμονωμένα μηνύματα.
- 4. Μήνυμα – Το κείμενο περιορίζεται σε 120-150 χαρακτήρες, μετά τους οποίους περικόπτεται.
- 5. Χρονοσφραγίδα – Αυτό δείχνει πόσο καιρό πριν παραδόθηκε η ειδοποίηση στη συσκευή.
Αυτά είναι όλα όσα χρειάζεστε για να αρχίσετε να συλλέγετε συνδρομητές και να στέλνετε καμπάνιες στους χρήστες του iPhone & iPad σας.
Εάν αντιμετωπίσετε οποιοδήποτε πρόβλημα, παρακαλούμε επικοινωνήστε μαζί μας κάνοντας κλικ εδώ. Η ομάδα υποστήριξής μας θα μπορέσει να σας βοηθήσει.
