Need private packages and team management tools?Check out npm Teams »

sw-progress-fetch

1.0.2 • Public • Published

SW Progress Monitor

NPM Total Downloads David Dependencies Status devDependencies Status Language grade: JavaScript prs welcome styled with prettier License: MIT

Dispatches fetch event progress as a 'message' event to a Service Worker.

NOTE: Fetches response while pushing progress monitor to client opaque request responses won't give us access to Content-Length and Response.body.getReader(), which are required for calculating download progress.

NOTE: Respond with a newly-constructed Request from the original Request that will give us access to those. See What Limitations Apply to Opaque Responses

NOTE: 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Examples

service-worker.js

const swProgressMonitor = require('sw-progress-monitor')
 
const fetchWithProgressMonitor = (event) => {
  const request = new Request(event.request.clone(), {
    mode: 'cors', // Make sure all origins are whitelisted in resource's CORS policy
    credentials: 'omit'
  })
  return fetch(request).then(response =>
    swProgressMonitor(event.clientId, response.clone())
  )
}
 
self.addEventListener('fetch', (event) => {
  event.respondWith(fetchWithProgressMonitor(event));
 
  // ...
})

main.js

navigator.serviceWorker.addEventListener('message', (event) => {
  const { data } = event
  const percentNum = Math.round(data.loaded / data.total * 100)
  const percent = `${percentNum}%`
  console.log(`${percent} loaded`)
})

Install

npm i sw-progress-fetch

DownloadsWeekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

6.54 kB

Total Files

10

Last publish

Collaborators

  • avatar