Question

我使用服务工作者使用自定义脱机页面创建了该站点的pwa版本。 https://ohladkov.github.io/在浏览页面时，会将它们添加到缓存中，当再次访问它们时，会从缓存中显示它们。单击链接但未连接到Internet且未缓存此页面时，将显示脱机页面。

offline page screen

刷新页面有两个选项：

当离线页面上显示互联网时，会显示一个链接更新页面。

offline page reload link

当互联网出现时，返回任何可用页面（主页
页面）并转到所需的页面。

offline page

使用第一个选项没有问题。第二个是野生动物园的问题。问题发生在：

点击了没有互联网连接的链接并收到了离线页面
下次已经与互联网连接相同链接并再次收到一个离线页面，虽然它应该显示一个在线页面

重现问题的步骤：

在启用互联网的情况下访问该网站
关闭互联网
转到page1.html（显示离线页面）
返回index.html（回家链接）
开启互联网
返回page1.html（显示离线页面，但是页面1.html 应该显示）
转到第2页 - 一切正常，在线页面加载

谁遇到过这样的问题？似乎safari记住请求 - 响应束并返回相同的结果，无论与Internet的连接如何。

＆＃13;

'use strict';

const CACHE_VERSION = 1;
const BASE_URL = location.origin + '/';
const OFFLINE_URL = '/offline.html';

const CURRENT_CACHES = {
  offline: 'offline-v' + CACHE_VERSION,
};

const URLS_TO_CACHE = [
  BASE_URL,
  OFFLINE_URL,
];


self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CURRENT_CACHES.offline)
      .then(cache => {
        return cache.addAll(URLS_TO_CACHE);
      })
      .then(() => {
        return self.skipWaiting()
      })
  );
});


self.addEventListener('activate', event => {
  let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
    return CURRENT_CACHES[key];
  });

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (expectedCacheNames.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
    .then(() => {
      return self.clients.claim()
    })
  );
});


// fetch requests
self.addEventListener('fetch', event => {
  const responsePromiseFactory = () => {
    return caches.open(CURRENT_CACHES.offline).then((cache) => {
      return cache.match(event.request).then(response => {
        if (response) {
          return response;
        }

        const fetchRequest = event.request.clone();

        return fetch(fetchRequest)
          .then(response => {
            const responseToCache = response.clone();

            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            cache.put(event.request, responseToCache)

            return response;
          })
        })
      })
      .catch(error => {
        return caches.match(OFFLINE_URL)
      })
  };

  event.respondWith(responsePromiseFactory());
});

＆＃13;

在safari桌面v.11.1和移动safari ios版本11.3.1

Answer 1

我面临着完全相同的情况，通过在脱机页面中添加以下标题，Safari现在可以在可以连接互联网的情况下为在线页面提供服务。

<head>
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="pragma" content="no-cache" />
</head>

Safari服务工作人员在自定义脱机页面

1 个答案: