Εισαγωγή στις προοδευτικές εφαρμογές ιστού

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

Αλλά, τι ακριβώς είναι διαφορά μεταξύ ενός τυπικού και ένα προοδευτικός εφαρμογή ιστού?

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

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

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

Προοδευτικές εφαρμογές ιστού (ή PWA) επωφεληθείτε από τα API περιήγησης ιστού για να δημιουργήσετε εμπειρίες εγγενούς εφαρμογής απευθείας στο πρόγραμμα περιήγησης σε οποιαδήποτε συσκευή.

Τελικά, οι Προοδευτικές Εφαρμογές Web περιλαμβάνουν a τεχνολογίες που οι προγραμματιστές μπορούν να χρησιμοποιήσουν για να δημιουργήσουν ισχυρές μητρικές εφαρμογές. Πολλοί προέρχονται από API ιστού Όπως API Εργαζομένων Υπηρεσιών ή το Πατήστε API.

Υπάρχουν αρκετές απαιτήσεις για να καλέσετε κάτι PWA αλλά αυτά είναι τα πιο σημαντικές:

• Είναι πλήρως κινητό.
• Δεσμεύεται προοδευτική βελτίωση.
• Ικανός να εγκαταστήστε τοπικά σε smartphones και δισκία.
• Λειτουργεί εκτός σύνδεσης χωρίς Διαδίκτυο, χρησιμοποιώντας εργαζόμενους στις υπηρεσίες.
• Διαχωρίζει το περιεχόμενο από τη λειτουργικότητα χρησιμοποιώντας το κέλυφος εφαρμογής.
• Συνδέει το HTTPS για μεγαλύτερη ασφάλεια.
• Ανακαλύπτω στην αναζήτηση Google.
• Έχει δυναμικές σελίδες που μοιάζουν με εφαρμογές αλλά κάθε ένα ακόμα έχει τη δική του διεύθυνση URL.

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

Ας εμβαθύνουμε στις βασικές αρχές των Προοδευτικών Εφαρμογών Ιστού και να μάθουμε τι τους κάνει να κρύβονται.

Εργάτες υπηρεσιών

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

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

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

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

Αν ελπίζετε να δημιουργήσετε μια προοδευτική εφαρμογή στο Web ξεκινήστε με το Service Worker API. Απλά βάλτε το σε αυτό και ξεκινήστε μια απλή επίδειξη σε τοπικό επίπεδο. Αυτό θα θέσει τις βάσεις για αργότερα δημιουργώντας προσαρμοσμένες λειτουργίες και σελίδες εφαρμογών που όλοι τρέχουν μέσω των εργαζομένων στις υπηρεσίες.

Για οδηγούς για αρχάριους και λεπτομερή αποσπάσματα κώδικα, Συστήνω συγκεκριμένα αυτούς τους πόρους:

• Ξεκινώντας με τους εργαζόμενους στις υπηρεσίες
• Ξεκινώντας με τους Υπεύθυνους Υπηρεσίας
• Δείγμα Εργάτη Υπηρεσίας: Προσαρμοσμένο δείγμα σελίδας χωρίς σύνδεση

Το κέλυφος της εφαρμογής

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

Αυτό κρατάει με το ίδιο “μητρική εφαρμογή” συναίσθημα όπου το η διασύνδεση παραμένει πάντα ορατή αλλά το το περιεχόμενο / η λειτουργικότητα φορτώνει διαφορετικά κάθε φορά. Ανατρέξτε στη σελίδα αυτή στον ιστότοπο Google Developers για να μάθετε περισσότερα για το μοντέλο κελύφους εφαρμογής.

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

Συνήθως, το κέλυφος εφαρμογής έχει αυτά βασικά στοιχεία:

• Κορυφαίες συνδέσεις της γραμμής πλοήγησης.
• Κουμπί ανανέωσης (προαιρετικό).
• Δοχείο φόντου σελίδας.

Μπορείτε να βρείτε μια ωραία περίπτωση περίπτωσης εδώ Η αρχιτεκτονική κελύφους I / O Progressive Web App. Προσφέρουν επίσης μερικές συμβουλές για την οικοδόμηση της αρχιτεκτονικής του κελύφους σας, την προσωρινή αποθήκευση, και τραβώντας το αυτόματα για κάθε σελίδα.

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

Υποστήριξη σε απευθείας σύνδεση και εκτός σύνδεσης

Οι περισσότερες εγγενείς εφαρμογές εκτελέστε πρόστιμο χωρίς Διαδίκτυο. Οι προοδευτικές εφαρμογές Web προορίζονται να ακολουθήσουν την ίδια συμπεριφορά.

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

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

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

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

Ζωντανά παραδείγματα

Μελετώντας live PWAs και βλέποντας πώς λειτουργούν είναι ένας πολύ καλός τρόπος για να μάθουν. Ωστόσο, η αγορά Progressive App είναι εξακολουθεί να εμφανίζεται, Τόσοι πολλοί από τους καλύτερους είναι διάσπαρτα σε διάφορες γωνιές του Διαδικτύου.

Αλλά, χάρη στο PWA gallery gallery, Έχω επιμεληθεί μερικά εκπληκτικά παραδείγματα για να δείξω τι μπορούν να κάνουν πραγματικά οι PWAs.

1. Μετατροπέας νομισμάτων

Αυτό είναι αρκετά απλό Μετατροπέας νομίσματος λαμβάνει τις συναλλαγματικές ισοτιμίες και υπολογίζει το ρεύμα διαφορές μεταξύ ενός τόνου νομισμάτων παγκοσμίως.

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

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

2. Αγγλικές επισημάνσεις

Απλώς λατρεύω αυτή την εφαρμογή Ιστού επειδή είναι τόσο μοναδική και απίστευτα καλά σχεδιασμένη. ο Αγγλικά Χάρτης με τις επισημάνσεις καθαρίζει τα βίντεο online όπου οι άνθρωποι φέρουν έμφαση από συγκεκριμένες περιοχές των ΗΠΑ και του Ηνωμένου Βασιλείου.

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

Τα εσωτερικά λειτουργούν Αντιδράστε / Redux με Firebase και ένα Σύνδεση API στους Χάρτες Google. Σίγουρα ένα εξαιρετικό παράδειγμα κάτι αρκετά απλό για αρχάριους να σπουδάσουν και να μάθουν.

3. Pokedex.org

Ένα άλλο αρκετά απλό PWA είναι αυτό Εφαρμογή Pokedex δημιουργήθηκε από τον Nolan Lawson. Επίσης δημοσίευσε αυτόν τον κώδικα ελεύθερα στο GitHub, γι 'αυτό είμαστε ακόμα ένα άλλο έργο που είναι αξίζει να περιπλανηθείτε και να σπουδάσετε.

Δεδομένου ότι αυτά τα δεδομένα μπορούν να παραμείνουν στατικά, είναι χειρίζεται μέσω ενός τοπικού κινητήρα που ονομάζεται PouchDB. Όλα τα δεδομένα προέρχονται από το PokeAPI και στη συνέχεια αποθηκεύονται ως απλό JavaScript. Αυτό σημαίνει ότι μπορείτε αποθηκεύστε την τοπικά στο τηλέφωνό σας όπως μια πραγματική εγγενή εφαρμογή και θα τρέξει με ή χωρίς πρόσβαση στο Internet. Αρκετά δροσερό, σωστά?

Το όλο θέμα είναι powered by JavaScript, έτσι είναι μια απόδειξη για το πόσο μπορείτε να κάνετε με τον κωδικό frontend. Χρησιμοποιεί πολύ caching με το Service Worker API, έτσι είναι τρελός γρήγορος και εξαιρετικά εύκολος στη χρήση.

4. Flipkart

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

Του πλήρως απόκριση και φορτώνει σελίδες δυναμικά. Οι διευθύνσεις URL σελίδας επισυνάπτονται στο πρόγραμμα περιήγησης, ώστε να μπορείτε να τις αντιγράψετε / επικολλήσετε και να τις μοιραστείτε με έναν τυπικό ιστότοπο.

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

Και, ενώ δεν μπορούσα να βρω ένα repo για ολόκληρο τον πηγαίο κώδικα Flipkart, υπάρχει a Σελίδα Flipkart στο GitHub με μικρότερα αποσπάσματα κώδικα από την ομάδα προγραμματιστών τους.

Μάθετε περισσότερα

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

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

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

• Οδηγός για αρχάριους για προοδευτικές εφαρμογές ιστού
• Δημιουργήστε την πρώτη σας προοδευτική εφαρμογή Ιστού με το React
• Δημιουργώντας μια προοδευτική εφαρμογή Web με πολυμερές