javascript - 如果动态缓存中不存在静态页面，如何在 PWA 中加载静态页面

Question

我的 PWA 使用网络优先缓存策略。

如果请求成功，则以url为key存储在动态缓存中。

如果请求失败，服务工作线程会查找该请求是否存储在动态缓存中并返回它。

那部分工作正常，我可以在离线时访问我在线访问过的所有页面，问题是我想返回带有一个按钮的静态 html 页面，当我没有任何内容时，该按钮会导致主页动态缓存。

我想这样做，因为如果我尝试访问尚未动态缓存的页面，我会卡在离线页面上，因为全屏模式下没有浏览器后退按钮。

我的服务人员代码:

event.respondWith(
     fetch(event.request)
          .then(function(res) {
              return caches.open('eyewit')
            .then(function(cache) {
              // console.log( 'Goes to cache: '  + event.request.url );
              // console.log( 'DYNAMIC' );
              let url = event.request.url;

              // dont cache maps
              if (url.indexOf('google') == -1) {
                  // store request to dynamic cache
                  cache.put(url, res.clone());
              } 
              return res;
            })
   })
  .catch(function(err) {
    // look for value in cache if request fails
    console.log( 'From cache' );
    // I would like to return static page ./offline.html if there is nothing in cache
    // with key event.request, if value exist return it instead
    // caches.match returns promise
    return caches.match(event.request);
  })
);

我尝试这样做，但没有成功，因为caches.match(event.request)返回promise:

.catch(function(err) {
     // return value from dynamic cache if exists
     if(caches.match(event.request)) {
          return caches.match(event.request);
     } else {
         // serve static page
         return caches.open('static_cache')
          .then((cache) => {
            return cache.match('offline.html');
          });
     }

Answer 1

如果caches.match返回一个promise，你需要等待响应

.catch(function(err) {
     // return value from dynamic cache if exists
     return caches.match(event.request).then(function(result) {
          // If no match, result will be undefined
          if (result) {
               return result;
          } else {
               return caches.open('static_cache')
                 .then((cache) => {
                     return cache.match('offline.html');
               });
          }
     });