安装横幅 a2hs 在我的 pwa 上不起作用
Install banner a2hs doesnt work on my pwa
我正尝试在我的网站上制作 PWA。到目前为止添加清单和服务工作人员,一切正常,通过应用程序和 Lighthouse 检查 chrome 开发工具,一切都是绿色和可安装的。
这是我的清单:
{
"short_name": "ClickToPLay",
"name": "Твой магазин игр.",
"icons": [
{
"src": "/images/AppLogo1.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/AppLogo2.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/images/maskable_icon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/images/AppLogo3.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "https://clicktoplay.ru/",
"background_color": "#666c7a",
"display": "fullscreen",
"scope": ".",
"theme_color": "#c28e1f",
"orientation": "portrait-primary",
"description": "Аренда и покупка игр для PS4 и PS5"
}
这是我的 app.js :
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/sw.js')
.then((reg)=> console.log('service worker registered', reg))
.catch((err) => console.log('service worker not registered', err))
}
这是我的服务人员:
//install service worker
self.addEventListener('install', evt =>{
console.log('service worker has been installed');
});
//activate service worker
self.addEventListener('activate', evt =>{
console.log('service worker has been activated');
});
//fetch event
self.addEventListener('fetch', evt => {
console.log('fetch event', evt);
});
我可以手动将它添加到主屏幕,一切正常,但实际的 A2HS 横幅不会在 android chrome 或其他任何地方弹出。
谁能帮我提供解决方案或建议?
谢谢
Web 应用程序清单中的 start_url
应该是相对的,而不是完全限定的 URL。
使用"start_url": "/",
代替"start_url": "https://clicktoplay.ru/",
我也看了start_url
中列出的站点,那里的service worker可能有问题。如果您更新应用中的任何 HTML/CSS/JS,之前的缓存版本将继续提供,直到您更新您的 service worker。
看看 workbox 一种更轻松地构建和使用服务工作者的方法。
最终通过完全清除缓存解决了,代码中没有错误,完全是缓存的笑话。
要清除缓存,请继续 Chrome => 右上角按钮 => 高级 => 选择您的网站并按清除并重置。
谢谢大家
我正尝试在我的网站上制作 PWA。到目前为止添加清单和服务工作人员,一切正常,通过应用程序和 Lighthouse 检查 chrome 开发工具,一切都是绿色和可安装的。
这是我的清单:
{
"short_name": "ClickToPLay",
"name": "Твой магазин игр.",
"icons": [
{
"src": "/images/AppLogo1.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/AppLogo2.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/images/maskable_icon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/images/AppLogo3.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "https://clicktoplay.ru/",
"background_color": "#666c7a",
"display": "fullscreen",
"scope": ".",
"theme_color": "#c28e1f",
"orientation": "portrait-primary",
"description": "Аренда и покупка игр для PS4 и PS5"
}
这是我的 app.js :
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/sw.js')
.then((reg)=> console.log('service worker registered', reg))
.catch((err) => console.log('service worker not registered', err))
}
这是我的服务人员:
//install service worker
self.addEventListener('install', evt =>{
console.log('service worker has been installed');
});
//activate service worker
self.addEventListener('activate', evt =>{
console.log('service worker has been activated');
});
//fetch event
self.addEventListener('fetch', evt => {
console.log('fetch event', evt);
});
我可以手动将它添加到主屏幕,一切正常,但实际的 A2HS 横幅不会在 android chrome 或其他任何地方弹出。
谁能帮我提供解决方案或建议?
谢谢
Web 应用程序清单中的 start_url
应该是相对的,而不是完全限定的 URL。
使用"start_url": "/",
代替"start_url": "https://clicktoplay.ru/",
我也看了start_url
中列出的站点,那里的service worker可能有问题。如果您更新应用中的任何 HTML/CSS/JS,之前的缓存版本将继续提供,直到您更新您的 service worker。
看看 workbox 一种更轻松地构建和使用服务工作者的方法。
最终通过完全清除缓存解决了,代码中没有错误,完全是缓存的笑话。
要清除缓存,请继续 Chrome => 右上角按钮 => 高级 => 选择您的网站并按清除并重置。
谢谢大家