Question

我想将服务工作者添加到我的网站，以便为我的网站用户提供良好的离线体验。（网站后端是PHP）

我还是Javascript承诺和服务工作者的新手，但这是我到目前为止所做的：

我的 index.php 页面有此脚本注册服务工作者

<script> 
    if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js')};
</script>

对于服务工作者文件，我使用以下代码

var CACHE_STATIC_NAME = 'static-v74';
var CACHE_DYNAMIC_NAME = 'dynamic-v74';

self.addEventListener('install', function (event) {
  console.log('Installing Service Worker ...', event);
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
      .then(function (cache) {
        console.log('Precaching App Shell');
        cache.addAll([
          'offline.php', // offline page
          'assets/bundle.css',
          'assets/bundle.js',
          'assets/images/logo.jpg',
          'assets/images/favicon.ico'
        ]);
      })
  )
});

self.addEventListener('activate', function (event) {
  console.log('Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    // Try the network
    fetch(event.request)
      .then(function(res) {
        return caches.open(CACHE_DYNAMIC_NAME)
          .then(function(cache) {
            // Put in cache if succeeds
            cache.put(event.request.url, res.clone());
            return res;
          })
      })
      .catch(function(err) {
          // Fallback to cache
          return caches.match(event.request);
      })
  );
});

事实上，这段代码正常运行：

（1）注册服务工作者＆amp;获取我的静态缓存文件的副本。（2）激活新的服务工作程序时，它会删除旧的缓存。（3）对于每个新的请求，它首先从网络获取＆amp;如果成功，它会在缓存中放入一个新的请求副本。（4）如果在离线时未能发出网络请求，则会向用户返回最后一次网络请求的新副本。

我想要实现的是（如果 - 用户离线 - 并尝试请求不在缓存中的新页面，他应该被重定向到保存在静态中的（offline.php）页面缓存），如下所示

// If both (network & cache) fail, show a generic fallback:
return caches.match('offline.php');

但是我有一个问题，我不知道在（fetch）步骤中我应该在我的（sw.js）文件中添加此行，我真的尝试阅读有关服务工作者的更多信息。 Javascript承诺并尝试在我的代码中多次将此行添加到不同的位置，但每次都不能使其工作但是错过了上一个场景或保留场景但未能实现此目标。

非常感谢您的帮助＆amp;非常感谢提前。

Answer 1

在你的fetch事件监听器中：

.catch(function(err) {
      // Fallback to cache
      return caches.match(event.request);
  })

caches.match（event.request）实际上返回一个Promise，如果从缓存中找不到匹配项，则该Promise将解析为undefined。

检查未定义并从缓存中返回offline.php：

return caches.match(event.request)
  .then(function(res){
    if (res === undefined) { 
      // get and return the offline page
    } 
    return res;
})

服务工作者 - 首先通过网络缓存并回退到静态页面

1 个答案: