- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 service-worker 来缓存一些静态文件,但我也在尝试将我的 json 数据缓存在 indexedDB 中。因此,每当我的应用程序访问 url“www.someurl.com/api/my-items”时,它就会被 service worker 拦截,而是返回一个自定义响应以及我的 indexedDB 数据。
我在这里使用基于 promise 的 idb https://github.com/jakearchibald/idb
到目前为止,我想出了以下代码。据我了解,我需要拦截获取事件并返回自定义响应。
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()”专门创建响应。我确信有一个我不完全理解的基于 promise 的概念。
最佳答案
我遇到了同样的情况,它不是自定义响应我需要拦截 Http 调用并在索引数据库中查看相同的 URL,我已经推送了 URL 和响应并从那里读取并作为响应给出
在 Service worker fetch 事件中,我实现了网络优先方法,这意味着如果发生任何错误,它将首先查找服务,然后从索引数据库中读取并返回响应。
fetch(event.request).catch(function (result) { });
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);
}
});
}
希望对您有所帮助。
关于service-worker - 拦截 fetch 事件并返回 indexedDB 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50668699/
我正在运行此代码并在没有互联网连接的情况下进行测试: fetch(url, options) .then(res => { // irrelevant, as catch happens
function fetchHandler(evt) { console.log('request:' + evt.request.url); dealWithRequest(evt)
我在 AdventureWorks2016 上执行了两个示例查询,并得到了相同的结果。那么什么时候应该使用 NEXT 或 FIRST 关键字? select LastName + ' ' + Firs
我有以下查询: @Query("SELECT new de.projectemployee.ProjectEmployee(employee) " + "FROM ProjectEmpl
我正在尝试使用 fetch on react 来实现客户端登录。 我正在使用护照进行身份验证。我使用的原因 fetch而不是常规 form.submit() , 是因为我希望能够从我的快速服务器接收错
我正在尝试将我的 Aurelia 项目从 beta 版本升级到 3 月版本。 我遇到的错误之一是: Cannot find name 'Request'. 谷歌搜索会在 GitHub 上显示此问题:h
见标题。在我们的react项目中调用fetch时,一位(现已离职)开发人员最初使用from fetch to window.fetch。我不确定两者之间的区别,也无法在网上找到任何结论(W3Schoo
这个问题在这里已经有了答案: HTTP status code 401 even though I’m sending credentials in the request (1 个回答) How
这是代码片段: var fetch = require("node-fetch"); var fetchMock = require("fetch-mock"); function setupMock
我在这里看到了两种不同的抓取方式: https://github.com/github/fetch https://github.com/matthew-andrews/isomorphic-fetc
以下git命令有什么区别? git fetch origin 和 git fetch --all 从命令行运行它们看起来就像它们做同样的事情。 最佳答案 git fetch origin 仅从 ori
我有一个不断改变值的动态 json。我想用该数据绘制图表所以我将动态数据存储到数组然后用该数组绘制图表。目前我创建了 serinterval 用于从 api 获取新数据。但问题是如果新数据没有,它会再
我有一个很大的 JSON blob,我想预先加载我的网页。为此,我添加了 到我的页面。我也有一个 JS 请求来获取相同的 blob。 这不起作用,控制台报告: [Warning] The resour
我们在单页 JavaScript 应用程序发出 fetch 请求时遇到不一致的客户端错误。值得注意的是,它们都是同源请求。 let request = new Request(url, options
我是 ReactJS 的新手,我一直在阅读如何从 api 获取和发布数据。我见过这两个,但我不知道该用什么以及两者之间有什么区别?我读了它,但我不确定我会用什么。谢谢! react-fetch wha
Doctrine中注解@ManyToOne中的fetch="EAGER"和fetch="LAZY"有什么区别? /** * @ManyToOne(targetEntity="Cart", casca
我想要获取一个 api,然后调用另一个 api。在 javascript 中使用这样的代码是否明智? fetch(url, { method: 'get', }).then(function(re
我有一个组件,它依赖于 2 个端点来检索所需程序的名称。我有 2 个端点。第一个端点返回程序列表,它是一个对象数组。目前,它仅返回 4 个节目(2 个节目 ID 为“13”,另外两个节目 ID 为“1
我的应用程序从外部源(配置文件)接收查询,因此它必须从查询结果中获取列。我有一些代码: typedef union _DbField { text text[512]; sword i
我有一个实体A,它与实体B有对多关系。 Entity A -->> Entity B 我需要在多个屏幕上引用一对多关系的计数。此外,我可以多次从 Entity A
我是一名优秀的程序员,十分优秀!