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

@planess/offline-network

v0.1.2

Published

This package helps to keep active development if internet connection is out for short time.

Downloads

7

Readme

Overview

This package helps to keep active development if internet connection is out for short time.

This module runs only in development app mode.

How it works:

Module collects all http-request via original HttpClient when connection is on and use the last successfully performed results replacing the real http-requests by saved copies when internet connection is off.

HTTP-request headers have no impact on the cache and are not considered in processing at all.

The presence or absence of any headers will not affect the result of saving requests and response. However, if you have some additional specific interceptors/processing of http-requests it can make some conflicts.

Limitations

  • Minimal Angular version - 9.
  • Each HttpClientModule import in NgModule brings in new instance of HttpClient with dedicated interceptors. Usually, it happens only once in root module, but you should set configureOfflineNetwork in every provider along with HttpClientModule import.
  • Based on point above - module will not catch any http-request performed by installed third-party packages.
  • All data are saved in browser storage with IndexedDB (or Local Storage for the second priority). In the browser private tab it exists until browser is closed. And you cannot move data to another browser manually.

Setup

Install the package

Run the command in your project:

npm install @planess/offline-network

Invoke provider factory in NgModule

Append execution of special configureOfflineNetwork into main module provider (usually, in app.module.ts):

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { configureOfflineNetwork } from '@planess/offline-network';
import { environment } from 'src/environments/environment';

@NgModule({
	providers: [configureOfflineNetwork(HTTP_INTERCEPTORS, { maxAge: 60 }, environment.production)],
})
export class AppModule {}

Syntax is:

function configureOfflineNetwork(
	HTTP_INTERCEPTORS_FROM_THE_APP: typeof HTTP_INTERCEPTORS,
	configuration?: Partial<Configuration>,
	productionMode: boolean,
): Provider[];

, arguments:

  • HTTP_INTERCEPTORS_FROM_THE_APP - original HTTP_INTERCEPTORS project's token for http-requests;
  • configuration - optional set of parameters. Details are below;
  • productionMode - whether application is running in production mode. Module is disabled for production version.

Configuration

You can pass configuration as a second argument with any number of properties with Configuration interface:

  • maxAge: number = 48 - number of hours while cache is available;
  • includeServerOff: boolean = false - either server's 500 errors would use the cache. true - use cache!

Example

  1. After successful integration this package with the target project and run it in development mode you will see a message in browser console:

Offline service is running

  1. When connection is on all your successful XHR request via HttpClient service is tracked and responses are collected:

Request collecting

  1. If connection is off you will get saved copy of last successful response:

Getting cache

Be aware, the http-request remains failed in any case:

Failed http-request

  1. A common http error is thrown if cache does not exist. You can catch and handle error by your own.

Troubleshooting

Everytime an error "Cache for {key} key is broken!" occurs in browser console

Most likely DB data is corrupted for some reason. Clear the storage: open browser inspector - tab "Application" - expand IndexedDB storage - delete "offline-network-db" database and refresh the page.

Changelogs

Read the last changes if you need to upgrade package version.

Want to help?

We would be grateful for any remarks, fix, comments, suggestions or contribution. You can fork the project and make helpful changes.

Another way is to send email to [email protected] with your idea and contacts for communication.