9 εκπληκτικά μυστικά PWA

Περιεχόμενο

• 01. Συντόμευση WebAPK έναντι Android
• 02. Δημιουργήστε ένα προσαρμοσμένο banner εγκατάστασης εφαρμογής web
• 03. Μοιραστείτε περιεχόμενο από το PWA σας
• 04. Παρακολούθηση του Analytics
• 05. Δημιουργήστε ένα συμβατό iOS PWA
• 06. Συγχρονισμός δεδομένων στο παρασκήνιο
• 07. Κοινωνικά δίκτυα και ψευδο-προγράμματα περιήγησης
• 08. Δοκιμή σε συσκευές Android και εξομοιωτές
• 09. Δημοσίευση σε καταστήματα

Οι Προοδευτικές Εφαρμογές Ιστού (PWA) είναι μια νέα αιχμή στο σχεδιασμό ιστοσελίδων που ανταποκρίνεται και αυξάνονται στη δημοτικότητά τους. Η υποστήριξη PWA ξεκίνησε με το Chrome σε Android και είναι πλέον διαθέσιμη στα περισσότερα άλλα προγράμματα περιήγησης Android, όπως Opera, Firefox, Samsung Internet και UCWeb, καθώς και iPhone και iPad από iOS 11.3 και Edge για Windows και Chrome σε λειτουργικά συστήματα επιτραπέζιων υπολογιστών.

Για να σας βοηθήσουμε να δημιουργήσετε ένα καλό εμπειρία χρήστη για αυτό το αυξανόμενο κοινό, θα μοιραστούμε μερικά ζωτικά κόλπα και ιδέες. Για περισσότερες συμβουλές, ρίξτε μια ματιά στο άρθρο μας πώς να δημιουργήσετε μια εφαρμογή.

01. Συντόμευση WebAPK έναντι Android

Το 2017, το Chrome παρουσίασε μια νέα δυνατότητα για χρήστες Android: WebAPK. Τώρα, όταν οι χρήστες σας εγκαθιστούν το PWA σας (εάν πληροί τις απαιτήσεις), ένας διακομιστής Google Play θα δημιουργήσει ένα APK (Πακέτο Android, ένα εγγενές κοντέινερ εφαρμογών) και θα το εγκαταστήσει στη συσκευή σαν να προέρχεται από το Play Store . Ο χρήστης σας δεν χρειάζεται να ενεργοποιήσει ανασφαλείς πηγές ή να αγγίξει άλλες ρυθμίσεις.

Όταν το PWA είναι εγκατεστημένο, θα εμφανιστεί στην αρχική οθόνη, στην εφαρμογή εκκίνησης, στις Ρυθμίσεις και όπως οποιαδήποτε άλλη εφαρμογή πολίτη πρώτης κατηγορίας στο λειτουργικό σύστημα, συμπεριλαμβανομένων πληροφοριών σχετικά με την μπαταρία και τον χώρο που χρησιμοποιείται στο σύστημα.

Εάν το PWA σας δεν πληροί όλες τις απαιτήσεις, η υπηρεσία Play είναι εκτός λειτουργίας, υπάρχει πρόβλημα σύνδεσης ή χρησιμοποιείται άλλο πρόγραμμα περιήγησης Android, όπως Firefox ή Samsung Internet, θα δημιουργηθεί μια τυπική συντόμευση στην αρχική οθόνη. Αυτό το εικονίδιο θα έχει επωνυμία προγράμματος περιήγησης από το Android 8+.

Το WebAPK επιτρέπει επίσης μια ωραία αλλά επικίνδυνη λειτουργία που πρέπει να γνωρίζετε: το PWA θα έχει τον τομέα και τη διαδρομή εντός των ορίων του λειτουργικού συστήματος Android. Με βάση το χαρακτηριστικό εύρους της δήλωσης εφαρμογής Web, κάθε σύνδεσμος που λαμβάνει ο χρήστης σε αυτό το πεδίο θα προωθηθεί στην εφαρμογή πλήρους οθόνης και όχι στο πρόγραμμα περιήγησης, πράγμα που σημαίνει ότι πρέπει να προσέξετε τις διευθύνσεις URL που χρησιμοποιείτε.

Ας υποθέσουμε ότι διαθέτετε PWA που εξυπηρετεί χρήστες κινητών και βρίσκεται στον ριζικό φάκελο του τομέα σας. Όταν η εφαρμογή εγκατασταθεί μέσω WebAPK, ολόκληρος ο τομέας θα ανήκει πλέον στο PWA. Εάν έχετε μια έρευνα στο / survey που μοιράζεστε μέσω Facebook ή ένα PDF με όρους και προϋποθέσεις που στέλνετε μέσω ηλεκτρονικού ταχυδρομείου στους χρήστες σας στο /terms.pdf, το λειτουργικό σύστημα θα ανοίξει το PWA και όχι το πρόγραμμα περιήγησης όταν κάνετε κλικ σε αυτούς τους συνδέσμους. Είναι σημαντικό να ελέγξετε αν το σύστημα δρομολόγησης PWA γνωρίζει για αυτές τις διευθύνσεις URL και πώς να τα προβάλει και, εάν όχι, να τα ανοίξετε σε ένα πρόγραμμα περιήγησης σε διαφορετικό εύρος.

02. Δημιουργήστε ένα προσαρμοσμένο banner εγκατάστασης εφαρμογής web

Πολλά προγράμματα περιήγησης προσκαλούν τον χρήστη να εγκαταστήσει το PWA σας εάν πληρούνται ορισμένες προϋποθέσεις, συμπεριλαμβανομένων των περιοδικών επισκέψεων από αυτόν τον χρήστη για το PWA σας. Προς το παρόν, το banner δεν περιλαμβάνει αρκετές πληροφορίες για τους λόγους για τους οποίους ένας χρήστης πρέπει να αποδεχθεί. Ωστόσο, μπορούμε να χρησιμοποιήσουμε συμβάντα για να αποφύγουμε το banner και, το πιο σημαντικό, να το αναβάλουμε για κάτι πιο πιθανό να δημιουργήσει αποδοχή, όπως ένα εικονίδιο εγκατάστασης.

Το πρώτο βήμα είναι να ακυρώσετε την εμφάνιση του banner και να αποθηκεύσετε το αντικείμενο του συμβάντος για μελλοντική χρήση:

// καθολική μεταβλητή για το αντικείμενο συμβάντος var installPromptEvent; window.addEventListener («beforeinstallprompt», function (event) {event.preventDefault (); installPromptEvent = event;});

Το επόμενο βήμα είναι να παρέχετε μια διεπαφή χρήστη για να εξηγήσετε τα πλεονεκτήματα της εγκατάστασης ή ένα κουμπί εγκατάστασης. Αυτή η διεπαφή χρήστη θα καλέσει την επόμενη λειτουργία μας:

