安装横幅 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 => 右上角按钮 => 高级 => 选择您的网站并按清除并重置。

谢谢大家