@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 inNgModule
brings in new instance ofHttpClient
with dedicated interceptors. Usually, it happens only once in root module, but you should setconfigureOfflineNetwork
in every provider along withHttpClientModule
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
- originalHTTP_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
- After successful integration this package with the target project and run it in development mode you will see a message in browser console:
- When connection is on all your successful XHR request via HttpClient service is tracked and responses are collected:
- If connection is off you will get saved copy of last successful response:
Be aware, the http-request remains failed in any case:
- 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.