function callInstallPrompt () {// Δεν μπορούμε να ενεργοποιήσουμε το διάλογο πριν αποτρέψουμε το προεπιλεγμένο παράθυρο διαλόγου του προγράμματος περιήγησης εάν (installPromptEvent! == undefined) {installPromptEvent.prompt (); }}

03. Μοιραστείτε περιεχόμενο από το PWA σας

Όταν το PWA σας βρίσκεται σε λειτουργία πλήρους οθόνης, δεν υπάρχει γραμμή διεύθυνσης URL ή ενέργεια κοινής χρήσης από το πρόγραμμα περιήγησης ώστε ο χρήστης να μοιράζεται περιεχόμενο με κοινωνικά δίκτυα. Μπορούμε να επωφεληθούμε από το API κοινής χρήσης ιστού και να έχουμε ένα εναλλακτικό για το άνοιγμα εγγενών κοινωνικών εφαρμογών.

λειτουργία κοινής χρήσης () {var text = «Προσθήκη κειμένου για κοινή χρήση με τη διεύθυνση URL»; εάν («κοινή χρήση» στο navigator) {navigator.share ({title: document.title, text: text, url: location.href,})} άλλο {// Εδώ χρησιμοποιούμε το WhatsApp API ως εναλλακτικό; θυμηθείτε να κωδικοποιήσετε το κείμενό σας για URI location.href = ’https://api.whatsapp.com/send?text=’ + encodeURIComponent (text + ’-’) + location.href}}

04. Παρακολούθηση του Analytics

Όταν έχετε PWA, θα θελήσετε να παρακολουθήσετε όσο το δυνατόν περισσότερα συμβάντα, οπότε ας ρίξουμε μια ματιά σε όλα όσα μπορούμε να μετρήσουμε αυτήν τη στιγμή. Μπορείτε να χρησιμοποιήσετε το Google Analytics API ή άλλα εργαλεία ανάλυσης για να παρακολουθήσετε αυτά τα συμβάντα αργότερα.

window.addEventListener («appinstalled», function (event) {// Track event: Η εφαρμογή εγκαταστάθηκε (banner ή μη αυτόματη εγκατάσταση)}); window.addEventListener ('beforeinstallprompt', function (event) {// Track event: Το banner της εφαρμογής web εμφανίστηκε event.userChoice.then (function (result) {if (result.outcome === 'accept') {// Παρακολούθηση συμβάντος: Το banner της εφαρμογής ιστού έγινε αποδεκτό} άλλο {// Παρακολούθηση συμβάντος: Το banner της εφαρμογής ιστού απορρίφθηκε}});});

Το επόμενο σημαντικό συμβάν παρακολούθησης είναι όταν ο χρήστης ανοίγει την εφαρμογή από την αρχική οθόνη. Αυτό σημαίνει ότι ο χρήστης έχει κάνει κλικ στο εικονίδιο της εφαρμογής ή, σε Android με υποστήριξη WebAPK, έκανε επίσης κλικ σε έναν σύνδεσμο που δείχνει το εύρος PWA.

Ο απλούστερος τρόπος για να γίνει αυτό είναι μέσω του χαρακτηριστικού start_url της δήλωσης, προσθέτοντας ένα συμβάν παρακολούθησης στη διεύθυνση URL που μπορεί να χρησιμοποιηθεί αυτόματα ως προέλευση από ένα σενάριο του Analytics, όπως:

start_url: ’/? utm_source = αυτόνομο & utm_medium = pwa’

Επίσης, το ακόλουθο σενάριο μας αφήνει ένα boolean που δηλώνει εάν ο χρήστης βρίσκεται αυτήν τη στιγμή σε πρόγραμμα περιήγησης (true) ή σε αυτόνομη λειτουργία εφαρμογής (false):

var isPWAinBrowser = true; // αντικαταστήστε αυτόνομο με πλήρη οθόνη ή ελάχιστο ui σύμφωνα με το μανιφέστο σας εάν (matchMedia ('(display-mode: standalone)'). ταιριάζει) {// Android και iOS 11.3+ isPWAinBrowser = false; } αλλιώς εάν («αυτόνομο» στο πρόγραμμα πλοήγησης) {// χρήσιμο για το iOS 11.3 είναι τοPWAinBrowser =! navigator.standalone; }

Στη συνέχεια, εάν χρησιμοποιείτε ειδοποιήσεις push, μπορείτε να παρακολουθήσετε πολλά συμβάντα στο service service, όπως:

self.addEventListener («push», function (e) {// Track event: Push Message Received}); self.addEventListener («notificationclick», function (e) {// Track event: Push Message Clicked, μπορείτε να διαβάσετε το e.action.id για παρακολούθηση ενεργειών}); self.addEventListener («notificationclose», function (e) {// Παρακολούθηση συμβάντος: Push Message Dismissed});

05. Δημιουργήστε ένα συμβατό iOS PWA

Ενώ πολλοί πιστεύουν ότι η υποστήριξη PWA πρόκειται να προσγειωθεί για πρώτη φορά στο iOS 11.3, η αλήθεια είναι ότι η ιδέα - αν και με διαφορετικό όνομα - παρουσιάστηκε από τον Steve Jobs πριν από περισσότερα από δέκα χρόνια στο WWDC 07. Γι 'αυτό το iOS υποστήριξε την αρχική οθόνη και εφαρμογές εκτός σύνδεσης για λίγο, χρησιμοποιώντας τεχνικές παλαιού τύπου. Αλλά από το iOS 11.3, θα αρχίσει να υποστηρίζει τις ίδιες προδιαγραφές με το Android.

Εάν εξακολουθείτε να θέλετε να προσφέρετε μια εμπειρία εγκατάστασης πριν από το iOS 11.3, πρέπει να προσθέσετε μετα-ετικέτες ή να χρησιμοποιήσετε ένα polyfill που δημιουργήθηκε από αυτόν τον συντάκτη στη διεύθυνση https://github.com/firtman/iWAM

Τώρα το PWA σας θα είναι ικανό εκτός σύνδεσης και θα μπορεί να εγκατασταθεί σε iOS, ακόμη και αν δεν επιλέξετε το iOS. Είναι σημαντικό να κατανοήσετε ορισμένες διαφορές που ενδέχεται να επηρεάσουν την εμπειρία χρήστη PWA στο iOS:

1. Τα εικονίδια στο iOS πρέπει να είναι τετράγωνα και μη διαφανή για την αποφυγή προβλημάτων διεπαφής χρήστη. Μην χρησιμοποιείτε το ίδιο εικονίδιο που έχετε στο Android. Χρησιμοποιήστε 120x120 και 180x180 για iPhone.
2. Εάν διαθέτετε SPA ή συνδέετε με άλλες σελίδες στο πεδίο εφαρμογής σας, να είστε προσεκτικοί με την πλοήγηση, καθώς οι χρήστες iOS δεν έχουν τρόπο να επιστρέψουν ή να προωθήσουν εάν δεν παρέχετε συνδέσμους πλοήγησης στο περιβάλλον χρήστη σας. Οι κινήσεις σάρωσης δεν λειτουργούν σε PWA πλήρους οθόνης.
3. Από τις πρώτες εκδόσεις του iOS 11.3, το λειτουργικό σύστημα επαναφορτώνει PWA σε κάθε πρόσβαση στην εφαρμογή, οπότε αν ο χρήστης πρέπει να βγει από την εφαρμογή για να επιστρέψει αργότερα (για παράδειγμα, για μια αμφίδρομη διαδικασία ελέγχου ταυτότητας), θυμηθείτε Η εφαρμογή θα ξεκινήσει από την αρχή από προεπιλογή.

06. Συγχρονισμός δεδομένων στο παρασκήνιο

Οι υπάλληλοι υπηρεσιών έχουν έναν ξεχωριστό κύκλο ζωής από το παράθυρο PWA ή την καρτέλα του προγράμματος περιήγησης. Αυτός είναι ο λόγος για τον οποίο μπορείτε να πραγματοποιήσετε λειτουργίες δικτύου στο παρασκήνιο, ακόμα και αφού ο χρήστης κλείσει το PWA. Εάν υπάρχει εκκρεμή λειτουργία και δεν υπάρχει διαθέσιμη πρόσβαση στο δίκτυο σε αυτό το σημείο, ο κινητήρας θα μας επιτρέψει να επεξεργαστούμε ενώ στο παρασκήνιο αν εντοπιστεί κάποια σύνδεση αργότερα.

Το Background Sync API είναι προς το παρόν διαθέσιμο μόνο σε ορισμένα προγράμματα περιήγησης, επομένως πρέπει να παρέχετε ένα εναλλακτικό. Η ιδέα είναι ότι το PWA θα ορίσει μια σημαία με μια ετικέτα συμβολοσειράς, δηλώνοντας ότι πρέπει να κάνει λειτουργία συγχρονισμού φόντου.

navigator.serviceWorker.ready.then (λειτουργία (reg) {reg.sync.register («myTag»)});

Στη συνέχεια, στο ServiceWorker ακούμε την εκδήλωση, και αν είναι η ετικέτα, περιμένουμε να επιστρέψουμε μια υπόσχεση. Εάν η υπόσχεση εκπληρώνεται, τότε η λειτουργία επισημαίνεται ως ολοκληρωμένη. Αν όχι, θα συνεχίσει να προσπαθεί αργότερα στο παρασκήνιο.

self.addEventListener («sync», function (event) {if (event.tag === «myTag») {event.waitUntil (doAsyncOperationForMyTag ());}});

07. Κοινωνικά δίκτυα και ψευδο-προγράμματα περιήγησης

Εάν οι χρήστες σας μοιράζονται το περιεχόμενο PWA σε κοινωνικά δίκτυα ή εάν χρησιμοποιούν ψευδο-προγράμματα περιήγησης (προγράμματα περιήγησης χωρίς τη δική τους μηχανή, αλλά χρησιμοποιούν προβολές ιστού), πρέπει να γνωρίζετε ορισμένα ζητήματα.

Για παράδειγμα, το Facebook χρησιμοποιεί μια προβολή Web εντός των εφαρμογών Android και iOS για να προσφέρει μια εμπειρία περιήγησης εντός εφαρμογής όταν οι χρήστες κάνουν κλικ σε έναν σύνδεσμο. Στο Android, οι περισσότερες από τις προβολές Web δεν υποστηρίζουν τους εργαζόμενους υπηρεσιών και δεν μπορούν να εγκαταστήσουν το PWA σας, οπότε όταν ο χρήστης ανοίγει το περιεχόμενό σας από το Facebook, το PWA σας θα ενεργήσει σαν να είναι ένα μη συμβατό πρόγραμμα περιήγησης χωρίς προσωρινά αποθηκευμένα αρχεία ή λεπτομέρειες συνεδρίας .

Από το iOS 11.3 το WebView θα υποστηρίζει τους εργαζόμενους υπηρεσιών, αλλά θα είναι ένας κλώνος του ίδιου PWA που έχει χρησιμοποιήσει ο χρήστης στο Safari ή ακόμα και σε άλλα ψευδο-προγράμματα περιήγησης, όπως το Chrome ή το Firefox σε iOS.

Επομένως, εάν αποδίδετε ένα banner εγκατάστασης ή ένα παράθυρο διαλόγου υπόδειξης εγκατάστασης που εξηγεί την αξία της εγκατάστασης της εφαρμογής σας, ελέγξτε αν βρίσκεστε σε μια προβολή Web επειδή ο χρήστης δεν θα μπορεί να ακολουθήσει τα βήματά σας. Απόκρυψη αυτών των πληροφοριών ή προσκαλέστε το χρήστη να ανοίξει τη διεύθυνση URL στο προεπιλεγμένο πρόγραμμα περιήγησης. Αυτό ισχύει για άλλες εφαρμογές σε Facebook, Android, Facebook σε iOS, Chrome σε iOS και Firefox σε iOS. Το να κάνετε ζωντανό έλεγχο εάν βρίσκεστε σε WebView ή όχι είναι δύσκολο, αλλά υπάρχει διαθέσιμο βοηθητικό εργαλείο.

08. Δοκιμή σε συσκευές Android και εξομοιωτές

Ο δοκιμαστικός εργαζόμενος και το Web App Manifest απαιτεί https, με εξαίρεση το localhost. Ενώ η τοπική δοκιμή επιτραπέζιων υπολογιστών είναι μια χαρά αρχικά, σε ένα σημείο θέλουμε να δούμε τα PWA μας σε δράση σε συσκευές Android. Πώς μπορούμε να το κάνουμε αυτό; Η πρόσβαση σε έναν διακομιστή dev από το τηλέφωνό μας ή τον εξομοιωτή Android δεν θα λειτουργήσει επειδή δεν είναι https και δεν είναι τοπική φιλοξενία από άποψη λειτουργικού συστήματος Android.

Η λύση εμφανίζεται με τα Εργαλεία προγραμματιστών Chrome. Εάν μεταβούμε στο chrome: // επιθεωρήστε και ανοίξετε έναν εξομοιωτή ή μια πραγματική συσκευή με συνδεδεμένο εντοπισμό σφαλμάτων USB, θα είμαστε σε θέση να ενεργοποιήσουμε την προώθηση θύρας. Στη συνέχεια, το http: // localhost στη συσκευή μας Android θα προωθηθεί στο localhost του κεντρικού υπολογιστή μας ή σε οποιονδήποτε άλλο κεντρικό υπολογιστή. Με αυτό το τέχνασμα, το Android θα καταστήσει το PWA σωστά μέσω μιας μη ασφαλούς σύνδεσης. Έχετε υπόψη σας, ωστόσο, ότι ενώ το WebAPK θα δημιουργήσει το πακέτο και θα το εγκαταστήσει, ενδέχεται να μην λειτουργεί σε αυτόνομη λειτουργία.

09. Δημοσίευση σε καταστήματα

Ενώ η προσέγγιση PWA δεν ξεκίνησε έχοντας κατά νου τα καταστήματα, ορισμένες προσφορές, όπως το Twitter Lite και το Google Maps Go στο Play Store, άρχισαν να εξυπηρετούν PWA στα καταστήματα. Εάν αυτό είναι κάτι που σας ενδιαφέρει, για να διανείμετε το PWA σας χωρίς να το συσκευάσετε στην Cordova, οι διαθέσιμες επιλογές σας είναι:

• Microsoft Store: Μπορείτε να δημιουργήσετε ένα PWA για Windows 10 χρησιμοποιώντας το επίσημο εργαλείο από το pwabuilder.com
• Google Play Store: Κατά τη στιγμή της σύνταξης, οι αξιόπιστες δραστηριότητες Web που διατίθενται στο Canary Channel σάς επιτρέπουν να δημιουργήσετε μια εφαρμογή Android που ανοίγει μόνο ένα PWA που σας ανήκει και το διανέμει στο Store, δημιουργώντας μια παρόμοια λύση με το WebAPK. Μπορείτε να μάθετε περισσότερα εδώ.
• Apple App Store: Προς το παρόν δεν υπάρχουν επίσημες λύσεις για τη διανομή PWA, αλλά το WKWebView θα υποστηρίξει εργαζόμενους από το iOS 11.3, οπότε δεν θα είναι δύσκολο να δημιουργήσετε ένα απλό περιτύλιγμα για ένα PWA. Το ερώτημα είναι, θα το εγκρίνει η Apple στο Store; Η Apple δεν θέλει λύσεις που να είναι απλώς ιστότοποι με περιτύλιγμα.

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο τεύχος 304 του καθαρά, το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων. Αγοράστε το τεύχος 304 εδώ ή εγγραφείτε εδώ.