Service Workers

service worker

Τι είναι και που χρησιμοποιούνται οι service workers

Παλαιότερα είχαμε push notifications μόνο στα κινητά μας τηλέφωνα, σήμερα με την βοήθεια των service workers έχουμε και στους υπολογιστές μας! Αλλά τι είναι οι service workers; Μπορούμε να πούμε ότι ένας service worker είναι ένα script που τρέχει στο background, και δεν χρειάζεται ο χρήστης να κάνει κάτι για να εκτελεστεί. Προς το παρών οι service workers χρησιμοποιούνται για caching αρχείων (π.χ. css) , push notifications και geofectching.

Το κυρίως μειονέκτημα των service workers εάν μπορούμε να το πούμε μειονέκτημα είναι ότι μπορούν να χρησιμοποιηθούν μόνο σε ασφαλείς συνδέσεις https . Βέβαια για την δημιουργία τους  μπορούμε να δουλέψουμε σε περιβάλλον localhost κάτι που μας λύνει τα χέρια.

Ένα εργαλείο που θα μας βοηθήσει παρακάτω είναι ότι εάν πατήσουμε στον chrome chrome://serviceworker-internals. τότε θα δούμε όλους τους service workers της σελίδας μας.

Παράδειγμα Service Worker

Παρακάτω ακολουθεί ένα παράδειγμα για το πώς καταρχάς βλέπουμε εάν υποστηρίζεται ο service worker από τον browser μας, και έπειτα τον κάνουμε register εάν δεν υποστηρίζεται το λέμε αυτό στην console . Ο service worker έχει ως θέση το αρχείο service-worker.js . Με το then απλά λέμε τι να γίνει αφού ο service worker έχει γίνει register ή με το catch δίνουμε στην console το σφάλμα. Για να ξεκαθαρίσομε κάτι , εάν κάποιος χρήστης μπει στην σελίδα μας 10 φορές θα εκτελεστεί η register function απλά το θέμα είναι ότι ο browser θα ασχοληθεί με το εάν στην πραγματικότητα θα την εκτελέσει ή όχι κάτι το οποίο σχετίζεται με το εάν έχει γίνει registered η function προγενέστερα.


//make sure that Service Workers are supported.
if (navigator.serviceWorker) {
navigator.serviceWorker.register('./service-worker.js', {scope: './about'})
.then(function (registration) {
console.log(registration);
})
.catch(function (e) {
console.error(e);
})
} else {
console.log('Service Worker is not supported in this browser.');
}

Βήμα 2ο Δημιουργώντας μεταβλητές για το ποια αρχεία θέλουμε για cache

Αφού είπαμε στον browser να κάνει register το αρχείο πρέπει και να εγκαταστήσουμε τον service worker αλλά και να τον δημιουργήσουμε μεταβλητές για το ποια αρχεία θέλουμε να κάνουμε cache έτσι ώστε μετέπειτα η ιστοσελίδα μας ή η εφαρμογή μας να μην χρειάζεται σύνδεση στο διαδίκτυο  ( με αυτό εννοούμε ότι  μπορεί η σύνδεση να είναι προβληματική). Έτσι παρακάτω λέμε ποιες εικόνες και ποια αρχεία πρέπει να γίνουνε cache. Η μεταβλητή cache name είναι το πως θα λέγεται από εδώ και πέρα η θέση cache που θα έχουμε τα αρχεία  μας cached.

var CACHE_NAME = 'dependencies-cache';
// Files required to make this app work offline
var REQUIRED_FILES = [
'random-1.png',
'random-2.png',
'random-3.png',
'random-4.png',
'random-5.png',
'random-6.png',
'style.css',
'index.html',
'/', // Separate URL than index.html!
'index.js',
'app.js'
];

Οπότε προχωράμε στο επόμενο βήμα που είναι να κάνουμε το caching. Αυτό που κάνουμε είναι ότι κάνουμε install τον service worker και περιμένουμε με το waituntil() να ανοίξει την θέση cache_name  και μετά να γίνουν cache όλα τα αρχεία μας μετά όλα έχουν γίνει cache πλέον.


self.addEventListener('install', function(event) {
// Perform install step: loading each required file into cache
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
// Add all offline dependencies to the cache
return cache.addAll(REQUIRED_FILES);
})
.then(function() {
// At this point everything has been cached
return self.skipWaiting();
})
);
});

Βήμα 3ο : Αφού έχουν γίνει όλα cached μπορούμε να κάνουμε ότι θέλουμε!!!

Αφού έχουν γίνει όλα cached στο προηγούμενο βήμα τώρα μπορούμε να κάνουμε ότι θέλουμε, ακόμα και να δώσουμε στον browser διαφορετικό περιεχόμενο από αυτό που πραγματικά ζητήθηκε (δεν θα το κάνουμε αυτό εδώ). Έτσι με το fetch listener ( είναι μια routine όταν γίνεται request κάτι από την σελίδα μας π.χ. αν γίνει κάτι reload από την σελίδα μας) βλέπουμε τι έχει γίνει cached και αν δεν έχει γίνει μπορούμε να το παίξουμε από το live αν έχει γίνει cached θα το τραβήξουμε από την cached . Στο παράδειγμά μας εάν όλα έχουν πάει καλά τότε, θα μπορούμε να έχουμε το περιεχόμενο της σελίδας μας και offline χωρίς σύνδεση εάν όλα έχουν γίνει cached.


self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return the response from the cached version
if (response) {
return response;
}
// Not in cache - return the result from the live server
// `fetch` is essentially a "fallback"
return fetch(event.request);
}
)
);
});

Τέλος !

Θα μπορούσαμε να κάνουμε πολά πράγματα π.χ να βλέπουμε εάν υπήρχε προηγούμενος service worker και να θέλουμε να τον αντικαταστήσουμε δείτε τον κώδικα παρακάτω:

self.addEventListener('activate', function(event) {
// Calling claim() to force a "controllerchange" event on navigator.serviceWorker
event.waitUntil(self.clients.claim());
});

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

Εάν θέλετε περισσότερες διευκρινίσεις μπορείτε να σχολιάσετε από κάτω στην φόρμα!

Δημοσιεύθηκε στις Νοέμβριος 16, 2016 in programming

Leave a reply

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Back to Top