Τι είναι οι προοδευτικές εφαρμογές Ιστού και πώς μπορώ να εγκαταστήσω μία;

Τι είναι οι προοδευτικές εφαρμογές Ιστού και πώς μπορώ να εγκαταστήσω μία;

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





Τι ακριβώς είναι όμως μια Progressive Web App; Τι κάνει ένα PWA που δεν κάνει ένας ιστότοπος; Δείτε τι πρέπει να γνωρίζετε για τις προοδευτικές εφαρμογές ιστού.



Τι είναι μια προοδευτική εφαρμογή Ιστού;

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





Τι ορίζει ένα PWA, λοιπόν;

  • Παγκόσμιος : ένα PWA πρέπει να λειτουργεί απρόσκοπτα (καλά, σχεδόν) για κάθε χρήστη, ανεξάρτητα από το πρόγραμμα περιήγησής του.
  • Ευαίσθητος : Τα PWA πρέπει να λειτουργούν με οποιαδήποτε συσκευή, όπως φορητό υπολογιστή, tablet, smartphone και ούτω καθεξής.
  • Σχέδιο : ο σχεδιασμός θα πρέπει να μιμείται τις εγγενείς εφαρμογές για κινητά, που σημαίνει απλοποιημένα, εύχρηστα μενού, με απλή διαδραστικότητα για προηγμένες λειτουργίες.
  • Ασφαλής : Οι PWA πρέπει να χρησιμοποιούν HTTPS για να διατηρούν ασφαλή τα δεδομένα των χρηστών.
  • Ανακαλύψιμο: οι χρήστες μπορούν να βρουν PWA και είναι εύκολα αναγνωρίσιμοι ως εφαρμογή (και όχι ως «ιστότοπος»).
  • Σύμπλεξη: ένα PWA πρέπει να έχει πρόσβαση σε εγγενείς λειτουργίες αφοσίωσης, όπως ειδοποιήσεις push.
  • Ενημερώσεις: Τα PWA παραμένουν ενημερωμένα και εξυπηρετούν τις πιο πρόσφατες εκδόσεις μιας υπηρεσίας ή ενός ιστότοπου.
  • Εγκατάσταση: επιτρέπουν στους χρήστες να «εγκαθιστούν» εύκολα το PWA στην αρχική τους οθόνη χωρίς να χρειάζονται κατάστημα εφαρμογών.
  • Μοιρασιά: Τα PWA απαιτούν μόνο ένα μόνο URL για κοινή χρήση, χωρίς καμία εγκατάσταση.

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



Πώς λειτουργεί μια προοδευτική εφαρμογή Ιστού;

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

Ένας εργαζόμενος υπηρεσίας είναι ένα σενάριο που εκτελείται στο παρασκήνιο του προγράμματος περιήγησής σας, «χωριστά από μια ιστοσελίδα, ανοίγοντας την πόρτα σε λειτουργίες που δεν χρειάζονται ιστοσελίδα ή αλληλεπίδραση χρήστη». Μπορεί να χρησιμοποιείτε εργαζόμενους σε υπηρεσίες όπως ειδοποιήσεις push και συγχρονισμός φόντου προς το παρόν, αλλά το άμεσο μέλλον της PWA δίνει σε αυτά τα σενάρια μεγαλύτερη ισχύ.



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

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



Αλλά το κύριο πρόβλημα για τους προγραμματιστές είναι η έλλειψη άμεσης αλληλεπίδρασης με το πώς ακριβώς λειτουργεί το AppCache, σταματώντας τους προγραμματιστές να διορθώνουν με ακρίβεια ζητήματα καθώς αυτά προκύπτουν. Με τη σειρά τους, οι ιστότοποι και οι υπηρεσίες με πλήρη λειτουργικότητα εκτός σύνδεσης ήταν μια επικίνδυνη επιλογή.

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

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

Προοδευτική υποστήριξη προγράμματος περιήγησης στο Web

Υπάρχουν δύο απαιτήσεις για τη χρήση μιας Progressive Web App: ένα συμβατό πρόγραμμα περιήγησης και μια υπηρεσία με δυνατότητα PWA.

Αρχικά, ας δούμε τα προγράμματα περιήγησης. Έχετε δύο επιλογές για να ελέγξετε την υποστήριξη του προγράμματος περιήγησης PWA. Το πρώτο είναι του Jake Archibald Έτοιμος ο εργαζόμενος στην υπηρεσία ; που εμφανίζει χειροκίνητα την κατάσταση ετοιμότητας PWA των κύριων προγραμμάτων περιήγησης, καθώς και το διαδίκτυο της Samsung.

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

Ο πίνακας Can I Use Service Workers επιβεβαιώνει ότι όλα τα κύρια προγράμματα περιήγησης υποστηρίζουν PWA. Εικονογραφεί επίσης υποστηρίξεις PWA για πολλά εναλλακτικά προγράμματα περιήγησης για επιτραπέζιους υπολογιστές και προγράμματα περιήγησης για κινητά.

Αναλύοντας το λίγο περισσότερο:

  • Πρόγραμμα περιήγησης επιφάνειας εργασίας (Πλήρης υποστήριξη): Chrome, Firefox, Opera, Edge, Safari
  • Πρόγραμμα περιήγησης επιφάνειας εργασίας (Μερική υποστήριξη/παρωχημένη έκδοση): Πρόγραμμα περιήγησης QQ, πρόγραμμα περιήγησης Baidu
  • Πρόγραμμα περιήγησης για κινητά (Πλήρης υποστήριξη): Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
  • Πρόγραμμα περιήγησης για κινητά (Μερική υποστήριξη/ξεπερασμένη έκδοση): Πρόγραμμα περιήγησης QQ, πρόγραμμα περιήγησης Android, Opera Mobile

Έτσι, όλα τα μεγάλα προγράμματα περιήγησης υποστηρίζουν PWA. Το Microsoft Edge και το Safari είναι οι πιο πρόσφατες προσθήκες στην πλήρη λίστα υποστήριξης. Αντιστρόφως, τόσο το QQ Browser όσο και το Baidu Browser χρησιμοποιούν πλέον ξεπερασμένες εκδόσεις και ως εκ τούτου έχουν πέσει στη δεύτερη βαθμίδα.

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

Τώρα που ξέρετε ποιο πρόγραμμα περιήγησης να χρησιμοποιήσετε, μπορείτε να σκεφτείτε την αναζήτηση και εγκατάσταση ενός PWA. Για αυτό το παράδειγμα, θα χρησιμοποιήσω ένα Samsung Galaxy S8 με το Google Chrome.

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

Δείτε το παρακάτω βίντεο για να δείτε τι συμβαίνει όταν επισκέπτεστε το Ιστότοπος Twitter για κινητά Το

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

Πρώτη προσπάθεια outweb Το Παραθέτει μια αρκετά αξιοπρεπή σειρά PWA, με νέες επιλογές να εμφανίζονται συχνά. Στη συνέχεια, δοκιμάστε το pwa.rocks. Έχει μικρότερη επιλογή, αλλά μερικά εύχρηστα PWA που θέλετε να προσθέσετε στη συσκευή σας.

Επιπλέον, τον Ιανουάριο του 2019, το Chrome 72 για Android διατίθεται με Trusted Web Activity (TWA). Το TWA επιτρέπει στις καρτέλες του Chrome να ανοίγουν σε αυτόνομη λειτουργία. Με τη σειρά του, αυτό επιτρέπει στα PWA να εμφανίζονται στο κατάστημα εφαρμογών Google Play. Τα πρώτα PWA που εμφανίστηκαν στο Google Play ήταν Twitter Lite , Instagram Lite και Google Maps Go , με περισσότερες ρυθμίσεις να εμφανίζονται με την πάροδο του χρόνου.

Συλλογή εικόνων (2 εικόνες) Επεκτείνουν Επεκτείνουν Κλείσε

Θα αντικαταστήσουν οι προοδευτικές εφαρμογές Ιστού τις εγγενείς εφαρμογές;

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

Τουλάχιστον, όχι προς το παρόν.

Το κουμπί αρχικής λειτουργίας iphone 7 δεν λειτουργεί

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

  • Η Trivago σημείωσε αύξηση της αφοσίωσης κατά 150 % για τους χρήστες που προσθέτουν το PWA στην αρχική οθόνη.
  • Η αρχική σελίδα του Forbes «PWA» φορτώνεται πλήρως σε μόλις 0,8 δευτερόλεπτα, ενώ οι εμφανίσεις ανά επίσκεψη αυξάνονται κατά 10 τοις εκατό. Το PWA του Forbes είδε επίσης το μήκος των περιόδων σύνδεσης των χρηστών να διπλασιάζεται.
  • Το Twitter Lite σημείωσε αύξηση 65 % στις σελίδες ανά συνεδρία, με τεράστια αύξηση 75 % στα tweets. Είναι επίσης διαδραστικό 'σε λιγότερο από 5 δευτερόλεπτα μέσω 3G.'
  • Η Alibaba σημείωσε αύξηση 76 % στις μετατροπές για κινητά.

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

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Ένας αρχάριος οδηγός για την εμψύχωση του λόγου

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

Διαβάστε Επόμενο Σχετικά θέματα Σχετικά με τον Συγγραφέα Γκάβιν Φίλιπς(Δημοσιεύθηκαν 945 άρθρα)

Ο Gavin είναι ο Junior Editor για Windows and Technology Explained, τακτικός συνεργάτης του Really Useful Podcast και τακτικός αναθεωρητής προϊόντων. Έχει BA (Hons) Σύγχρονη Γραφή με Πρακτικές Artηφιακής Τέχνης που λεηλατήθηκαν από τους λόφους του Ντέβον, καθώς και πάνω από μια δεκαετία επαγγελματικής εμπειρίας συγγραφής. Απολαμβάνει άφθονο τσάι, επιτραπέζια παιχνίδια και ποδόσφαιρο.

Περισσότερα από τον Gavin Phillips

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή