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

Οι εφαρμογές μίας σελίδας (SPA) και οι εφαρμογές Progressive web (PWAs) φέρνουν επανάσταση στον ιστό. Είναι και οι δύο νέες τεχνολογίες που μοιάζουν παρόμοιες, αλλά δεν είναι. Στο πρόσωπο, οι άνθρωποι τις χρησιμοποιούν συχνά εναλλακτικά.

Ας ανακαλύψουμε τα βασικά χαρακτηριστικά και την αρχιτεκτονική καθενός από αυτά για να τα κατανοήσουμε καλύτερα.

Τι είναι οι εφαρμογές μίας σελίδας;

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

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

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

Έτσι, όταν πλοηγείστε σε ένα SPA, αναζητάτε προφορτωμένο περιεχόμενο σε ένα μόνο DOM και δεν επισκέπτεστε διαφορετικά DOM, όπως ίσως πιστεύετε εσφαλμένα.

Η διάσπαση ενός SPA σε ξεχωριστές ενότητες περιεχομένου συνήθως περιλαμβάνει την παροχή σε καθένα από αυτά μια διεύθυνση URL χρησιμοποιώντας προβολές JavaScript. ο σύνδεσμος δεδομένων Το σύνδεσμο συνδέει αυτές τις ενότητες με το κύριο DOM και σας επιτρέπει να έχετε πρόσβαση σε αυτά ασύγχρονα.

Αν και άλλες τεχνολογίες αρέσουν Μέντα και elm-spa έρχονται, το JavaScript εξακολουθεί να είναι η πιο κοινή γλώσσα προγραμματισμού για τη δημιουργία SPA.

Σχετιζομαι με: Πλαίσια JavaScript που αξίζει να μάθετε

Το JavaScript χρησιμοποιεί ένα async / περιμένετε Λειτουργία που σας επιτρέπει να φορτώνετε τόσο δυναμικό όσο και στατικό περιεχόμενο ασύγχρονα χωρίς μία είσοδο να εμποδίζει την έξοδο άλλου αιτήματος. Έτσι, τα SPA λειτουργούν σε σύστημα εισόδου-εξόδου (I / O) που δεν αποκλείει.

Τούτου λεχθέντος, τα πλαίσια JavaScript όπως ReactJS, Vue.js, AngularJS, Ember.js και Backbone.js όλα υποστηρίζουν την ταχεία ανάπτυξη των SPA. Για να ξεκινήσετε, μπορείτε να το δείτε επισκόπηση αρχαρίων για το Vue.js.

Επειδή παρέχει ταχύτητα, οι περισσότερες εταιρικές εφαρμογές έχουν υιοθετήσει την ιδέα να μετατρέψουν τους ιστότοπούς τους σε μία σελίδα. Το Netflix, το YouTube, το PayPal, το Facebook, το Instagram, το Twitter και το Pinterest είναι όλα παραδείγματα SPA.

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

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

Παρουσιάστηκε το 2015 από την Google, ο στόχος ενός PWA είναι να δημιουργήσει εφαρμογές που μιλούν άμεσα και προοδευτικά με τους χρήστες της. Στοχεύει να διατηρήσει τη ροή των χρηστών στην εφαρμογή, ακόμα και όταν υπάρχει κακή ή ανύπαρκτη σύνδεση δικτύου.

Αμετάβλητα, ένα PWA παρέχει όλα όσα χρειάζεστε με μια στιγμή. Δεν περνά από το τυπικό αρχικό χαρακτηριστικό φόρτωσης περιεχομένου ενός SPA.

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

Σχετιζομαι με: Τι είναι οι προοδευτικές εφαρμογές ιστού και πώς μπορείτε να εγκαταστήσετε ένα;

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

Εφαρμογές όπως το Spotify, το Slack και το Uber, μεταξύ άλλων, είναι παραδείγματα PWA.

Οι PWA έχουν γενικά έναν κοινό αρχιτεκτονικό κανόνα. Για να λειτουργεί ένα PWA όπως θα έπρεπε, πρέπει να έχει τα ακόλουθα χαρακτηριστικά:

1. Ενας εργάτης

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

Σχετιζομαι με: Πώς λειτουργεί η CPU Cache;

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

2. Ένα ασφαλές πλαίσιο

Ένας εργαζόμενος υπηρεσιών χρειάζεται ασφαλή σύνδεση (HTTPS) για την εμπιστευτικότητα του παραδοθέντος περιεχομένου. Όταν στέλνετε ένα αίτημα, ένας εργαζόμενος δημιουργεί ασφαλή επικοινωνία μεταξύ του PWA και του προγράμματος περιήγησης. Ένα ασφαλές πλαίσιο, επομένως, αποτρέπει παραβιάσεις της εμπιστευτικότητας όπως μια επίθεση man-in-the-middle (MITM) στα PWAs.

3. Ένα αρχείο εκδήλωσης εφαρμογής Web

Ένα μανιφέστο Ιστού είναι ένα αρχείο JSON που καθορίζει τα χαρακτηριστικά ενός PWA. Αναφέρει λεπτομερώς τις προϋποθέσεις για πρόσβαση, ανακάλυψη και χρήση του περιεχομένου ενός PWA. Περιλαμβάνει συνήθως το όνομα της εφαρμογής σας, τη διεύθυνση URL και τα στοιχεία της. Τελικά, ένα αρχείο δήλωσης περιέχει τις απαραίτητες πληροφορίες για να μετατρέψει την εφαρμογή ιστού σας σε εφαρμογή με δυνατότητα εγκατάστασης.

Ποιες είναι οι ομοιότητες μεταξύ PWA και SPA;

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

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

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

Οι βασικές διαφορές μεταξύ SPA και PWA

Τα PWA και τα SPA μπορεί να έχουν κοινά κοινά χαρακτηριστικά, αλλά είναι δύο διαφορετικά πράγματα. Ακολουθούν οι βασικές διαφορές χαρακτηριστικών που πρέπει να σημειώσετε:

Βασικά χαρακτηριστικά εφαρμογών μίας σελίδας

• Είναι προσβάσιμα μόνο μέσω του προγράμματος περιήγησης.
• Αν και δεν συνιστάται, μπορείτε να τα εξυπηρετήσετε μέσω ενός μη ασφαλούς δικτύου (HTTP).
• Δεν απαιτούν εργαζόμενους.
• Τα SPA δεν διαθέτουν αρχείο δήλωσης JSON, που σημαίνει ότι είναι απεγκατάστατα.
• Πρέπει να είναι μονής σελίδας.
• Δεν είναι προσβάσιμο όταν δεν υπάρχει δίκτυο.

Βασικά χαρακτηριστικά των Προοδευτικών Εφαρμογών Ιστού

• Η πρόσβαση σε αυτά μέσω του προγράμματος περιήγησης είναι μια επιλογή δεδομένου ότι είναι εγκατεστημένες.
• Όλα τα PWA χρειάζονται εργαζόμενους σέρβις και πρέπει να υποβάλλουν αιτήματα μέσω ενός ασφαλούς δικτύου (HTTPS).
• Οι απαντήσεις αποθηκεύονται προσωρινά και παραδίδονται μέσω α υπόσχεση αντικείμενο.
• Είναι προσβάσιμα ακόμη και αν δεν υπάρχει σύνδεση δικτύου.
• Είναι ταχύτερα από τα SPA.
• Έχουν πάντα ένα αρχείο δήλωσης, οπότε είναι διαθέσιμο για λήψη, δυνατότητα εγκατάστασης και εύκολα προσβάσιμο.
• Ένα PWA μπορεί να μην είναι εφαρμογή μιας σελίδας.

Τα SPA και τα PWA επηρεάζουν την παράδοση του ιστότοπου

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

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

Σύγχρονη εναντίον Ασύγχρονος προγραμματισμός: Πώς διαφέρουν;

Θα πρέπει να χρησιμοποιήσετε σύγχρονο ή ασύγχρονο προγραμματισμό για το επόμενο έργο σας; Μάθετε εδώ.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα