Θέλετε να δημιουργήσετε προοδευτικές εφαρμογές Web με βάση το WordPress και το WooCommerce; Δείτε πώς (με παραδείγματα κώδικα)

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


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

Λοιπόν, η Google πιστεύει ότι είναι η τελευταία. Και ελάτε Progressive Web Apps!

Η ανάρτηση που πρόκειται να διαβάσετε είναι μια άλλη έκδοση της δικής μας "μέσα στο σπίτι του dev" πρωτοβουλία (εδώ είναι η προηγούμενη). Συγκεντρώθηκε από την Alexandra Anghel του Appticles.com.

Μπείτε στην Αλεξάνδρα:

Προοδευτικές εφαρμογές Ιστού σε WordPress και WooCommerce

Κατανόηση των προοδευτικών εφαρμογών ιστού

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

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

Η Google τα περιγράφει ως:

  • Αξιόπιστος – Φορτώστε αμέσως
  • Γρήγορα – Απαντήστε γρήγορα στις αλληλεπιδράσεις των χρηστών
  • Ελκυστικός – Συμπεριφορά σαν μια εγγενής εφαρμογή

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

  • Εργαστείτε εκτός σύνδεσης ή σε κακές συνθήκες δικτύου
  • Εφαρμογή ιστού Εγκαταστήστε πανό ή Προσθήκη στην αρχική οθόνη
  • Χρησιμοποιήστε τις ειδοποιήσεις προώθησης ιστού. Με την εισαγωγή του Web Push API, μπορούμε πλέον να στέλνουμε ειδοποιήσεις push στους χρήστες μας, ακόμα και όταν το πρόγραμμα περιήγησης είναι κλειστό.
  • Εφαρμογή HTTPS
  • Χρησιμοποιήστε μια αρχιτεκτονική κελύφους εφαρμογών (ή κελύφους εφαρμογών) που φορτώνει αμέσως στις οθόνες των χρηστών, παρόμοιες με τις εγγενείς εφαρμογές.

Στην ουσία, ένα PWA είναι μια Εφαρμογή Μίας Σελίδας γραμμένη σε JavaScript. Η λειτουργία εκτός σύνδεσης, η Προσθήκη στο Homescreen και οι Ειδοποιήσεις προώθησης Ιστού εφαρμόζονται με χρήση εργαζομένων σέρβις.

Progressive Web Apps εναντίον Responsive Web Design

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

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

Είναι οι PWA ως η λύση για την προσέλκυση χρηστών ιστού για κινητά?

Η δημιουργία μιας υψηλής ποιότητας Progressive Web App έχει απίστευτα οφέλη, καθιστώντας εύκολη την ευχαρίστηση των χρηστών, την αύξηση της αφοσίωσης και την αύξηση των μετατροπών. Υπάρχουν πολλά παραδείγματα εταιρειών, ιδίως από τη βιομηχανία ηλεκτρονικού εμπορίου, που έχουν χρησιμοποιήσει επιτυχώς τις Προοδευτικές Εφαρμογές Ιστού για να βελτιώσουν τις μετρήσεις τους, πολλά από αυτά αναφέρονται στον ιστότοπο Google Developers.

  • Για παράδειγμα, το Alibaba.com δημιούργησε ένα PWA που οδήγησε σε μια γρήγορη, αποτελεσματική και αξιόπιστη εμπειρία ιστού για κινητά. Η νέα στρατηγική παρουσίασε αύξηση 76% σε συνολικές μετατροπές σε προγράμματα περιήγησης και τέσσερις φορές υψηλότερο ποσοστό αλληλεπίδρασης από το Add to Homescreen.
  • Σε μια άλλη περίπτωση χρήσης, η OLX ήθελε να προσελκύσει εκ νέου τους χρήστες ιστού για κινητά χρησιμοποιώντας το Add to Homescreen και το Push Notifications. Αυτοί αυξημένη αφοσίωση κατά 250% και βελτιώθηκαν και άλλες μετρήσεις: ο χρόνος έως ότου η σελίδα έγινε διαδραστική μειώθηκε κατά 23%, με αντίστοιχη μείωση κατά 80% στα ποσοστά εγκατάλειψης. Η δημιουργία εσόδων βελτιώθηκε επίσης, με την αναλογία κλικ προς αριθμό εμφανίσεων (CTR) να αυξάνεται 146%.

