我创建了一个渐进式Web应用程序。 它很简单,只有一个index.html,一个包含favicon等内容的“images”文件夹,一个sw.js和一个styles.css。
我的manifest.json代码
{
"lang" : "en",
"name" : "Test",
"short_name" : "Test",
"icons" : [
{
"src": "images/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"theme_color" : "#116b20",
"background_color" : "#1a1a1a",
"scope" : "1",
"start_url" : "/test",
"display" : "standalone",
"orientation" : "natural"
}
和 sw.js
self.addEventListener('install', function(event) {
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
caches.open('static').then(function(cache) {
cache.addAll(['/test/', '/test/index.html', '/test/manifest.json']);
})
);
});
self.addEventListener('activate', function(event) {
console.log('[Service Worker] Activating Service Worker ....', event);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
return response;
} else {
return fetch(event.request).then(function(res) {
return caches.open('dynamic').then(function(cache) {
cache.put(event.request.url, res.clone());
return res;
});
});
}
})
);
});
所以...目前,当我使用chrome从我的智能手机访问该网站时,一切都显示正确,标签颜色也很好,一切看起来都很好。但是我没有“添加到主屏幕”的横幅。
相反,当我在chrome的设置中,点击“添加到主屏幕”,并验证后,再进入添加的快捷方式时,该网站将作为应用程序启动,显示“启动画面”等等。
当我从电脑上访问该网站并观察“应用程序”和清单的调试器时,我有一个小链接“添加到主屏幕”。
你知道这可能是从哪里来的吗?
感谢帮助!
编辑:
我稍微进行了修改。我创建了一个子域名。现在我的URL如下:https://subdomain.example.com。所有内容都在子域名根目录下,在代码中,链接是相对的(例如:“img/name.png”)。
我的服务工作者没有任何错误,当我从电脑上使用Chrome浏览器访问时,我进入开发者工具-> 应用程序-> 清单选项卡,并点击“添加到主屏幕”时,横幅出现,可以将其添加到应用程序中,验证后正常工作。
当我在Chrome开发者工具-> 应用程序-> 服务工作者选项卡中看到的就是这个样子:
但是在我的智能手机上,我仍然没有得到提供“添加到主屏幕”的横幅。如果有人有想法,请告诉我...