- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用的是 MacOS/OSX 12.3 Sierra 上的 Chrome 版本 57.0.2987.110(64 位),
我设法让一名服务人员工作,但我必须说我在这方面是新手。
我现在尝试让它使用 IndexedDB 并在其中存储数据。
它以 http 方式从本地 Web 服务器获取数据,并以 json 格式毫无问题地检索数据。
数据格式为:
[{"id":"1", "...":"...", ...},
{"id":"2", "...":"...", ...},
{"id":"3", "...":"...", ...},
...
{"id":"n", "...":"...", ...}]
然后它将数据添加到 IndexedDB 中,显然没有问题,因为触发了 onsuccess 回调......
entityObjectStore.add success : Event {isTrusted: true, type: "success", target: IDBRequest, currentTarget: IDBRequest, eventPhase: 2…}
但它没有出现在 Chrome 开发工具中!
这是我的服务人员:
self.addEventListener('install',function(event)
{
event.waitUntil(
(new Promise(function(resolve,reject)resolve()}))
.then(function()
{return self.skipWaiting();}));
});
self.addEventListener('activate', function(event)
{
event.waitUntil(
(new Promise(function(resolve,reject){resolve()}))
.then(function() {return self.clients.claim();}));
});
self.addEventListener('message', function(event)
{
if(event.data.command=="data.load")
{
var options = event.data.options
var url = new URL(event.data.host+options.source);
var parameters = {entity:options.name,
options:encodeURIComponent(options.options)};
Object.keys(parameters)
.forEach(key => url.searchParams.append(key,
parameters[key]))
fetch(url).then(function(response)
{
if(response.ok)
{
response.json().then(function(data_json)
{
var entityData = data_json;
var request = indexedDB.open(options.name);
request.onerror = function(event)
{
console.log("indexedDB.open error :",event);
};
request.onsuccess = function(event)
{
console.log("indexedDB.open success :",event)
var db = event.target.result;
}
request.onupgradeneeded = function(event)
{
console.log("indexedDB.open upgrade :",event)
var db = event.target.result;
db.createObjectStore(options.options.id, { keyPath: "id" });
objectStore.transaction.oncomplete = function(event)
{
var entityObjectStore = db.transaction(options.options.id, "readwrite").objectStore(options.options.id);
for (var i in entityData)
{
var addRequest = entityObjectStore.add(entityData[i]);
addRequest.onerror = function(event)
{
console.log("entityObjectStore.add error :",event);
};
addRequest.onsuccess = function(event)
{
console.log("entityObjectStore.add success :",event);
};
}
}
};
});
}
});
}
else if(event.data.command=="data.get")
{
var command = event.data;
var request = indexedDB.open(command.domain);
request.onerror = function(event)
{
console.log("indexedDB.open error :",event);
};
request.onsuccess = function(event)
{
console.log("indexedDB.open success :", event)
var db = event.target.result;
var transaction = db.transaction([command.domain]);
var objectStore = transaction.objectStore(command.entity);
var request = objectStore.get(command.id);
request.onerror = function(event)
{
console.log("objectStore.get error :",event);
};
request.onsuccess = function(event)
{
console.log("objectStore.get success :",event);
console.log("request.result=" + request.result);
};
}
}
});
这是我使用的 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<title>My service worker app</title>
</head>
<body>
<button id="update">Update</button>
<div id="log"></div>
<script type="text/javascript">
function sendMessage(message)
{
return new Promise(function(resolve, reject)
{
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(event)
{
if (event.data.error)
{
reject(event.data.error);
}
else
{
resolve(event.data);
}
};
});
}
if (navigator.serviceWorker.controller)
{
var url = navigator.serviceWorker.controller.scriptURL;
var initData = [
{
name:"my_entity_type",
source:"/webapp/data",
options:{id:"my_entity_type_id"}
}
]
for(var dataIndex in initData)
{
var data = initData[dataIndex]
sendMessage({
command:"data.load",
host: document.location.origin,
options: data
});
}
}
else
{
navigator.serviceWorker.register('/webapp/lt_sw.js')
.then(function(registration)
{
debug('Refresh to allow ServiceWorker to control this client', 'onload');
debug(registration.scope, 'register');
});
}
navigator.serviceWorker.addEventListener('controllerchange',
function()
{
var scriptURL = navigator.serviceWorker.controller.scriptURL;
debug(scriptURL, 'oncontrollerchange');
});
document.querySelector('#update').addEventListener('click',
function()
{
navigator.serviceWorker.ready.then(function(registration)
{
registration.update()
.then(function()
{
console.log('Checked for update');
})
.catch(function(error)
{
console.error('Update failed', error);
});
});
});
function debug(message, element)
{
var target = document.querySelector('#log');
console.log(element,":",message)
target.textContent = message;
}
</script>
</body>
</html>
知道我做错了什么吗?
编辑 1:
我修改了 html 文件中的脚本,以便更新机制向服务工作人员发送另一条消息以请求数据:
document.querySelector('#update').addEventListener('click',
function()
{
navigator.serviceWorker.ready.then(function(registration)
{
registration.update()
.then(function()
{
console.log('Checked for update');
sendMessage({
command:"data.get",
domain:"database_name",
entity: "my_entity_type",
id: "my_entity_id"
});
})
.catch(function(error)
{
console.error('Update failed', error);
});
});
});
我添加了以下行:
indexedDB.webkitGetDatabaseNames().onsuccess = function(sender,args){ console.log("data.get all dbs:",sender.target.result); };
就在数据查找部分的开头:
else if(event.data.command=="data.get")
{
要列出 Chrome 上的所有 IndexedDB,如下所述:https://stackoverflow.com/a/15234833/2360577我得到了我之前创建的所有数据库!
data.get all dbs: DOMStringList {0: "db1", 1: "db2", 2: "db3", 3: "db4", length: 4}
然后,我继续通过添加以下行来列出这些数据库中的所有 ObjectStore,也如上一个链接中所述:
indexedDB.open(<databaseName>).onsuccess = function(sender,args)
{"<databaseName>'s object stores",console.log(sender.target.result.objectStoreNames); };
除此之外,数据经过处理但显然不起作用,它们都有一个与包含预期数据的数据库同名的对象存储......
db1's object stores DOMStringList {0: "db1", length: 1}
db2's object stores DOMStringList {length: 0}
db3's object stores DOMStringList {0: "db3", length: 1}
db4's object stores DOMStringList {0: "db4", length: 1}
然后我查看了对象存储的内部......
indexedDB.open("db3").onsuccess = function(event)
{event.target.result.transaction(["db3"]).objectStore("db3")
.getAll().onsuccess = function(event)
{console.log("objectStore.getAll() success :",event.target.result)};};
条目正如预期的那样存在!但不在应用程序/存储中...
编辑2:
db2 的错误显然是我没有刷新数据库中的数据......这部分现在可以工作......
编辑3:
答案很简单,只需关闭并重新打开开发工具......就像@wOxxOm建议的那样......
最佳答案
如果我关闭 DevTools 并再次打开,它对我有用。你尝试过吗?
关于javascript - 我的 Service Worker 中的 IndexedDB add() 成功,但我无法在 Chrome 开发工具应用程序/存储中看到数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43067229/
非常简单的问题 - 是否可以通过 Chromium 创建 google chrome 扩展,并让在不同操作系统上运行 Chrome 的人使用相同的扩展? 我正在Ubuntu上开发。 最佳答案 是的,完
我了解 chrome.bookmarks API(记录在 http://goo.gl/tIb6V6 )旨在用于开发访问/操作我的 Chrome 书签的 Chrome 扩展程序(当然要在 Chrome
在比较开源浏览器 Firefox 和 Chromium 的扩展、附加组件和列表时,我试图找到一些有趣的数据。 我感兴趣的是多宿主扩展(两个浏览器列表上都可用的扩展)。 但是当浏览 Chromium 扩
使用新的 chrome.notifications API,我无法从我的扩展程序中获取通知以显示。即使是最基本的通知也无法为我显示,但我没有收到任何错误,并且回调函数已正确执行。 list .json
我正在构建一个在 Chrome 上运行的信息亭媒体,可以播放带音频的视频。我知道默认情况下,chrome 只允许自动播放带有静音 Prop 的视频。 而且我知道我可以通过 chrome://flags
我从来没有真正写过 真实 Chrome 扩展程序。不久前我做了一个只是一个链接下拉列表,但这并不重要。无论如何,与其先回到关于编写 Chrome 扩展程序的大量教程中,不如先确保我的想法是可行的。 我
主要目的是在单个容器中运行多个 chrome 浏览器(9 个浏览器)。 我有一个集线器和节点设置,其中包含多个浏览器的容器,可在单个 chrome 节点容器中运行。我使用以下 docker 命令创建了
我想写一个小的 chrome 扩展程序,它应该从网页 A(当前网页)获取信息,将选项卡更新到网页 B,然后将代码注入(inject)网页 B。不幸的是,以下代码正在将网页更新到 B 但注入(injec
是否可以打开 Chrome 开发者工具来检查 Chrome 应用? 最佳答案 所有可调试目标都列在 chrome://inspect/ 下。请参阅“应用程序”标签。 关于google-chrome -
我正在为 Google Chrome 开发一个应用程序,我想知道如何收费。 问题是我住在巴西,在这个链接上它告诉我它不支持 Chrome 网上应用店付款。如果没有 Chrome 网上商店付款,我可以通
我刚刚更新到 Chrome 32.0.1700.76 m(在 Win7 上)并且开发人员工具已更改。 特别令人痛苦的是用于检查页面元素的放大镜图标消失了。也没有提到它的快捷方式列表。 任何人都知道这已
我在 chrome-extension API (chrome.webrequest) 中遇到问题。 我的 list .json { "name": "tesst", "version": "
我已经制作了 chrome 主机来在我的扩展程序和我的进程之间传递 native 消息,我的进程在 chrome 启动时启动,但在我关闭 chrome 时不关闭,我应该向主机的 list 添加参数还是
文档对此非常不清楚。我知道如果您自己托管您的扩展程序,您可以通过增加版本号来自动更新您的扩展程序。但是,我不知道您是否可以在仍发布到 chrome 网上商店的同时进行自托管。 我不敢相信 Google
我最近一直在使用 Selenium WebDriver。我还专门与 chromedriver 合作。每当我打开一个新的 chrome 窗口 (driver.get(url)) 时,Chrome 都会以
我指的是chrome://flags 我很想知道是否可以通过自定义 chrome 扩展启用或禁用特定的 chrome 标志? 例如-我想启用 Enable Media Source API on e
当我在 chrome 开发者仪表板上向我的扩展程序上传更新时, 它无法这样做,它显示, An error occurred: Failed to process your item. Chrome W
我正在尝试编写一个需要用户身份验证的 chrome 扩展。 Google's tutorial建议我需要先上传到网上商店才能获得 key : Login to the Google APIs Cons
我已经开发了一个 Chrome 扩展程序并且我已经打包了它。 我将我的扩展程序发送给一些人试用,但 Chrome 开始阻止它在商店中找不到的扩展程序。 有没有办法安装我的扩展程序而不会被 Chrome
某些 Chrome 扩展不适用于 Chromium。例如:http://code.google.com/chrome/extensions/samples.html#5d81304a17cf7ac28
我是一名优秀的程序员,十分优秀!