Mole Fetch

See this https://github.com/thangman22/mole-fetch

Is Library for make background http request using ServiceWorker and Fetch API

Mole fetch is help web application make any HTTP request still running incase users are close a browser accidentally or network is disconnect. Mole fetch is using ServiceWokrer and SyncManager

Installation

npm install --save mole-fetch

git clone https://github.com/thangman22/mole-fetch.git

Usage

HTML file

const moleFetch = new MoleFetch()

function fetchFacebook() {
    //Call sendRequest for request HTTP
    moleFetch.sendRequest('facebook', 'http://localhost:5555/mock-api/online', false, 'GET')
}

//Register ServiceWoker
if ('serviceWorker' in navigator && 'SyncManager' in window) {
    navigator.serviceWorker.register("sw.js").then((registration) => {
        console.log('ServiceWorker registration successful with scope: ', registration.scope)
    }).catch(function(err) {
        console.log('ServiceWorker registration failed: ', err)
    })
}

//Implement onResponse for recieve response from ServiceWorker when site is online
moleFetch.onResponse('facebook').then((value) => {
    document.getElementById("result").innerHTML = value;
})

//Implement onResponse for recieve response from Cache when site is offline
moleFetch.getCacheResponse('facebook',false).then((value) => {
    document.getElementById("result").innerHTML = value;
})

ServiceWorker file

importScripts('node_modules/localforage/dist/localforage.min.js')
importScripts('node_modules/mole-fetch/dist/mole-fetch.js')

self.addEventListener('install', (event) => {
  self.skipWaiting()
})

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim())
})

self.addEventListener('sync', (event) => {
  let moleFetch = new MoleFetch
  moleFetch.initBackgroudfetch(event)
})

Method

sendRequest (taskName, url, data, method)

This method will be send request to ServiceWorker and request via FetchAPI

moleFetch.onResponse(taskName)

This method will wating result from FetchAPI matched by name return as Promise

moleFetch.getCacheResponse(taskName)

This method will get result from Cache that created when browser offline and matched by name as Promise

moleFetch.getTaskStatus(taskName)

This method will get return status by taskName

Compatibility

Google Chrome 49+