Question

所以我想弄清楚如何在我的Rails应用中为我的offline.html页面加载缓存图像。我有两个问题：

我不知道到底要保留图像。
我不确定如何正确加载图片的来源img src="???"。

我的serviceworker.js.erb目前正在正确缓存图片：

function onInstall(event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function prefill(cache) {
      return cache.addAll([
        '<%= asset_path "base.js" %>',
        '<%= asset_path "minimal.css" %>',
        '/offline.html',
        '<%= asset_path "cute-cat.png" %>',
        '<%= asset_path "cute-dog.png" %>',
      ]).then(function () {
        console.log("WORKER: Install completed");
      });
    })
  );
}

function onFetch(event) {
  if ( requestBlackListed(event.request) ) { return; }
  event.respondWith(
    caches.match(event.request).then(function (cached) {
      if (cached && shouldReturnStraightFromCache(event.request.url)) {
        return cached;
      }
      return fetch(event.request)
        .then(fetchedFromNetwork)
        .catch(function fallback() {
           return cached || caches.match("/offline.html");
         })
      }
    )
  );

我的offline.html看起来非常像这样：

<!DOCTYPE html>
<html>
<head>
  <title>You are not connected to the Internet</title>
  <meta property="og:url" content="offline.html" />
  <meta property="og:title" content="Looks like you've lost your Internet connection" />
</head>
<body>
  <!-- This file lives in public/offline.html -->
  <div class="container">
    <div>
      <a href="/"><img src="/app/assets/images/cute-cat.png"/></a>
      <img src="/app/assets/images/cute-dog.png" />
      <p>You're offline!.</p>
    </div>
  </div>
</body>
</html>

图片目前从/app/assets/images/加载，但不起作用。我认为更智能的解决方案是从缓存加载两个图像而不是assets文件夹。任何想法都会很棒。

编辑：添加了获取处理程序（onFetch函数）。

Answer 1

右键，您可以加载图像，就像页面在线一样。

我不确定在哪里准确保留图片。 - 让SW处理它。只需在SW中正确声明路径，就像在线加载它们一样。它应该与SW的位置有关。
我不确定如何正确加载图片的源img src =“???”。 - 将您的离线页面视为在线。如果资产已被缓存，SW将查找资产。

如何从缓存中为离线页面加载图像？

1 个答案: