|
5 | 5 | [](https://github.com/eden-js/serviceworker) |
6 | 6 | [](https://discord.gg/5u3f3up) |
7 | 7 |
|
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