Πώς γνωρίζουμε ότι μια εφαρμογή ιστού για κινητά είναι προοδευτική?

Πρώτα απ ‘όλα, το να είσαι προοδευτικός είναι μια βαθμολογία, όχι ναι ή όχι και υπάρχει μια προσθήκη Chrome που ονομάζεται Φάρος που μπορείτε να χρησιμοποιήσετε για να μετρήσετε αυτό το σκορ. Αυτό το πρόσθετο είναι πραγματικά εύκολο στη χρήση και δημιουργεί μια αναφορά με όλες τις δυνατότητες PWA, βασικά μας ενημερώνει τι πρέπει να αλλάξουμε για να γίνει μια εφαρμογή ιστού πλήρως προοδευτική. Για την έκδοση alpha του WooCommerce PWA, καταφέραμε να κερδίσουμε 91 στο Lighthouse.

Φάρος

Πώς μπορούμε να οικοδομήσουμε ένα PWA?

Το πρότυπο PWA της Google δεν περιλαμβάνει συγκεκριμένη τεχνολογία ή πλαίσιο για τη δημιουργία Progressive Web Apps. Μπορεί να είναι οτιδήποτε ακολουθεί τη λίστα ελέγχου. Πολλά PWA κατασκευάζονται χρησιμοποιώντας Γωνιακό JS ή Αντιδρώ, που είναι τα πιο δημοφιλή πλαίσια JavaScript αυτή τη στιγμή.

αντιδρώ

Τόσο το AngularJS όσο και το React έχουν τα πλεονεκτήματά τους:

  • Η γωνιακή / ιωνικός Ο συνδυασμός είναι αρκετά δημοφιλής στις μέρες μας. Το Ionic είναι ένα εξαιρετικό πλαίσιο που δημιουργήθηκε αρχικά για εφαρμογές για κινητά, αλλά έχει επεκταθεί σε Progressive Web Apps και ακόμη και σε εφαρμογές για επιτραπέζιους υπολογιστές.
  • Το React είναι πραγματικά διαισθητικό και κατανοητό. Επωφελείται από μια εξαιρετική εφαρμογή boilerplate, create-react-app, η οποία έρχεται από προεπιλογή με υποστήριξη PWA.

Εκτός από αυτά τα δύο, VueJS κερδίζει επίσης δημοτικότητα.

Στη συνέχεια, θα δούμε μερικά δείγματα κώδικα από μια εφαρμογή ηλεκτρονικού εμπορίου που δημιουργήθηκε με το React πάνω από το WordPress και το WooCommerce API REST.

Μπορεί επίσης να σας ενδιαφέρει αυτά τα άρθρα:

  • Καλύτερα πρότυπα γωνιακού πίνακα ελέγχου διαχειριστή

Κατανόηση του WooCommerce REST API

Όταν πρόκειται για τη δημιουργία μιας εφαρμογής ηλεκτρονικού εμπορίου, το πρώτο πράγμα που χρειαζόμαστε είναι ένα API από το οποίο μπορούμε να ανακτήσουμε τα δεδομένα. Ευτυχώς, η συμπερίληψη του REST API στον πυρήνα άνοιξε την πόρτα για τη χρήση του WordPress ως backend. Επιπλέον, για εφαρμογές ηλεκτρονικού εμπορίου μπορούμε να χρησιμοποιήσουμε το REST API από το δημοφιλές πρόσθετο WooCommerce.

Το WooCommerce διαθέτει επίσης πακέτο NPM (API WooCommerce) για την πραγματοποίηση κλήσεων API, αλλά δυστυχώς αυτό το πακέτο απαιτεί τόσο το κλειδί καταναλωτή όσο και το μυστικό του καταναλωτή για τον έλεγχο ταυτότητας αιτημάτων. Θα είχαμε ένα πρόβλημα ασφάλειας εάν χρησιμοποιούσαμε το μυστικό καταναλωτή σε μια εφαρμογή frontend.

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

Έτσι, έπρεπε να δημιουργήσουμε έναν διακομιστή μεσολάβησης στο WordPress plugin, που επιτρέπει την πρόσβαση σε ένα περιορισμένο σύνολο τελικών σημείων API. Ως βάση, χρησιμοποιήσαμε το περιτύλιγμα WooCommerce REST API PHP, όπως μπορείτε να δείτε στο παρακάτω παράδειγμα:

Ενεργοποιήστε τον κωδικό Ουσία.

Αρχικοποιήσαμε αρχικά τον πελάτη WooCommerce χρησιμοποιώντας το κλειδί και το μυστικό του καταναλωτή. Η δεύτερη και η τρίτη μέθοδος δημιουργούν μια προσαρμοσμένη διαδρομή που ονομάζεται προϊόντα και χαρτογραφούν τη διαδρομή προς το τελικό σημείο των προϊόντων / κατηγοριών από το WooCommerce API.

Με αυτόν τον τρόπο, μπορούμε να επιτρέψουμε την πρόσβαση σε κατηγορίες και προϊόντα ανάγνωσης, αλλά επιτρέπουμε μόνο τη λειτουργία δημιουργίας για μια παραγγελία.

Δημιουργία νέας εφαρμογής React σε τέσσερα απλά βήματα

Μόλις δημιουργήσουμε το API, μπορούμε να αρχίσουμε να δουλεύουμε στην εφαρμογή React. Μετά την εγκατάσταση NodeJS και NPM παγκοσμίως, μπορείτε να χρησιμοποιήσετε το πακέτο create-react-app για να δημιουργήσετε γρήγορα μια εφαρμογή React JS που έχει υποστήριξη PWA από προεπιλογή.

  1. Εγκαθιστώ NodeJS και NPM παγκοσμίως
  2. Εγκαθιστώ δημιουργία-αντίδραση-εφαρμογή βραστήρα
    npm εγκατάσταση create-react-app -g
  3. Παράγω νέα εφαρμογή React
    create-react-app my-app
  4. Ξεκινήστε την εφαρμογή
    cd my-app & έναρξη npm

Ακολουθεί ένα στιγμιότυπο οθόνης της εφαρμογής που δημιουργείται από την εφαρμογή create-react-app, έχει όλα όσα χρειαζόμαστε, ώστε να μπορέσουμε να ξεκινήσουμε την κωδικοποίηση, συμπεριλαμβανομένης της ζωντανής επαναφόρτωσης:

δείγμα εφαρμογή αντίδρασης

Υπάρχουν μερικά πράγματα που πρέπει να θυμάστε όταν ξεκινάτε μια νέα εφαρμογή:

1) Οργάνωση αρχείων εφαρμογής
Υπάρχουν πολλά καλά μαθήματα εκεί έξω για το πώς να δομήσετε καλύτερα την εφαρμογή. Προτιμώ φακέλους ανά χαρακτηριστικό, γιατί επιτρέπει καλύτερη επεκτασιμότητα. Μπορείτε να βρείτε ένα πολύ καλή εξήγηση εδώ.
2) Πρότυπα Linters και κωδικοποίησης
Τα πρότυπα κωδικοποίησης μπορεί να είναι ενοχλητικά εάν δεν είστε συνηθισμένοι σε αυτά, αλλά Μην παραλείψετε αυτό το βήμα. Βοηθούν στην εκκαθάριση των αχρησιμοποίητων εξαρτήσεων και διασφαλίζουν ότι τα δεδομένα έχουν επικυρωθεί σωστά σε επίπεδο στοιχείου. Επιπλέον, αν εγκαταστήσετε ένα πιο όμορφο πρόγραμμα επεξεργασίας που διαμορφώνει αυτόματα τον κώδικά σας, η χρήση των προτύπων κωδικοποίησης γίνεται πολύ εύκολη. Όσο για το ίδιο το πρότυπο, προτιμώ το δημοφιλές δημιουργήθηκε από την Airbnb.
3) Μικρά εξαρτήματα
Η διατήρηση μικρών αρχείων στοιχείων καθιστά ευκολότερο τον έλεγχο και τη διαχείριση. Μπορείτε να ξεκινήσετε τη σύνταξη κώδικα σε ένα μόνο στοιχείο και, μόλις μεγαλώσει, διαιρέστε τον σε μικρότερο στοιχείο. Για στοιχεία UI / UX, υπάρχουν πολλές βιβλιοθήκες που είναι συμβατές με το React, όπως Υλικό UI, Σημασιολογική διεπαφή χρήστη ή ακόμη και Μπότα, για να δώσω μερικά παραδείγματα.

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

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

παράδειγμα εφαρμογής ηλεκτρονικού εμπορίου

Κατάδυση στο ReactJS

Ακολουθεί ένα στοιχείο React που διαβάζει ένα σύνολο κατηγοριών προϊόντων από το API. Η κατάσταση του στοιχείου αρχικοποιείται με μια κενή λίστα κατηγοριών. Στη μέθοδο componentWillMount που καλείται αυτόματα από την React πριν από την απόδοση, υποβάλλουμε ένα αίτημα για ανάκτηση των κατηγοριών και τις προσθέτουμε στην κατάσταση αφού λάβουμε την απάντηση:

Ενεργοποιήστε τον κωδικό Ουσία.

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

Ενεργοποιήστε τον κωδικό Ουσία.

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

Όλα αυτά τα στοιχεία επικοινωνούν περνώντας στηρίγματα μεταξύ τους. Το κύριο συστατικό κατηγοριών καλεί το API και μεταβιβάζει μια λίστα κατηγοριών στο ListList, το οποίο με τη σειρά του μεταφέρει τις λεπτομέρειες μιας κατηγορίας στις κάρτες κατηγορίας.

Διαχείριση της καθολικής κατάστασης εφαρμογών χρησιμοποιώντας το Redux

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

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

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

Ας δούμε πώς μπορούμε να διαβάσουμε προϊόντα από το API και να τα αποδώσουμε σε μια λίστα, παρόμοια με αυτά που χρειαζόμαστε με κατηγορίες, αλλά αυτή τη φορά χρησιμοποιώντας το Redux. Πρώτον, πρέπει να κάνουμε τη σύνδεση με το Redux τυλίγοντας το κύριο συστατικό της εφαρμογής μας σε ένα παγκόσμιο κατάστημα:

Ενεργοποιήστε τον κωδικό Ουσία.

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

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

Παρακάτω, έχουμε προσθέσει επίσης μια συνάρτηση που ονομάζεται fetchProducts. Όπως μπορείτε να δείτε, αυτή η λειτουργία:

  • αποστέλλει την ενέργεια των προϊόντων αιτήματος,
  • καλεί το API για την ανάκτηση προϊόντων,
  • αποστέλλει την ενέργεια ReceProducts όταν λαμβάνεται ένα αποτέλεσμα.

Ενεργοποιήστε τον κωδικό Ουσία.

Για να τροποποιήσετε την κατάσταση της εφαρμογής, θα προσθέσουμε το λεγόμενο Redux "περιστέλλων". Ο μειωτής είναι απλώς μια λειτουργία που ακούει συγκεκριμένες ενέργειες και αλλάζει ένα τμήμα της παγκόσμιας κατάστασης, στην περίπτωση αυτή η λίστα των προϊόντων.

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

Ενεργοποιήστε τον κωδικό Ουσία.

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

Ενεργοποιήστε τον κωδικό Ουσία.

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

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

Ενεργοποιήστε τον κωδικό Ουσία.

Μέχρι στιγμής, έχουμε δει μερικά παραδείγματα σχετικά με τον τρόπο εμφάνισης δεδομένων, αλλά τι γίνεται αν θέλουμε να προσθέσουμε αλληλεπίδραση χρήστη, για παράδειγμα προσθήκη προϊόντος στο καλάθι?

Σε αυτήν την περίπτωση, όταν ο χρήστης κάνει κλικ στο "Προσθήκη στο καλάθι" κουμπί, θα στείλουμε μια ενέργεια που θα τροποποιήσει την παγκόσμια κατάσταση εφαρμογής. Η γραμμή κεφαλίδας, η οποία εμφανίζει τον αριθμό των προϊόντων καλαθιού αγορών, θα συνδεθεί με το Redux. Θα μετρήσει τον αριθμό των προϊόντων που έχουν αποθηκευτεί στο καλάθι της εφαρμογής και θα ενημερωθεί αναλόγως.

προσθήκη στο καλάθι

Σύνδεση της εφαρμογής με το WordPress

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

Λοιπόν, μπορούμε να φιλοξενήσουμε την εφαρμογή σε έναν υποτομέα και να την αφήσουμε να συνδεθεί με το API ή μπορούμε να την χρησιμοποιήσουμε ως θέμα WordPress – που σημαίνει τη δημιουργία ενός πολύ βασικού θέματος με ένα αρχείο index.php που θα φορτώνει απλά ένα αρχείο JavaScript / CSS. Το boilerplate create-react-app περιλαμβάνει εντολές για τη δημιουργία του build της εφαρμογής, ώστε να μπορούμε να λάβουμε τα αρχεία παραγωγής αμέσως.

Ενεργοποιήστε τον κωδικό Ουσία.

Πού να χρησιμοποιήσετε εργαζόμενους σέρβις

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

Ενεργοποιήστε τον κωδικό Ουσία.

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

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

Εάν θέλετε να προχωρήσετε ακόμη περισσότερο και να ξεκινήσετε την προσωρινή αποθήκευση των δεδομένων που προέρχονται από το API, μπορείτε να χρησιμοποιήσετε πακέτα NPM όπως redux-persist και να τροποποιήσετε την εφαρμογή σας για να αποθηκεύσετε / ανακτήσετε δεδομένα από τον τοπικό χώρο αποθήκευσης του προγράμματος περιήγησης.

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

Τι έπεται?

Μπορείς βρες το επίδειξη για το παραπάνω WooCommerce PWA εδώ.

Εργαζόμαστε ήδη για την έκδοση beta και εδώ είναι μόνο ένα μέρος του χάρτη πορείας μας:

  • Προσθέστε δυνατότητες λειτουργίας εκτός σύνδεσης
  • Προσθήκη ειδοποιήσεων push
  • Ολοκληρώστε τη διαδικασία ολοκλήρωσης αγοράς

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

Επίδειξη PWA

Τι πιστεύετε για το Progressive Web Apps και τον ρόλο που μπορούν να έχουν στο τοπίο WordPress για κινητά; Σκέφτεστε να ακολουθήσετε αυτό το μονοπάτι με το επόμενο έργο σας?

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Διάταξη και παρουσίαση από τον Karol K.

Σχετικά με τον συγγραφέα: Η Alexandra Anghel είναι συνιδρυτής και CTO στο Appticles.com – μια πλατφόρμα για τη δημιουργία προοδευτικών εφαρμογών ιστού. Ως επέκταση της πλατφόρμας, το Appticles διαθέτει μια προσθήκη WordPress (Πακέτο για φορητές συσκευές WordPress) που ξεπέρασε τα 1 εκατομμύρια λήψεις. Η Alexandra είναι προγραμματιστής πλήρους στοίβας. Συμμετείχε σε δύο επιταχυντές επιχειρήσεων – Startupbootcamp (Κοπεγχάγη / Δανία) και Prosper Women Accelerator (Saint Louis / US). Στις αρχές του 2017, έγινε μέλος της Codette ως συνιδρυτής.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map