Gatsby: No matching service worker detected

[ahummel25]

Summary

Relevant information

I followed the steps to add a service worker to my site and was hoping to have full PWA functionality. However, when viewing the manifest in Chrome dev tools, the installability section says, No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest.

When I pull up my site on my phone, there is no option to install the home icon like I would expect.

I pasted the contents of my gatsby-config.js below since that is really the only thing that needs to be modified per the docs - https://www.gatsbyjs.org/docs/add-a-manifest-file/

Any ideas what I might be missing?

System:
OS: macOS 10.15.2
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.13.1 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.12.1 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 79.0.3945.130
Firefox: 70.0.1
Safari: 13.0.4
npmPackages:
gatsby: ^2.10.0 => 2.18.6
gatsby-image: ^2.2.34 => 2.2.34
gatsby-plugin-canonical-urls: ^2.1.0 => 2.1.16
gatsby-plugin-emotion: ^4.1.0 => 4.1.16
gatsby-plugin-manifest: ^2.2.34 => 2.2.34
gatsby-plugin-offline: ^3.0.32 => 3.0.32
gatsby-plugin-react-helmet: ^3.1.0 => 3.1.16
gatsby-plugin-sharp: ^2.3.5 => 2.3.5
gatsby-plugin-typescript: ^2.1.0 => 2.1.20
gatsby-remark-copy-linked-files: ^2.1.0 => 2.1.31
gatsby-remark-images: ^3.1.0 => 3.1.35
gatsby-remark-prismjs: ^3.3.0 => 3.3.25
gatsby-remark-responsive-iframe: ^2.2.0 => 2.2.28
gatsby-remark-smartypants: ^2.1.0 => 2.1.17
gatsby-source-filesystem: ^2.1.0 => 2.1.40
gatsby-transformer-json: ^2.2.0 => 2.2.20
gatsby-transformer-remark: ^2.5.0 => 2.6.39
gatsby-transformer-sharp: ^2.3.7 => 2.3.7
npmGlobalPackages:
gatsby-cli: 2.7.39

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: "Andrew Hummel Profile",
    description:
      "A starter kit for TypeScript-based Gatsby projects with sensible defaults.",
    keywords: "gatsbyjs, gatsby, javascript, sample, something",
    siteUrl: "https://gatsby-starter-typescript-plus.netlify.com",
    author: {
      name: "Andrew W. Hummel",
      url: "https://github.com/ahummel25",
      email: "[email protected]"
    }
  },
  pathPrefix: "/profile",
  plugins: [
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "Andrew Hummel Profile",
        short_name: "Profile",
        start_url: "/profile",
        background_color: "#f7f0eb",
        theme_color: "#285171",
        display: "standalone",
        icon: `${__dirname}/src/images/favicon-32x32.png`
      }
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images`
      }
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "content",
        path: `${__dirname}/src/content`
      }
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-responsive-iframe",
            options: {
              wrapperStyle: "margin-bottom: 1rem"
            }
          },
          "gatsby-remark-prismjs",
          "gatsby-remark-copy-linked-files",
          "gatsby-remark-smartypants",
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 1140,
              quality: 90,
              linkImagesToOriginal: false
            }
          }
        ]
      }
    },
    "gatsby-transformer-json",
    {
      resolve: "gatsby-plugin-canonical-urls",
      options: {
        siteUrl: "https://gatsby-starter-typescript-plus.netlify.com"
      }
    },
    "gatsby-plugin-emotion",
    "gatsby-plugin-offline",
    "gatsby-plugin-typescript",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-react-helmet"
  ]
};

package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[pieh]

This seems like a bug when using pathPrefix, just managed to reproduce. Doesn't happen when not using it.

[pieh]

Ok, seems like start_url in manifest configuration need to be /profile/ (notice trailing slash).

When we register service worker with pathPrefix, it set's Service worker "scope" to http(s)://domain/<pathPrefix>/. The start_url must be within service worker scope to work. So that means we do need that trailing slash, as otherwise browser consider this to be out of scope and wouldn't allow that.

(unless you configure your server/hosting to add special response header(Service-Worker-Allowed) for sw.js file to set broader scope, but this is not needed here)

[pieh]

So this isn't exactly a bug, but probably something we could document as edge case

[ahummel25]

@pieh I was going to try that too! Haha. Yep, that seems to fix it. Yes, maybe more an edge case if you have a start_url other than just the root "/".

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