Gatsby 插件离线不缓存文件

Question

I am working with gatsby PWA. Here is the list of errors when audit using lightbox.

The problem is either my service worker is not working or not caching the pages and I am sure there is something wrong with my configuration in gatsby.config.js . Pls help

  {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        workboxConfig: {
          globPatterns: ["**/*.{js,jpg,png,html,css}"],
        },
      },
    },

Answer 1

In your LightHouse Report click at the "PWA"-Icon (Circle) above. This scrolls you down to the given section of it. There you found some notices, why the PWA couldn't established for this page.

There can be many reasons for this like:

• page is not available via HTTPS://
• there is no canonical-Tag
• Icon for Manifest was not found
• manifest has issues / errors

So maybe share the url so that other ones can have a look at it to help you, or post some screenshots about the PWA-Section (or some request with detailed questions).

BTW : Even if your gatsby-config looks ok, I recommend to go with the defaults first.. so remove the "workboxConfig-Stuff... and for your manifest-section choose standalone for display .

Good Luck.