Πώς να προσαρμόσετε τους εργαζόμενους υπηρεσιών με την εφαρμογή create-react-app
Αυτή είναι μια συνέχεια της προηγούμενης ανάρτησής μου σχετικά με τη δημιουργία ενός PWA με την εφαρμογή create-react-app (CRA). Στη συνδεδεμένη ανάρτηση, συζήτησα πώς θα μπορούσαμε να φτιάξουμε ένα προσαρμοσμένο Service Worker (SW), παραμένοντας εντός του κελύφους της δημιουργίας-αντίδρασης.
Εάν ακολουθήσατε μαζί με την ανάρτηση (και ελπίζω ότι το έκανε να λειτουργεί), θα έχετε παρατηρήσει ένα κρίσιμο ελάττωμα. Είναι ακόμη εξαιρετικά δύσκολο να αναπτυχθεί ένα SW σε περιβάλλον dev. Ουσιαστικά, θα πρέπει να τροποποιήσετε τον κωδικό SW, να εκτελέσετε μια διαδικασία κατασκευής, να τον δοκιμάσετε, να εξαλείψετε τυχόν σφάλματα, να ανανεώσετε και να επαναλάβετε. Μιλώντας από την εμπειρία, είναι μια εξαντλητική διαδικασία.
Ας προχωρήσουμε και να βρούμε πώς να λύσουμε αυτό το πρόβλημα.
Εργασία σε λειτουργία Dev
Εντάξει, λοιπόν, πώς μπορούμε να τρέξουμε ένα SW σε λειτουργία dev, ώστε να μπορούμε να γράψουμε γρήγορα κάποιο κακό κώδικα και να καταλάβουμε τι λειτουργεί και τι όχι;
Αρχικά, ας μάθουμε γιατί δεν λειτουργεί σε λειτουργία dev. Δημιουργήστε ένα νέο έργο CRA και ανοίξτε τον registerServiceWorker.js
κάτω src
κατάλογο.
Στην παραπάνω ουσία, έχω μόνο το σχετικό κομμάτι κώδικα. Θα παρατηρήσετε έναν έλεγχο υπό όρους process.env.NODE_ENV === 'production'
. Αυτό ελέγχει για να δείτε εάν εκτελείτε μια κατασκευή παραγωγής. Εάν δεν εκτελείτε μια κατασκευή παραγωγής, το SW θα αντικατασταθεί από ένα αρχείο χωρίς δυνατότητα.
Το σκεπτικό πίσω από αυτήν την απόφαση παρέχεται σε αυτό το τεύχος GitHub.
Αρχικά, δοκιμάστε να εκτελέσετε yarn start
την εφαρμογή σας και ελέγξτε για ένα αρχείο SW στο παράθυρο της γραμμής εργαλείων. Εάν κάνετε κλικ στο service-worker.js
σύνδεσμο στη γραμμή εργαλείων, θα εμφανιστεί το ακόλουθο αρχείο:
Ευτυχώς, υπάρχει μια απλή λύση για αυτό. Είναι μια εύκολη διαδικασία δύο βημάτων.
Αρχικά, μέσα στο registerServiceWorker.js
αρχείο, αναζητήστε την window.addEventListener('load')
κλήση λειτουργίας. Η πρώτη γραμμή είναι μια δήλωση για την swUrl
οποία αναφέρεται:
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
Μετονομάστε το service-worker
μέρος του με οτιδήποτε άλλο. Θα ονομάσω το δικό μου service-worker-custom.js
.
Δεύτερον, δημιουργήστε ένα αρχείο στο εσωτερικό του δημόσιου καταλόγου σας με το ίδιο ακριβώς όνομα με το προσαρμοσμένο όνομα που μόλις δημιουργήσατε. Έτσι, θα δημιουργούσα ένα αρχείο που ονομάζεται service-worker-custom.js
μέσα στον δημόσιο κατάλογο.
Τώρα, στο εσωτερικό του service-worker-custom.js
, τοποθετήστε μια απλή δήλωση καταγραφής. Κάτι σαν: console.log('My custom service worker')
.
Τώρα, εκτελέστε ξανά την εφαρμογή σας yarn start
και θα πρέπει να εμφανίζεται η δήλωση καταγραφής στην κονσόλα του προγράμματος περιήγησής σας. Ίσως χρειαστεί να καταργήσετε την εγγραφή ενός προηγούμενου εργαζόμενου σέρβις εάν έχετε τρέξει νήματα πριν από αυτό.
Λοιπόν, το έχετε. Ένας προσαρμοσμένος εργαζόμενος που μπορείτε να εκτελέσετε με ασφάλεια εντός της λειτουργίας dev.
Σημείωση: Δεν είναι συνετό να δοκιμάσετε έναν εργαζόμενο σέρβις σε συσκευή εκτός της λειτουργίας ιδιωτικής περιήγησης στο πρόγραμμα περιήγησής σας. Επίσης, βεβαιωθείτε πάντα ότι το Update On Reload είναι επιλεγμένο μέσα στο παράθυρο των εργαλείων του προγραμματιστή σας κατά τη δοκιμή σε λειτουργία dev.
Συνδυάζοντας Dev και Prod
Τώρα, έχουμε βρει πώς να δοκιμάσουμε ένα SW σε λειτουργία dev. Ωστόσο, πρέπει επίσης να βρούμε έναν τρόπο να εισάγουμε τον προσαρμοσμένο κώδικα στον SW που δημιουργείται από την CRA σε μια κατασκευή παραγωγής.
Εάν διατηρήσετε τα πάντα όπως συμβαίνει με τις διαμορφώσεις που έχουμε κάνει μέχρι τώρα και εκτελέσετε μια διαδικασία κατασκευής και ελέγξετε την έκδοση στο πρόγραμμα περιήγησής σας, θα παρατηρήσετε ότι το αρχείο SW που δημιουργήθηκε είναι το προσαρμοσμένο που δημιουργήσαμε. Αυτό είναι ένα πρόβλημα, επειδή θέλουμε να μπορούμε να συνδυάσουμε την καλοσύνη του τι έχει να προσφέρει ο CRA με τον δικό μας κωδικό.
Μπορούμε να το κάνουμε με τη sw-precache
βιβλιοθήκη. Εισήγαγα αυτήν τη βιβλιοθήκη στην προηγούμενη δημοσίευση μου. Εδώ είναι ο σύνδεσμος GitHub στη sw-precache
βιβλιοθήκη.
Εγκαταστήστε τη βιβλιοθήκη με yarn add sw-precache
. Μόλις το κάνετε αυτό, δημιουργήστε ένα sw-precache-config.js
αρχείο στον ριζικό σας κατάλογο. Εδώ είναι το αρχείο μου:
Έχω εισαγάγει το μεγαλύτερο μέρος αυτού του αρχείου στην προηγούμενη ανάρτηση. Το μόνο νέο bit είναι η importScripts
επιλογή. Αυτό είναι αρκετά αυτονόητο, απλώς εισάγει το αρχείο που καθορίζεται από τη διαδρομή και προσπαθούμε να εισαγάγουμε το προσαρμοσμένο αρχείο SW.
Θα παρατηρήσετε ότι η διαδρομή του αρχείου δεν έχει το ./public
πρόθεμα, παρόλο που το αρχείο υπάρχει στον public
κατάλογό μας . Θα το εξηγήσω λίγο.
Τώρα, ενημερώστε το package.json
αρχείο σας με μια τροποποίηση στην build
εντολή. Κάντε την build
εντολή σας ως εξής:
react-scripts build && sw-precache --config=sw-precache-config.js
Τώρα, ας επιστρέψουμε στη διαδρομή αρχείου που παρέχουμε στην επιλογή importScripts. Εάν το παρατηρήσετε, sw-precache
αυτό ουσιαστικά εκτελείται ως διαδικασία μετά την κατασκευή. Τώρα, εάν εκτελέσετε μια διαδικασία κατασκευής και ανοίξετε τον κατάλογο build που έχει δημιουργηθεί, θα παρατηρήσετε το αρχείο εργαζόμενου προσαρμοσμένης υπηρεσίας στον φάκελο build. Όταν παρέχουμε μια διαδρομή προς την importScripts
επιλογή, την παρέχουμε σε σχέση με τον κατάλογο build!
Μόλις το κάνετε όλα αυτά, προχωρήστε και εκτελέστε την έκδοση έκδοσης της εφαρμογής σας και θα παρατηρήσετε ότι η δήλωση καταγραφής εμφανίζεται ξανά στην κονσόλα του προγράμματος περιήγησής σας.
Λοιπόν, το έχετε! Τώρα μπορείτε να εισάγετε κάποιο προσαρμοσμένο κώδικα SW στον προεπιλεγμένο SW που δημιουργείται από το CRA!