Я хочу иметь возможность изменять ширину своих изображений в зависимости от размера браузера, поэтому я пытаюсь указать ширину браузера с помощью document.body.clientWidth в моем sw.js.Но я получаю сообщение об ошибке, в котором говорится, что документ не определен.
Любые другие предложения о том, как определить размер браузера или как я могу дождаться определения документа?
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);
});
});
}