yossi-eynav/development-service-worker

Using the powerful service-worker in order to serve localhost assets on production

CSS

Development Service Worker

This development service worker allows you to serve localhost assets on production.

Especially useful in these use-cases:

Use production data instead of mocks and stubs
Debug production bugs easily
No need to process requests on localhost besides static assets requests when working on FE issues.

TL;DR:

Watch the demo video

Installation

You'll need to register the service worker from one of your assets.

navigator.serviceWorker.register('/service-workers/dev-sw.js', {scope: '/'})
    .then(function(reg) {
        // registration worked
        console.warn('Registration succeeded. Scope is ' + reg.scope);
    }).catch(function(error) {
    // registration failed
    console.warn('Registration failed with ' + error);
});

Make sure you're sending this header field when serving the service-worker:
```
  headers['Service-Worker-Allowed'] = '/'
```
You must serve service-worker over TLS connection
Make sure that your local environment has a ssl certificate. If you're using OSX operating system follow these instructions:

Double click on /config/local-ssl/Certificates.cer
Right click on the certificate in the KeyChain app, choose "Get Info".
Extend "Trust"
Set "When using this certificate" to "Always Trust" For more instructions, please visit: https://certsimple.com/blog/localhost-ssl-fix

Enable CORS on your local environment

Run the demo:

In my demo i'm using http-server module from NPM.

Install the module, Make sure you're in the demo folder and run this command:

http-server --cors  --ssl  --cert="../config/localhost-ssl/cert.pem" --key="../config/localhost-ssl/key.pem" -p 3001

Useful Links: