Skip to content

Commit 5d3ff71

Browse files
committed
complete docs
1 parent 9721205 commit 5d3ff71

File tree

1 file changed

+116
-1
lines changed

1 file changed

+116
-1
lines changed

README.md

Lines changed: 116 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,119 @@
55
[![Awesome](https://img.shields.io/badge/awesome-true-green.svg)](https://github.com/eden-js/serviceworker)
66
[![Discord](https://img.shields.io/discord/583845970433933312.svg)](https://discord.gg/5u3f3up)
77

8-
Serviceworker base logic component for [EdenJS](https://github.com/edenjs-cli)
8+
Serviceworker base logic component for [EdenJS](https://github.com/edenjs-cli)
9+
10+
`@edenjs/serviceworker` automatically adds serviceworker logic to an edenjs install
11+
12+
## Setup
13+
14+
### Install
15+
16+
```
17+
npm i --save @edenjs/serviceworker
18+
```
19+
20+
### Configure
21+
22+
```js
23+
config.serviceworker = {
24+
config : { // this config field is passed to the compiled serviceworker
25+
offline : { // disable by passing false or null
26+
files : ['/some/file.png', '/some/otherfile.png', 'https://some.external/file.png'],
27+
},
28+
},
29+
};
30+
```
31+
32+
If offline is on, the entire application can be used offline. To setup routes for offline simply specify `@offline` as part of their config:
33+
34+
```js
35+
/**
36+
* Index action
37+
*
38+
* @param {Request} req
39+
* @param {Response} res
40+
*
41+
* @view offline
42+
* @route {get} /
43+
* @layout main
44+
* @offline
45+
*/
46+
async indexAction(req, res) {
47+
// render offline page
48+
res.render();
49+
}
50+
```
51+
52+
As we cannot run a function in the backend when the service has no internet, all other features need to be specified in the config rather than the action function, eg the following will not function in offline mode, while the above will.
53+
54+
```js
55+
/**
56+
* Index action
57+
*
58+
* @param {Request} req
59+
* @param {Response} res
60+
*
61+
* @route {get} /
62+
* @offline
63+
*/
64+
async indexAction(req, res) {
65+
// render offline page
66+
res.render('offline', {
67+
layout : 'main',
68+
});
69+
}
70+
```
71+
72+
### Compilation
73+
74+
Any file you include in the following path will be compiled into the serviceworker:
75+
76+
```js
77+
'public/js/serviceworker.js'
78+
'public/js/serviceworker/**/*'
79+
```
80+
81+
### Messaging
82+
83+
Serviceworker messaging is automated between an installed serviceworker and a global eden object.
84+
85+
#### Example
86+
87+
In the serviceworker
88+
89+
```js
90+
// set port
91+
const port = null; // can be a sepcific port
92+
93+
// send message to frontend
94+
self.eden.send(port, 'to.send', 'a', 'b');
95+
96+
// receive a request for data from the frontend
97+
self.eden.endpoint('check.something', async (a, b) => {
98+
// return b
99+
return b;
100+
});
101+
102+
// receive an event from the frontend
103+
self.eden.on('check.event', async (a, b) => {
104+
// got event from frontend
105+
console.log(a, b);
106+
});
107+
```
108+
109+
In the frontend
110+
111+
```js
112+
// call a serviceworker endpoint
113+
const result = await window.eden.serviceworker.call('check.something', 'a', 'b'); // returns 'b'
114+
115+
// receive a request for data from the frontend
116+
window.eden.serviceworker.send('check.event', 'a', 'b');
117+
118+
// receive an event from the frontend
119+
window.eden.serviceworker.on('to.send', async (a, b) => {
120+
// got event from serviceworker
121+
console.log(a, b);
122+
});
123+
```

0 commit comments

Comments
 (0)