Question

我们有一个基于用户代理的自适应网站。我创建了一个简单的服务程序，以在没有连接时显示offline.html页面。

这在台式机和移动设备上都可以正常工作。但是，如果我在Android chrome上选择显示为台式机，则该网站将显示为移动版式，而不是台式机。通过调试，我发现服务器中的Request用户代理未更改。

如果尝试在桌面上更改用户代理，则也可以正常工作。

有什么主意吗？网站是www.idealno.ba

这是服务人员：

    //This is the "Offline page" service worker

//Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener('install', function (event) {
  var offlinePage = new Request('offline.html');
  event.waitUntil(
    fetch(offlinePage).then(function (response) {
      return caches.open('pwa-offline').then(function (cache) {
        console.log('[PWA] Cached offline page during Install' + response.url);
        return cache.put(offlinePage, response);
      });
    }));
});

//If any fetch fails, it will show the offline page.
//Maybe this should be limited to HTML documents?
self.addEventListener('fetch', function (event) {
  if (event.request.mode === 'navigate' ||
  (event.request.method === 'GET' &&
    event.request.headers.get('accept').includes('text/html'))) {
    event.respondWith(
      fetch(event.request).catch(function(error) {
          console.error('[PWA] Network request Failed. Serving offline page ' + error);
          return caches.open('pwa-offline').then(function(cache) {
            return cache.match('offline.html');
          });
        }
      ));
  }
});

//This is a event that can be fired from your page to tell the SW to update the offline page
self.addEventListener('refreshOffline', function (response) {
  return caches.open('pwa-offline').then(function (cache) {
    console.log('[PWA] Offline page updated from refreshOffline event: ' + response.url);
    return cache.put(offlinePage, response);
  });
});

我也尝试更改标题中的用户代理，但它不起作用。添加自定义标头值有效。.

fetch(event.request, {
        credentials: 'include', headers: {
          "User-Agent": "blbbbb",
          'X-My-Custom-Header': 'test' 
        } })

自适应网站的服务人员

0 个答案: