Service worker - Can't specify width of browser in sw.js - service-worker

Question

I want to be able to change width on my images depending on the size of the browser, so I am trying to specify the width of the browser with document.body.clientWidth within my sw.js. But I get the error saying that document is not defined.
Any other suggestions in how to get the size of the browser, or how I can wait until document is defined?
sw.js
var connection = "4g";
if (typeof navigator.connection != "undefined") {
var connection = navigator.connection.effectiveType;
}
var isQualitySet = false;
var imageQuality = "";
var tabletUP = document.body.clientWidth < 500;
self.addEventListener('fetch', function(event) {
if (/\.jpg$|.png$|.gif$|.webp$/.test(event.request.url)) {
if (!isQualitySet) {
switch (connection) {
case '4g':
imageQuality = 'q_auto:good';
break;
case '3g':
imageQuality = 'q_auto:eco';
break;
case'2g':
case 'slow-2g':
imageQuality = 'q_auto:low';
break;
default:
'q_auto:best';
break;
}
isQualitySet = true;
}
var fixWidth = "";
if(!tabletUP) != -1) {
fixWidth = ",w_170";
}
var fixedImg = "https://example.org/"+imageQuality+fixWidth+"/"+event.request.url;
var finalImageURL = new URL(fixedImg);
event.respondWith(
fetch(finalImageURL.href, { headers: event.request.headers })
);
}
}
);
app.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker registered! Scope: '+registration.scope);
}).catch(function(err) {
console.log('Service Worker registration failed: '+err);
});
});
}

Answer 1

because the service worker is running on it's own thread and not with the main thread of your website.
it's a bit like it would run server-side.
your images should get inside the service workers cache when they get loaded on your website. it's definitiv the wrong location for this check.