Πώς να δημιουργήσετε μια Προοδευτική εφαρμογή Ιστού

Περιεχόμενο

• 01. Εξυπηρέτηση μέσω HTTPS
• 02. Δημιουργήστε ένα κέλυφος εφαρμογών
• 03. Καταχωρίστε έναν εργαζόμενο σέρβις
• 04. Προσθήκη ειδοποιήσεων push
• 05. Προσθέστε μια δήλωση εφαρμογής ιστού
• 06. Ρυθμίστε τη γραμμή εντολών εγκατάστασης
• 07. Αναλύστε την απόδοση της εφαρμογής σας
• 08. Ελέγξτε την εφαρμογή σας με το Lighthouse

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

Η εξυπηρέτηση τόσο σε χρήστες με γρήγορες συνδέσεις στη Σεούλ, όσο και σε χρήστες στην αγροτική Ινδία με ξεπερασμένο τηλέφωνο, είναι η τελευταία πρόκληση χρηστικότητας και οι Progressive Web Apps είναι η λύση.

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

• 10 βήματα για μια συναρπαστική εμπειρία χρήστη

Παρόλο που οι Προοδευτικές Εφαρμογές Ιστού προσφέρουν πολλά οφέλη και λειτουργικότητα στον Ιστό, δεν απαιτούν την επανεγγραφή ολόκληρης της εφαρμογής σας. Οποιαδήποτε εφαρμογή μπορεί να μετατραπεί σε PWA προσθέτοντας μερικά επιπλέον επίπεδα σε αυτήν.

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

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

01. Εξυπηρέτηση μέσω HTTPS

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

02. Δημιουργήστε ένα κέλυφος εφαρμογών

Το κέλυφος της εφαρμογής σας είναι το πρώτο πράγμα που φορτώνει - το πρώτο πράγμα που βλέπει ο χρήστης. Θα πρέπει να υπάρχει εξ ολοκλήρου στο έγγραφο ευρετηρίου HTML, με ενσωματωμένο CSS, για να διασφαλιστεί ότι εμφανίζεται όσο το δυνατόν γρηγορότερα και ότι ο χρήστης σας δεν κοιτάζει μια λευκή οθόνη για περισσότερο από το απαραίτητο. Το κέλυφος της εφαρμογής αποτελεί μέρος του προτύπου προοδευτικής βελτίωσης. Η εφαρμογή σας θα πρέπει να παρέχει στο χρήστη περιεχόμενο το συντομότερο δυνατό και, στη συνέχεια, να το βελτιώνει σταδιακά καθώς φορτώνουν περισσότερα δεδομένα (πιθανώς JavaScript).

Το παρακάτω παράδειγμα προέρχεται από μια εφαρμογή React.js. Στον χρήστη παρουσιάζεται ένα περίγραμμα της εφαρμογής και μια ένδειξη φόρτωσης στο index.html. Στη συνέχεια, μόλις φορτωθεί το JavaScript και εκκινήσει το React, η πλήρης εφαρμογή αποδίδεται μέσα στο κέλυφος.

! - index.html -> body> div id = "root"> div id = "container"> div> div id = "header"> img src = "/ asset / icon.png" alt = "logo" /> h1> Συνομιλία / h1> / div> div id = "loading-container"> img src = "/ asset / icon.png" alt = "logo" id = "loader" /> / div> / div> / div> / div> / body> // index.js ReactDOM.render (App />, document.getElementById ('root'));

03. Καταχωρίστε έναν εργαζόμενο σέρβις

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

Ευτυχώς, είναι πολύ εύκολο να ρυθμιστούν. Παρακάτω, ελέγχουμε πρώτα εάν το πρόγραμμα περιήγησης του χρήστη υποστηρίζει εργαζόμενους σε υπηρεσίες. Στη συνέχεια, εάν ναι, μπορούμε να προχωρήσουμε με την καταχώριση του αρχείου εργαζόμενου υπηρεσίας, που ονομάζεται εδώ υπηρεσία ‑ worker.js. Σημειώστε ότι δεν χρειάζεστε κάτι ιδιαίτερο μέσα σε αυτό το αρχείο σε αυτό το σημείο - μπορεί να είναι κενό.

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

script> if ('serviceWorker' στον πλοηγό) {window.addEventListener ('load', function () {navigator.serviceWorker.register ('service-worker.js'). τότε (function (registration) {// Η εγγραφή ήταν επιτυχής console.log ('Registered!');}, function (err) {// Η εγγραφή απέτυχε :( console.log ('ServiceWorker registration wrote:', err);}). catch (function (err) {console.log (err);});});} άλλο {console.log ("το service worker δεν υποστηρίζεται");} / script> // service-worker.js self.addEventListener ("install", function () {console .log ('Install!');}); self.addEventListener ("activate", event => {console.log ('Activate!');}); self.addEventListener ('fetch', function (event) { console.log ('Ανάκτηση!', event.request);});

04. Προσθήκη ειδοποιήσεων push

Οι υπάλληλοι υπηρεσιών επιτρέπουν στους χρήστες σας να λαμβάνουν ειδοποιήσεις push μέσω του διαδικτυακού API Push. Για πρόσβαση σε αυτό, μπορείτε να χρησιμοποιήσετε self.registration.pushManager από το αρχείο του εργαζόμενου υπηρεσίας. Δεδομένου ότι η αποστολή ειδοποιήσεων push βασίζεται σε μεγάλο βαθμό στη ρύθμιση του backend σας, δεν θα το βρούμε εδώ.

Εάν ξεκινάτε μια εφαρμογή από το μηδέν, η υπηρεσία Firebase της Google διαθέτει Firebase Cloud Messaging για σχετικά ανώδυνες ειδοποιήσεις push (θυμηθείτε: βεβαιωθείτε ότι διατηρείτε τα αρχεία σχεδίασης ασφαλή στον χώρο αποθήκευσης cloud). Ο παρακάτω κώδικας δείχνει πώς να εγγραφείτε για ειδοποιήσεις push μέσω του Push API.

navigator.serviceWorker.ready.then (function (registration) {if (! registration.pushManager) {alert ("No push notifications notification."); return false;} // Για εγγραφή "push notification" από το push manager registration.pushManager .subscribe ({userVisibleOnly: true // Να εμφανίζεται πάντα η ειδοποίηση όταν λαμβάνεται}). στη συνέχεια (λειτουργία (συνδρομή) {console.log ('Subscribed.');}) .catch (function (error) {console.log ('Subscription σφάλμα: ', σφάλμα);});})

05. Προσθέστε μια δήλωση εφαρμογής ιστού

Για να καταστήσετε την εφαρμογή σας με δυνατότητα εγκατάστασης, πρέπει να συμπεριλάβετε ένα manifest.json στον ριζικό κατάλογο της εφαρμογής. Μπορείτε να το θεωρήσετε αυτό ως περιγραφή της αίτησής σας, παρόμοιο με αυτό που μπορείτε να υποβάλετε στο App Store. Περιλαμβάνει εικονίδια, οθόνη splash, όνομα και περιγραφή.

Υπάρχει επίσης κάποια διαμόρφωση για τον τρόπο εμφάνισης της εφαρμογής σας όταν ξεκινά από την αρχική οθόνη του χρήστη: Θέλετε να εμφανίζεται η γραμμή διευθύνσεων στο πρόγραμμα περιήγησης ή όχι; Τι χρώμα θέλετε να είναι η γραμμή κατάστασης; Και ούτω καθεξής. Σημειώστε ότι ένα σωστό manifest.json θα πρέπει να περιλαμβάνει ένα πλήρες φάσμα μεγεθών εικονιδίων για διάφορες συσκευές. Ο παρακάτω κώδικας είναι μια προεπισκόπηση ορισμένων ιδιοτήτων που μπορεί να περιλαμβάνει το μανιφέστο σας.

{"short_name": "Chat", "name": "Chat", "icons": [{"src": "/ aset / icon.png", "size": "192x192", "type": "image / png "}]," start_url ":" /? utm_source = homescreen "," background_color ":" # e05a47 "," theme_color ":" # e05a47 "," display ":" αυτόνομο "}

06. Ρυθμίστε τη γραμμή εντολών εγκατάστασης

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

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

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

window.addEventListener ('Beforeinstallprompt', e => {console.log ('Beforeinstallprompt Event فائر'); e.preventDefault (); // Αποκρύψτε το συμβάν ώστε να μπορεί να ενεργοποιηθεί αργότερα. this.deferredPrompt = e; return false; }); // Όταν θέλετε να ενεργοποιήσετε το prompt: this.deferredPrompt.prompt (); this.deferredPrompt.userChoice.then (επιλογή => {console.log (επιλογή);}); this.deferredPrompt = null;

07. Αναλύστε την απόδοση της εφαρμογής σας

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

Για να γίνει αυτό, ένα χρήσιμο σύνολο μετρήσεων είναι το σύστημα RAIL. Το RAIL είναι αυτό που η Google αποκαλεί «μοντέλο απόδοσης με γνώμονα το χρήστη» - ένα σύνολο οδηγιών για τη μέτρηση της απόδοσης της εφαρμογής μας.

Το ακρωνύμιο σημαίνει Απόκριση (πόσο καιρό χρειάζεται για να ανταποκριθεί η εφαρμογή σας σε ενέργειες χρήστη), Κινούμενη εικόνα (διατηρώντας την ταχύτητα κίνησης στα 60fps), Αδράνεια (χρησιμοποιώντας χρόνο όταν η εφαρμογή σας δεν κάνει τίποτα άλλο για φόρτωση και προσωρινή αποθήκευση πρόσθετων στοιχείων) και Φόρτωση (φόρτωση της εφαρμογής σας σε ένα δευτερόλεπτο ή λιγότερο).

Ακολουθεί ένας πίνακας σημαντικών σημείων αναφοράς για τη φόρτωση εφαρμογών, όπως παρέχεται από την Meggin Kearney, συγγραφέα τεχνολογίας στο Google Web Fundamentals.

08. Ελέγξτε την εφαρμογή σας με το Lighthouse

Η Google είναι ο μεγαλύτερος πρωταθλητής που προωθεί το Progressive Web Apps ως το μέλλον του ιστού. Ως εκ τούτου, έχει παράσχει ένα χρήσιμο εργαλείο για την καθοδήγηση της ανάπτυξης PWA σας.

Παλαιότερα ονομαζόταν Lighthouse και παρέχεται ως επέκταση Chrome, από το Chrome 60 αποτελεί μέρος των Chrome DevTools, στην καρτέλα «Έλεγχοι». Αυτό που κάνει το Lighthouse εκτελεί την εφαρμογή σας υπό διαφορετικές συνθήκες και μετρά την απόκριση και την επιτυχία του σύμφωνα με τις οδηγίες PWA. Στη συνέχεια, σας δίνει μια βαθμολογία από 100. Μπορεί επίσης να βαθμολογήσει την εφαρμογή σας σε βέλτιστες πρακτικές ιστού ταυτόχρονα.

Το ακόλουθο κείμενο είναι μια λίστα με τις τιμές που μετρήθηκαν από το φάρο. Σε χρήση εμφανίζεται επίσης περιγραφή.

• Καταχωρεί έναν εργαζόμενο σέρβις
• Απαντά με 200 όταν είστε εκτός σύνδεσης
• Περιέχει κάποιο περιεχόμενο όταν το JavaScript δεν είναι διαθέσιμο
• Χρησιμοποιεί HTTPS
• Ανακατευθύνει την κίνηση HTTP σε HTTPS
• Η φόρτωση σελίδας είναι αρκετά γρήγορη σε 3G
• Μπορεί να ζητηθεί από τον χρήστη να εγκαταστήσει την εφαρμογή Web
• Διαμορφώθηκε για μια προσαρμοσμένη οθόνη splash
• Η γραμμή διευθύνσεων ταιριάζει με τα χρώματα της μάρκας
• Εχει ένα meta name = "viewport"> ετικέτα με πλάτος ή αρχική κλίμακα
• Το περιεχόμενο έχει σωστό μέγεθος για τη θύρα προβολής

Αυτό το άρθρο δημοσιεύτηκε αρχικά στο Web Designer. εγγραφείτε εδώ.