Question

我有一个Json对象存储在缓存Please see my cache here中。

我想从我的服务人员那里检索json值

   caches.open('my-post-request').then(function (cache) {
      cache.match('/cached-products.json').then(function (matchedResponse) {
        return fetch('/cached-products.json').then(function (response) {
          return response;

        })
      });
    });

有没有办法做到这一点？在控制台中浏览响应，我只能看到属性标头，确定，状态，类型，URL，正文，但是我无法在任何地方找到我的json值。

任何建议，我将不胜感激。

谢谢

Answer 1

您可以尝试这样的事情：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card col-8 offset-2 p-0 mt-5">
  <div class="card-body p-0">
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr class="row m-0">
          <th class="col-3" scope="col">#</th>
          <th class="col-3" scope="col">First</th>
          <th class="col-3" scope="col">Second</th>
          <th class="col-3" scope="col">Third</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row m-0">
          <th class="col-3" scope="row">1</th>
          <td class="col-3">Blah</td>
          <td class="col-3 element">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">2</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">3</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">4</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">5</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">6</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

这将解决您的问题。从上面的代码中，您可以简单地以var CACHE_NAME = 'dependencies-cache'; self.addEventListener('install', function(event) { console.log('[install] Kicking off service worker registration!'); event.waitUntil( caches.open(CACHE_NAME).then(function(cache) { // With the cache opened, load a JSON file containing an array of files to be cached return fetch('files-to-cache.json').then(function(response) { return response.json(); // Once the contents are loaded, convert the raw text to a JavaScript object }).then(function(files) { console.log('[install] Adding files from JSON file: ', files); // this will log the cached json file return cache.addAll(files); // Use cache.addAll just as you would a hardcoded array of items }); }) .then(function() { console.log( '[install] All required resources have been cached;', 'the Service Worker was successfully installed!' ); return self.skipWaiting(); // Force activation }) ); });的形式返回响应，以将原始文本转换为Javascript对象。要完整实施Service Worker以缓存JSON文件，可以访问此documentation。

如何从Service Worker检索存储在缓存中的JSON对象？

1 个答案: