Προοδευτικές εφαρμογές ιστού - το μέλλον του σύγχρονου ιστού;

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

Πιστεύω ότι οι Προοδευτικές Web Apps είναι οι μέλλον των ιστοσελίδων - και στην ακόλουθη γράψιμο θα συζητήσω τα οφέλη και τις περιπτώσεις χρήσης για να σας δώσω ολόκληρη την εικόνα. Ας προχωρήσουμε σε αυτό.

Τι είναι οι Προοδευτικές Εφαρμογές Ιστού?

Ο όρος “Προοδευτικές εφαρμογές ιστού” δημιουργήθηκε για πρώτη φορά από τον Alex Rusell (προγραμματιστής του Google Chrome) και τον Frances Berriman (σχεδιαστής). Ο Alex μοιράστηκε την ιδέα του σχετικά με τις Προοδευτικές Εφαρμογές στο Web που “Αυτές οι εφαρμογές δεν είναι συσκευασμένες και αναπτυσσόμενες μέσω καταστημάτων, είναι απλά ιστοσελίδες που έλαβαν όλες τις σωστές βιταμίνες“.

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

Εφαρμογές Web έναντι Προοδευτικών Εφαρμογών Web

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

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

Γιατί χρειαζόμαστε προοδευτικές εφαρμογές ιστού?

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

Το Accelerated Mobile Pages (AMP), ένα έργο που ενθαρρύνεται από την Google, ξεκίνησε το 2016 στο επιλύσετε προβλήματα αργής σύνδεσης, ειδικά σε smartphones, και να προσφέρει καλύτερη εμπειρία χρήστη στους χρήστες κινητών τηλεφώνων. Ωστόσο, η AMP δεν επιλύει προβλήματα χωρίς προβλήματα δικτύου. Επίσης, δεν επιταχύνει το χρόνο φόρτωσης όσο και οι εφαρμογές και, πάλι, διαθέτει λίγους περιορισμούς για την επίτευξη αυτής της ταχύτητας.

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

Γιατί οι Προοδευτικές Εφαρμογές στο Διαδίκτυο έχουν νόημα?

Όπως καθορίζεται από την Έκθεση εφαρμογών για κινητά τηλέφωνα του 2017 της USA, οι χρήστες των εφαρμογών δαπανούν σχεδόν 77 τοις εκατό του χρόνου τους στις τρεις πρώτες εφαρμογές τους, ενώ οι υπόλοιπες εφαρμογές παραμένουν αδρανείς, αλλά εξακολουθούν να αποκλείουν τους πόρους του συστήματος, συμπεριλαμβανομένης της μνήμης. Επιπλέον, συμμερίζεται επίσης αυτό Το 50 τοις εκατό των χρηστών κατεβάζουν μηδέν εφαρμογές το μήνα. Το γεγονός αυτό υποδηλώνει ότι οι χρήστες διστάζουν να εγκαταστήσουν νέες εφαρμογές και έτσι η PWA έχει ένα πλεονέκτημα.

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

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

Προοδευτικές λειτουργίες Web Apps

Οι προοδευτικές εφαρμογές Web έχουν πολλές άμεσες λειτουργίες που τις καθιστούν διακριτές από τις απλούστερες αντίστοιχες, δηλαδή τις εφαρμογές ιστού (ή απλούστερες - ιστότοποι):

• Αποκριτικός. Εργαστείτε σε όλες τις συσκευές οποιουδήποτε μεγέθους οθόνης.
• Offline-πρώτα. Φορτώστε αργά ή δεν υπάρχει δίκτυο.
• App-like αίσθηση. Κοιτάξτε και αλληλεπιδράστε σαν μια εγγενή εφαρμογή.
• Ενημερωμένος. Ενημερώστε μόνοι τους, σχεδόν διαφανώς.
• Ασφαλής και ασφαλής. Χρησιμοποιήστε το HTTPS για να φορτώσετε πόρους σελίδας.
• Ανακαλύπτω. Διατηρήστε περιεχόμενο στις μηχανές αναζήτησης.
• Επανασυνδεθείτε. Επανασυνδέστε, για παράδειγμα χρησιμοποιώντας ειδοποιήσεις.
• Εγκατάσταση. Μπορεί να τοποθετηθεί στην αρχική σας οθόνη.
• Δυνατότητα σύνδεσης. Φορτώστε σελίδες που μοιάζουν με εφαρμογές, αλλά με διευθύνσεις URL.

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

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

Δημιουργία προοδευτικών εφαρμογών Web?

Η Google παρέχει ένα “Προοδευτική λίστα ελέγχου εφαρμογών Web” - μια λίστα λεπτομερειών που βοηθά τους αρχάριους να δημιουργούν προοδευτικές εφαρμογές ιστού. Αυτή η μη-οδηγός λίστα μοιράζεται το απαραίτητες λειτουργίες για τη δημιουργία PWA - ένα “PWA βάσης” και ένα “Παραδειγματική PWA”. ο πρώτος παραθέτει κρίσιμα πράγματα για μια βασική εφαρμογή και η δεύτερη για μια προηγμένη εφαρμογή.

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

Οι μελλοντικές εφαρμογές προοδευτικής εφαρμογής Ιστού?

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

Η Apple εισήγαγε χαρακτηριστικά PWA (API Web) στο Safari 11.1, συμπεριλαμβανομένων των Beacon API, των Υπηρεσιών Εργασίας, του Manifest για το Web App κ.λπ. φέρνοντας έτσι PWA σε iOS σύντομα, αν όχι ήδη. Η Google έχει ήδη υποστηρίξει PWA στο Chrome για Android και σχεδιάζει να την φέρει και σε επιτραπέζιες πλατφόρμες. Η Microsoft πρόσθεσε επίσης την υποστήριξη για τα PWA στο Microsoft Edge και θα τα καταγράψει και στο Microsoft Store.

Τι νομίζετε - είναι τα Προοδευτικά Web Apps το μέλλον? Ενημερώστε μας απευθείας στο @aksinghnet ή γράψτε ένα σχόλιο μέσω της παρακάτω ενότητας σχολίων για να αφήσετε την απάντησή σας.