Question

我希望能够根据浏览器的大小更改图像的宽度，因此我尝试在sw.js中使用document.body.clientWidth指定浏览器的宽度。但是我收到错误消息，说未定义文档。

关于如何获得浏览器大小的其他建议，或者如何等到定义文档后再提出建议？

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

因为服务工作者正在其自己的线程上运行，而不是在您网站的主线程上运行。

有点像它将在服务器端运行。

当您的图像加载到您的网站上时，它们应该进入服务工作者的缓存。它为此检查定义了错误的位置。

服务人员-无法在sw.js中指定浏览器的宽度

1 个答案: