Giter VIP home page Giter VIP logo

node-service-worker's Introduction

node-service-worker

An attempt at replicating a Service Worker environment inside Node. Uses:

Install with:

npm install node-service-worker

Why would you make such an abomination?

First and foremost, as an experiment. But mostly to see if we can centralise all page rendering inside a service worker. It will mean super-fast client loads, and if we can replicate the environment well enough in Node it means we can pre-populate pages on (e.g.) S3 for users when they first load.

What works?

Very little. This is a project I'm adding to as and when I need more functionality. Right now you can create a service worker like so:

const {ServiceWorker} = require('node-service-worker');

const sw = new ServiceWorker({
    scriptURL: 'https://localhost/sw.js',
    scope: 'http://localhost', // Primarily to resolve relative URLs
    contents: 'console.log("hi");' // The JS of the service worker
})

You'll then want to install and activate your worker. For this we use ExtendableEvents, which will wait until a Promise has executed, if waitUntil() has been called, or return immediately if not. They don't have an internal method of resolving in the spec, so we also have a function called resolveExtendableEvent that'll do it for us. Like so:

const {ExtendableEvent, resolveExtendableEvent} = require('node-service-worker');

let installEvent = new ExtendableEvent("install");
sw.dispatchEvent(installEvent);

return resolveExtendableEvent(installEvent)
.then(() => {
    let activateEvent = new ExtendableEvent("activate");
    sw.dispatchEvent(activateEvent);
    return resolveExtendableEvent(activateEvent);
})

A utility function is also provided for this, given that it's so common:

const {installAndActivate} = require('node-service-worker');

installAndActivate(sw)
.then(() => {

})

Then use the following:

FetchEvent

Dispatch FetchEvents to get page content:

const {FetchEvent} = require('node-service-worker');

let fetchEvent = new FetchEvent("http://localhost/test/");

sw.dispatchEvent(fetchEvent);

fetchEvent.resolve().then(function(response) {
    // a FetchResponse object, if you're doing it correctly.
})

CacheStorage

You can check which files your service worker has cached on install, using standard CacheStorage APIs:

sw.caches.keys()
.then((keys) => {
    let openPromises = keys.map((key) => worker.caches.open(key));
    return Promise.all(openPromises);
})
.then((cacheObjects) => {
    let keysPromises = cacheObjects.map((c) => c.keys());
    return Promise.all(keysPromises);
})
.then((cacheEntryArrays) => {
    let allEntries = Array.prototype.concat.apply([], cacheEntryArrays);
    console.log(allEntries)
})

Note that it doesn't (yet?) actually cache these files, it just stores which URLs are cached.

console

By default any calls to console.log() and the like are hidden from view. If you want to see what was logged, you can call console.dump(). Best to use inside an error handler, like so:

let install = new ExtendableEvent("install");
sw.dispatchEvent(install);

install.resolve()
.catch((err) => {
    sw.console.dump();
})

Fetch interception

I'm still working out the best way to do this. But in browser service workers, the fetch() function automatically bypasses the worker (otherwise you'd end up in infinite loops). We need to provide a hook to do the same when using this as a server proxy. So, we can do the following:

const sw = new ServiceWorker({
    scriptURL: 'https://localhost/sw.js',
    scope: 'http://localhost',
    contents: 'console.log("hi");',
    interceptFetch: function(fetchArgs, fetch) {
        // fetchArgs is an array of arguments passed. Fetch is the fetch function

        return fetch(fetchArgs[0], fetchArgs[1]) // this would mean we're doing nothing
    }
})

to rewrite / do whatever we want to internal fetch requests.

importScripts() interception

Similar to fetch, this is experimental and even trickier because it has to be synchronous. But any call to importScripts() will be separated out into the individual scripts called (because it can contain more than one argument) and passed to a function named importScript in the worker initialiser. Like so:

const sw = new ServiceWorker({
    scriptURL: 'https://localhost/sw.js',
    scope: 'http://localhost',
    contents: 'console.log("hi");',
    importScript: function(url) {
        
        return fs.readFileSync(path.join(__dirname, url));

    }
})

The example above assumes the URL is relative, which it may not be. For HTTP requests you might be able to use something like https://github.com/ForbesLindesay/sync-request, but I wouldn't really recommend it.

Gobble plugin

There's also a plugin available for Gobble, allowing you to include static HTML copies of service worker fetch events in your build process. Like so:

var serviceWorkerRender = require('node-service-worker/gobble');

gobble('src/js').transform(serviceWorkerRender, {
    entry: 'sw.js',
    scope: "https://localhost/app-demo/",
    urls: [
        "./",
        "./home/"
    ]
})

Files are output relative to scope, so this example would create index.html and home/index.html (index.html is added automatically to URLs ending with /).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.