CODEWITHSUNDEEP
progressive-web-apps
Bryx
Bryx

Reputation: 3

Progressive web apps

I'm facing a huge technical problem. I can't see "add to home screen". However, I did follow the installation guidelines.I want to know if I have created a small unintended malfunction and why it doesn't show up.

Link to the site : https://www.bclover.net

I apologize in advance, the site is in French. I hope that won't be too much of a hindrance to your assistance.

Thank you

EDIT :

Manifest.json

{
  "lang": "fr",
  "dir": "ltr",
  "name": "Black Clover FR",
  "short_name": "Bclover",
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "/",
  "start_url": "/?utm_source=pwa",
  "icons": [
    {
      "src": "styles/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Lighthouse

Upvotes: 0

Views: 103

Answers (1)

bekliev
bekliev

Reputation: 2651

I checked out your website and saw error in the console that says sw.js file is responding with 404 error by the server: enter image description here

So you have to checkout if the file exists on your server.

I recommend you to follow this tutorial (web.dev) by Google - well written.

In your case you have to register service worker which is shown how to do that in this article (web.dev)

And I recommend you to use Workbox library (this from Google too) to ease the pain while making PWA web app

Upvotes: 1

Related Questions