npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

swork

v1.5.5

Published

A service worker building framework using a middleware pattern.

Downloads

44

Readme

swork

npm travis ci Coverage Status download Greenkeeper badge Join the chat at https://gitter.im/swork-chat/community

swork is a service worker building framework intended to be a robust foundation for service worker applications. TypeScript and async functions are central to its implementation enabling increased productivity, reduced error rate and the removal of callbacks. Swork is not bundled with any middleware.

License

MIT

Installation

npm install swork

yarn add swork

Example

import { Swork, FetchContext } from "swork";

const app = new Swork();

app.use((context: FetchContext, next: () => Promise<void>)) => {
    context.response = new Response("Hello World!");
});

app.listen();

Middleware

Swork is a middleware framework that accepts both async and standard functions. Middleware take two parameters: context and next. The supplied context is created anew for each request and encapsulates the initiating fetch event, request and eventual response. next is a function that when invoked will execute the downstream middleware.

Async Function

app.use(async (context: FetchContext, next: () => Promise<void>) => {
    const start = performance.now();
    await next();
    const timeElapsed = (performance.now() - start).toFixed(2);
    console.log(`${context.request.method} ${context.request.url} - ${timeElapsed} ms`);
});

Standard Function

app.use((context: FetchContext, next: () => Promise<void>) => {
    const start = performance.now();
    next().then(() => {
        const timeElapsed = (performance.now() - start).toFixed(2);
        console.log(`${context.request.method} ${context.request.url} - ${timeElapsed} ms`);
    });
});

Middleware Implementations

| Middleware | Description | Package | Repository | |------------|-------------|---------|------------| | swork-router| Router middleware | npmjs | github | | swork-cache| Cache strategies and events | npmjs | github | | swork-link| Link separate middleware pipelines | npmjs | github | | swork-claim-clients | Claim active clients | npmjs | github | | swork-logger | Logs all fetch requests | npmjs | github |
| swork-when | Middleware branching strategies | npmjs | github |

Methods

use

use(...params: Array<(Swork | Middleware | Array<(Swork | Middleware)>)>): Swork

The use method accepts a middleware. Middleware are executed in the order provided for each incoming request via a fetch event handler. use can also accept arrays of middlewares or even provide a different Swork app instance.

on

on(event: EventType, ...handlers: Array<(event: any) => Promise<void> | void>): void

Use the on method to provide any handlers to be executed during service worker events. The event type will vary based upon the event fired. On supports the following events: activate, install, message, notificationclick, notificationclose, push, pushsubscriptionchange, sync

listen

listen(): void

To initialize your Swork application, call listen. This will add the event handlers and callbacks to your service worker application.

Configuration

These properties apply globally to the Swork application.

version
The version of the service worker. Defaults to "1.0.0".

origin
The origin of the service worker. Defaults to self.location.origin.

environment
The running environment. Defaults to "production".

These configurations can be referenced through the swork module.

import { configuration } from "swork";

configuration.environment = "production";
console.log(configuration);
// => { version: "1.0.0", origin: "https://localhost", environment: "production" }

Notes

As service workers do not yet natively support ES6 modules, a Swork implementation is expected to be built with your preferred bundler (e.g. Webpack, Rollup)

Contact

If you are using swork or any of its related middlewares, please let me know on gitter. I am always looking for feedback or additional middleware ideas.