w3c / w3c/ServiceWorker

Service Worker makes AJAX Progress Listener not Working

Open
#1,141 14 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

TPAC2026
Dominant language
Bikeshed
Stars
3.6k
Forks
324
Avg merge
14d 22h
Merged PRs (30d)
1

Description

Hi everyone,

With Service Worker (SW) installed on a web apps, it caused "AJAX Progress Listener" not working.
Any idea?

Tested in Chrome Desktop, Chrome Mobile v 58.0, Firefox Desktop v 52.0.2, Firefox Android v 53.0.2
It's working
Thanks in advance

The Service Worker

if ('serviceWorker' in navigator && (window.location.protocol === 'https:')) {
        navigator.serviceWorker.register('/service-worker.js')
        .then(function(registration) {
          //Checks the server for an updated version of the service worker without consulting caches.
          //registration.update();
          
          // updatefound is fired if service-worker.js changes.
          registration.onupdatefound = function() {
            // updatefound is also fired the very first time the SW is installed,
            // and there's no need to prompt for a reload at that point.
            // So check here to see if the page is already controlled,
            // i.e. whether there's an existing service worker.
            if (navigator.serviceWorker.controller) {
              // The updatefound event implies that registration.installing is set:
              // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
              var installingWorker = registration.installing;

              installingWorker.onstatechange = function() {
                switch (installingWorker.state) {
                  case 'installed':
                    // At this point, the old content will have been purged and the
                    // fresh content will have been added to the cache.
                    // It's the perfect time to display a "New content is
                    // available; please refresh." message in the page's interface.
                    console.warn('New content is available, please refresh the page');
                    break;

                  case 'redundant':
                    throw new Error('The installing ' +
                                    'service worker became redundant.');

                  default:
                    // Ignore
                }
              };
            }
          };
        }).catch(function(e) {
          console.error('Error during service worker registration:', e);
        });
      }

And, the Ajax Uploader

function uploadPic(){
        var file = document.getElementById('fileInput').files[0];
        var fd = new FormData();
        fd.append("file", file);

        var xhr = new XMLHttpRequest();

        //attach listener before posting
        xhr.upload.onprogress = updateProgressBar;

        xhr.onreadystatechange = function() {//Call a function when the state changes.
            if(xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }

        xhr.open("POST", "https://www.mysite.com/upload.php", true);
        xhr.send(fd);
      }

      function updateProgressBar(e){
        if (e.lengthComputable) {
          var percentComplete = (e.loaded / e.total) * 100;
          console.log(percentComplete + '% uploaded', e);
        }
      }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the interaction between the registered Service Worker and the XMLHttpRequest upload progress listener using the provided service-worker.js and uploadPic() examples. Compare behavior across the listed Chrome and Firefox versions and review the Service Worker specification references in the issue. Done means establishing whether this is a specification or browser implementation problem and recording a reproducible conclusion.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.