3

我正在使用 service-worker 缓存一些静态文件，但我也在尝试将我的 json 数据缓存在 indexedDB 中。因此，每当我的应用程序访问 url “www.someurl.com/api/my-items”时，它都会被 service worker 拦截，相反，我的 indexedDB 数据会返回一个自定义响应。

我在这里使用基于承诺的 idb https://github.com/jakearchibald/idb

到目前为止，我想出了以下代码。据我了解，我需要拦截 fetch 事件并返回自定义响应。

importScripts('idb.js');
var pageCache = 'v1';
var idbName = 'data';
var idbTableName = 'idbtable';

var cacheFiles = [
'../js/',
'../css/file1.css',
'../css/fle2.css'
];

//Install and Activate events
 //...

//Fetch Event
self.addEventListener('fetch', (event) => {
var requestUrl = new URL(event.request.url);

    if (requestUrl.origin !== location.origin) {
        //...

        if(event.request.url.endsWith('/api/my-items')){
          event.respondWith(

              idb.open(idbName, 1).then((db) => {
                  var tx = db.transaction([idbTableName], 'readonly');
                  var store = tx.objectStore(idbTableName);
                  return store.getAll();
              }).then(function(items) {
                  return new Response(JSON.stringify(items),  { "status" : 200 , "statusText" : "MyCustomResponse!" })
              })

          )

        } 

        //...
    }
 })

我试图了解是否有一种更简洁的方式来编写此代码，而无需专门使用“new Response()”创建响应。我确信有一个我不完全理解的基于承诺的概念。

4

3 回答 3

2

我遇到了同样的情况，它不是自定义响应我需要拦截 Http 调用并在索引数据库中查看相同的 URL，我已经推送了 URL 和响应并从那里读取并作为响应给出

在服务工作者获取事件中，我实现了网络优先方法，这意味着如果发生任何错误，它将首先查找服务，然后从索引数据库中读取并返回响应。

获取（事件。请求）。捕捉（函数（结果）{}）；

  self.addEventListener('fetch', function (event) {
     if (event.request.url.includes('[yourservicecallName]')) {
                event.respondWith(
                    fetch(event.request).catch(function (result) {
                       return readtheDatafromIndexedDb('firstDB', 'firstStore', event.request.url).then(function(response)
                        {
                            return response;
                        });
                    })
                );
            }
  });

从索引数据库中读取并返回响应的方法

function readtheDatafromIndexedDb(dbName, storeName, key) {
   return new Promise((resolve, reject) => {
    var openRequest = indexedDB.open(dbName, 2);
    openRequest.onupgradeneeded = function (e) {
        let db = request.result;
        if (!db.objectStore.contains(storeName)) {
            db.createObjectStore(storeName, { autoIncrement: true });
        }
    }
    openRequest.onsuccess = function (e) {
        console.log("Success!");
        db = e.target.result;
        var transaction = db.transaction([storeName], "readwrite");
        var store = transaction.objectStore(storeName);
        var request = store.get(key);
        request.onerror = function () {
            console.log("Error");
            reject("unexpected error happened");
        }
        request.onsuccess = function (e) {
            console.log("return the respose from db");
            //JSON.parse(request.result)
            resolve(new Response( request.result, { headers: { 'content-type':'text/plain' } } ));
        }
    }
    openRequest.onerror = function (e) {
        console.log("Error");
        console.dir(e);
    }
   });

}

希望这会帮助你。

于 2018-09-11T14:14:53.703 回答
1

我会推荐使用像 Workbox 这样的辅助库来简化缓存存储 API。这个 SO answer讨论了使用 IndexDB -idb helper classes vs cache API - work-box。

Workbox 是领导 PWA 实施的 Chrome 团队。WorkBox 也是他们经过多年学习重新编写的新库（来自 sw-precache）。值得考虑。

于 2018-06-04T14:15:43.470 回答
1

OP 要求“以一种更简洁的方式编写此代码，而无需专门使用new Response()”创建响应。在之前的评论中，我说“IMO，没有 -Response必须明确创建”。在对这个问题进行了更多思考并在应用程序中自己实施了以下方法之后，我相信有“一种更简洁的方式来编写此代码”。

谷歌的“服务工作者中的实时数据”指出“一旦创建了 IndexedDB 数据库，就可以从 IndexedDB 本地读取数据，而不是向后端数据库发出网络请求”（我的重点）——或者，通过扩展，而不是发出请求到服务工作者，正如谷歌的“高性能服务工作者加载”中所述，“无论何时发出网络请求，你最终都会引入一个小的延迟命中。如果不是，启动服务工作者会产生开销已经在运行，并且将服务工作者的响应传递给发出请求的客户端也会产生开销。”。

因此，一旦 JSON 数据存储在浏览器的 IndexedDB 中，您的应用程序就可以直接从那里访问它，而无需您的应用程序访问 URL “www.someurl.com/api/my-items”，从而产生开销服务工作者的调解。（我们假设已经有一个fetch来自该地址的初始网络将 JSON 数据加载到 IndexedDB 中。）

respondWith()因此，如果我们从您的事件处理程序中提取 IndexedDB 处理代码fetch，我们可以使用它来替换您fetch在应用程序本身中的调用：

idb.open(idbName, 1).then((db) => {
    var tx = db.transaction([idbTableName], 'readonly');
    var store = tx.objectStore(idbTableName);
    return store.getAll();
})

或者，将 Jake Archibald 的最新idb实现与async/await：

const db = await idb.openDB(idbName);
return await db.getAll(idbTableName);
于 2020-03-08T04:29:33.583 回答