Πώς να προσαρμόσετε τους εργαζόμενους υπηρεσιών με την εφαρμογή 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!