No matching service worker detected

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® Core™ 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: "[e-mail]"
    }
  },
  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]

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