Service Worker Routing library for in browser HTTP requests

It's like express.js inside Service Worker.

Usage

Installation from npm:

npm install @jcubic/wayne

yarn add @jcubic/wayne

Standard way of installing the service worker as ES Module

if ('serviceWorker' in navigator) {
    const scope = location.pathname.replace(/\/[^\/]+$/, '/');
    navigator.serviceWorker.register('sw.js', {scope, type: 'module'})
             .then(function(reg) {
                 reg.addEventListener('updatefound', function() {
                     const installingWorker = reg.installing;
                     console.log('A new service worker is being installed:',
                                 installingWorker);
                 });
                 // registration worked
                 console.log('Registration succeeded. Scope is ' + reg.scope);
             }).catch(function(error) {
                 // registration failed
                 console.log('Registration failed with ' + error);
             });
}

Inside same file you can send AJAX requests with standard fetch API.

function get(url) {
    fetch(url)
      .then(res => res.text())
      .then(text => output.innerHTML = text);
}

input.addEventListener('click', () => {
    get(`./user/${user_id.value}`);
});

error.addEventListener('click', () => {
    get(`./error`);
});

Service worker - sw.js file - the file import library from CDN.

import { Wayne } from 'https://cdn.jsdelivr.net/npm/@jcubic/wayne';

const app = new Wayne();

const users = {
  1: 'Jakub T. Jankiewicz',
  2: 'John Doe',
  3: 'Jane Doe'
};

app.get('/user/{id}', function(req, res) {
  const user = users[req.params.id];
  if (user) {
    res.json({result: user});
  } else {
    res.json({error: 'User Not Found'});
  }
});

app.get('/error', function(req, res) {
  nonExisting();
});

See simple demo the service worker is defined as code above.

API reference

Wayne object has those methods that corenspond to HTTP methods

• get
• post
• put
• delete
• patch

each method accepts URL with markers inside curly brackets those markers will be available from Request.params object. Request object is browser native object of a given request see MDN for details. The only change to the native API is that the object have proeprty params.

Here are few most important Request properties:

• headers - Headers object to get key/value pairs use Object.fromEntires(req.headers.entries()).
• method - request method as string.
• url - string with full URL.
• referrer - HTTP referer.
• arrayBuffer() - Returns a promise that resolves with an ArrayBuffer representation of the request body.
• blob() - Returns a promise that resolves with a Blob representation of the request body.
• formData() - Returns a promise that resolves with a FormData representation of the request body.
• json() - Returns a promise that resolves with the result of parsing the request body as JSON.
• text() - Returns a promise that resolves with a text representation of the request body.

Response object is instance of HTTPResponse that have methods:

• html()
• json()
• text()
• send()

each of those methods accepts string as first argument. Second argument are options:

• headers - any headers as key value pairs or you can pass Headers object.
• statusText - The status message associated with the status code, e.g., OK.
• status - The status code for the response, e.g., 200.
• type - Content-Type of the response (MIME).

Story

The idea for using Service worker to serve pure in browser HTTP request has long history. I've first described the ussage of this techique in this article from 2018: How to create Web Server in Browser. In June 2022 I've came up with cool new way of using this technique and and while creating PoC for the article I'm going to write (will update this story when ready) I've realized that I can extract all the logic of creating those fake HTTP requests into a library. And this is how Wayne was born.

Idea of the name of the library came from movie Wayne's World 2 where Wayne is dressed up as Construction Worker

I hightly recommend both movies if you didn't seen them already.

Contribution

If you have any ideas for an improvement don't hesitate to create an issue. Code contributions are also welcome.

Aknowledge

• Part of the content of this README was based on text from MDN.
• Logo use illustration from OpenClipart.

License

Released with MIT license
Copyright (c) 2022 Jakub T. Jankiewicz