Why does my web manifest say no matching service worker detected?

I am trying to add a web manifest to my website, I am very new to it so I just read a tutorial and thought I was done, when I tested it I saw the error "No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest." which was very confusing for me, I searched the internet and could not find the answer. If any of you could help me it would be great!

MANIFEST.WEBMANIFEST:

    {
    "short_name": "Hi!",
    "name": "Longgg name",
    "icons": [
      {
        "src": "home/icon.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "home/icon2.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": "https://example.com/home",
    "background_color": "#df4949",
    "display": "standalone",
    "scope": "https://example.com/home",
    "theme_color": "#df4949",
    "shortcuts": [
      {
        "name": "Scroll to top",
        "short_name": "To Top",
        "description": "Scroll to the top of the page!",
        "url": "home#home",
        "icons": [{ "src": "/icons/top.png", "sizes": "192x192" }]
      },
      {
        "name": "Contact Us",
        "short_name": "Contact",
        "description": "Want to get in touch? Contact us for a no-obligation quote!",
        "url": "home#contact-form",
        "icons": [{ "src": "/icons/letter.png", "sizes": "192x192" }]
      }
    ],
    "description": "Description...!",
    "screenshots": [
      {
        "src": "screenshots/1.png",
        "type": "image/png",
        "sizes": "969x1292"
      },
      {
        "src": "screenshots/2.png",
        "type": "image/png",
        "sizes": "969x1292"
      }
    ],
    "prefer_related_applications": false

}

I don't know if this is relevant but this is how I reference that document:

<link rel="manifest" href="/manifest.webmanifest">