j-ServiceWorker

jComponent 20 · jcomponent@20 component

Το στοιχείο καταγράφει /sw-jcomponent.js και το στέλνει τη λίστα περιουσιακών στοιχείων, την έκδοση cache και offline fallback από την πηγή δεδομένων του. Υπηρετείτε την εφαρμογή μέσω HTTPS ή localhost, και τοποθετήστε τον εργάτη στην ρίζα URL έτσι ώστε να μπορεί να χειριστεί τις σελίδες της εφαρμογής.

Πρώτα απ 'όλα, πρέπει να βάλετε τον κωδικό κάτω σε ένα αρχείο για παράδειγμα sw-jcomponent.js και να το τοποθετήσετε στο public (π.χ. myproject/public/sw-jcomponent.js)

var prefix='jc';function hash(s,unsigned){var hash=0,i,char;if(!s.length)return hash;var l=s.length;for(i=0;i<l;i++){char=s.charCodeAt(i);hash=((hash<<5)-hash)+char;hash|=0;}return unsigned?hash>>>0:hash}self.addEventListener('install',()=>{self.skipWaiting()});self.addEventListener('message',function(e){if(e.data.action==='jc-sw'){var data=e.data.data;data.name=prefix+'-'+data.version+'-'+hash(data.assets.toString(),true);addcache(e.data.data)}});self.addEventListener('fetch',function(e){e.respondWith(fetch(e.request).catch(function(){return caches.match(e.request).then(function(response){if(response)return response;if(e.request.mode==='navigate'||(e.request.method==='GET'&&e.request.headers.get('accept').includes('text/html')))return caches.match('jc-offline-fallback')})}))});function addcache(data){caches.open(data.name).then(function(cache){if(data.assets&&data.assets.length)cache.addAll(data.assets);if(data.fallback){fetch(data.fallback,{mode:'no-cors'}).then(function(response){return cache.put('jc-offline-fallback',response)})}}).then(function(){caches.keys().then(function(keys){return Promise.all(keys.map(function(key){if(data.name!==key)return caches.delete(key)}))})})}

Το στοιχείο θα επικοινωνεί με αυτόν τον κώδικα service worker.

ΕΠΙΤΡΟΦΗ:

Τα δεδομένα λήξης του expire {String} από την αποθήκευση των χρηστών (προεπιλογή: 1 day) δεν συνιστούμε να αλλάξετε αυτό
debug {Boolean} επιτρέπει τη λειτουργία debug. θα ανανεώσει τα περιουσιακά στοιχεία κάθε επαναφόρτωσης (για να μην χρειάζεται να αλλάξετε την έκδοση) (προεπιλογή: false)
Ο δρόμος datasource {String} προς την πηγή δεδομένων (η πηγή των δεδομένων είναι ένα αντικείμενο)

Η δομή των δεδομένων:

{
	version: '1.00',
	fallback: '/',
	assets: [
		'/js/default.js'
	]
}

Καλό να ξέρεις:

PATH μπορεί να χρησιμοποιηθεί ως δυναμική έκδοση. θα ανανεώσει τα περιουσιακά στοιχεία αμέσως (χωρίς επανεγκατάσταση σελίδας) για παράδειγμα SET('version', '1.35')
Μετά την προσθήκη/απομάκρυνση ενός στοιχείου από τα περιουσιακά στοιχεία, δεν χρειάζεται να αυξήσετε την έκδοση
fallback εκτελεί offline έκδοση του html. e.g. fallback: '/offline.html'
Τα περιουσιακά στοιχεία μπορούν να είναι τα πάντα: γραμματοσειρά, μερικές σελίδες, αρχεία CSS, αρχείο javascript
_Δουλεύει μόνο σε Ενιαίες Σελίδες εφαρμογών όπως Αυτό το ή Αυτό το__

Χρήση:

<ui-component name="serviceworker" path="version" config="datasource:mysource"></ui-component>

<script>
	var version = '1.34';
	var mysource = {
		version: version,
		fallback: '/',
		assets: [
			'/pages/settings.html',
			'/pages/articles.html',
			'/pages/dashboard.html'
		]
	};
</script>

Πηγή : Total.js συστατικάΠνευματικά δικαιώματα Denis Granec. Αδειοδότηση.