javascript - 清单:没有添加到主屏幕
问题描述
我正在尝试将横幅添加到主屏幕,我安装了 service-worker 和 manifest,尝试了这个但它没有显示横幅。
这是我的代码:
索引.php
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
<script>
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
</script>
</html>
清单.json
{
"short_name": "BetaPage",
"name": "BetaPage",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [
{
"src": "img/apple.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "img/grapes.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "img/lemon.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "img/orange.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.php"
}
服务工作者.js
self.addEventListener('install', function(event) {
console.log("installed");
});
self.addEventListener('activate', function(event) {
// Perform some task
console.log("activated");
});
self.addEventListener('fetch', function(event) {
console.log("fetched");
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request);
})
);
});
这是我的服务员
我怎样才能解决这个问题?我目前正在我的本地主机上执行此操作。
更新 好的,我设法使用本指南https://codelabs.developers.google.com/codelabs/add-to-home-screen/#0完成这项工作
我现在的问题是提示没有显示在Firefox中。下面的图片都是Firefox,一个工作的和我的本地主机。
如您所见,另一个有另一个图标,而我的工作没有,但横幅适用于 chrome 寿
解决方案
看看这篇文章:PWA 提示和技巧
推荐阅读
- c# - C# 使文件只读
- javascript - 从每个数组的对象制作 pdf 文件
- windows - 如何向使用 sessionhost 的用户发送 RdsUserSessionMessage?
- electron - 从 NAS 运行时,Electron 应用程序变慢
- java - java - 如何在Java的XWPFDocument中添加新行?
- json - 快速不规则 json 解析
- c# - 将 JToken 添加到 JObject 中的特定 JsonPath
- javascript - 订阅后如何获取用户信息?
- angular - 单击按钮在 Angular 中下载文件
- spacy - 将 SpaCy PhraseMatcher 保存到磁盘