【发布时间】：2020-05-30 12:42:59
【问题描述】：
我最近进入前端开发，为托管在树莓派上的 nodejs 服务器制作接口。 我听说过渐进式网络应用程序，并希望用户能够将其安装在他的手机上。 所以这里是清单和服务工作者脚本。 清单：
{
"name": "Philips D6330",
"short_name": "Philips D6330",
"description": "A control app for the Philips D6330",
"icons": [
{
"src": "https://192.168.1.26/cdn/favicon.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "https://192.168.1.26",
"display": "fullscreen",
"orientation": "portrait",
"theme_color": "#333333",
"background_color": "#333333",
"scope": "/"
}
服务工作者：
const CACHE_NAME = 'cache';
const CACHE = [
'/',
'/cdn/offline.html',
'/cdn/style.css',
'/cdn/favicon.png',
'/cdn/linetoB.ttf',
'/cdn/linetoL.ttf',
'/cdn/neon.ttf',
'/cdn/not.png',
'/cdn/next.png',
'/cdn/pause.png',
'/cdn/play.png',
'/cdn/previous.png',
'/cdn/dots.png',
'/cdn/rfid.png'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(CACHE)
})
.then(self.skipWaiting())
)
})
self.addEventListener('fetch', function(event) {
if (event.request.mode === 'navigate') {
event.respondWith(
fetch(event.request)
.catch(() => {
return caches.open(CACHE_NAME)
.then((cache) => {
return cache.match('/cdn/offline.html');
})
})
);
}
else {
event.respondWith(
fetch(event.request)
.catch(() => {
return caches.open(CACHE_NAME)
.then((cache) => {
return cache.match(event.request)
})
})
);
}
})
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys()
.then((keyList) => {
return Promise.all(keyList.map((key) => {
if (key !== CACHE_NAME) {
console.log('[ServiceWorker] Removing old cache', key)
return caches.delete(key)
}
}))
})
.then(() => self.clients.claim())
)
})
我认为还可以告诉您所有这些都发生在我的本地网络上，因此我的节点服务器使用 https 和使用本教程制作的自签名证书：https://medium.com/@tbusser/creating-a-browser-trusted-self-signed-ssl-certificate-2709ce43fd15 但即使它是自签名证书，Service Worker 似乎也能在 Firefox 和 chrome 上很好地注册，因为它会存储文件并在离线时显示离线页面。
这是我的问题： 当我想从桌面版 chrome 安装它时，我可以但不能 chrome mobile（或三星互联网）... 这是我用来使其可安装的代码：
<script defer>
window.addEventListener('beforeinstallprompt', (event) => {
console.log('????', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
});
butInstall.addEventListener('click', () => {
console.log('????', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
promptEvent.userChoice.then((result) => {
console.log('????', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
});
});
window.addEventListener('appinstalled', (event) => {
console.log('????', 'appinstalled', event);
});
</script>
来自这里https://web.dev/codelab-make-installable/
这是安装前提示事件的屏幕截图以及灯塔报告（如果可以提供帮助）（顺便说一下，网址中的加号表明它正在工作）： console log infos
但在移动设备上，加号不显示，当我单击按钮时没有任何反应...而且由于我无法访问控制台，因此看不到任何错误...
----- 编辑 ------
在使用 alert 记录控制台所说的内容后，我认为问题出在 service worker 确实注册良好，因为我明白了： “ServiceWorker 注册失败：SecurityError: 无法使用脚本 ('https://192.168.1.26/sw.js') 为范围 ('https://192.168.1.26/') 注册 ServiceWorker：获取脚本时发生 SSL 证书错误。”。
有没有办法让浏览器信任我的自签名证书？
欢迎任何帮助、建议或评论^^
【问题讨论】：
-
这是您第一次在该移动设备上进行测试。如果没有，你确定你已经完全清除了浏览器现金并完全卸载了以前的测试吗？
-
@Mathias 我尝试清除缓存，但没有成功。似乎服务人员没有很好地注册......
-
您是否还删除了任何以前的安装？ - 如果没有，请滚动浏览您的应用程序并查找您的图标。此外，如果可能，请尝试在另一台设备上排除设备问题。
-
我尝试在另一部从未安装过但无法正常工作的手机上对其进行测试......无论如何，谢谢
标签： google-chrome progressive-web-apps service-worker