Progressive web apps (PWAs)

Gatsby está diseñado para proporcionar un rendimiento de primer nivel fuera de la caja.

Usando gatsby-plugin-manifest

1. Instalar el plugin:

SHELL

npm install --save gatsby-plugin-manifest

1. Agregue un favicon para su aplicación en src/images/icon.png. El icono es necesario para construir todas las imágenes para el manifiesto. Para obtener más información, consulte los documentos de gatsby-plugin-manifest.

2. Agregue el complemento al array de plugins en su archivo gatsby-config.js.

gatsby-config.js

{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "Personal Site",
        short_name: "PersonalSite",
        start_url: "/",
        background_color: "#6b37bf",
        theme_color: "#6b37bf",
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: "standalone",
        icon: "src/images/icon.png", // This path is relative to the root of the site.
        // An optional attribute which provides support for CORS check.
        // If you do not provide a crossOrigin option, it will skip CORS for manifest.
        // Any invalid keyword or empty string defaults to `anonymous`
        crossOrigin: `use-credentials`,
      },
    },
  ]
}

Usando service workers en Gatsby con gatsby-plugin-offline

Se recomienda usar este complemento junto con el complemento manifest. (No olvide enumerar el plugin sin conexión después del plugin de manifiesto para que el archivo de manifiesto se pueda incluir en el service worker).

Instalando gatsby-plugin-offline

SHELL

npm install --save gatsby-plugin-offline

Agregue un plugin a gatsby-config.js

gatsby-config.js

{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
      }
    },
    'gatsby-plugin-offline'
  ]
}

Eso es todo lo que necesita para agregar soporte fuera de línea a su sitio Gatsby.

Nota: Los service worker solo se registra en las compilaciones de producción(gatsby build).

Código de referencia: Github