# j-ServiceWorker

> Αποθηκεύστε τα περιουσιακά στοιχεία SPA και ένα offline fallback με έναν υπάλληλο υπηρεσιών.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 718da315699e97858012dce3fb81cd7185145171123b31a551ae669e3fc6cc86
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

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

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

```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}` προς την πηγή δεδομένων (η πηγή των δεδομένων είναι ένα αντικείμενο)

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

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

__Καλό να ξέρεις__:
- __PATH__ μπορεί να χρησιμοποιηθεί ως δυναμική έκδοση. θα ανανεώσει τα περιουσιακά στοιχεία αμέσως (χωρίς επανεγκατάσταση σελίδας) για παράδειγμα `SET('version', '1.35')`
- Μετά την προσθήκη/απομάκρυνση ενός στοιχείου από τα περιουσιακά στοιχεία, δεν χρειάζεται να αυξήσετε την έκδοση
- __fallback__ εκτελεί offline έκδοση του html. e.g. `fallback: '/offline.html'`
- Τα περιουσιακά στοιχεία μπορούν να είναι τα πάντα: γραμματοσειρά, μερικές σελίδες, αρχεία CSS, αρχείο javascript
- _Δουλεύει μόνο σε Ενιαίες Σελίδες εφαρμογών όπως [Αυτό το](https://github.com/totaljs/spa) ή [Αυτό το](https://github.com/totaljs/emptyproject-pwa)__

__Χρήση__:

```html
<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 συστατικά](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-ServiceWorker)Πνευματικά δικαιώματα Denis Granec. [Αδειοδότηση](/knowledge-licenses.json).