Service Worker makes AJAX Progress Listener not Working
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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