# Progressive web apps (PWAs)

### Usando `gatsby-plugin-manifest`

1. Instalar el plugin:

{% code title="SHELL" %}

```bash
npm install --save gatsby-plugin-manifest
```

{% endcode %}

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`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md).&#x20;
2. Agregue el complemento al array de `plugins` en su archivo `gatsby-config.js`.

{% code title="gatsby-config.js" %}

```javascript
{
  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`,
      },
    },
  ]
}
```

{% endcode %}

### 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`

{% code title="SHELL" %}

```bash
npm install --save gatsby-plugin-offline
```

{% endcode %}

Agregue un plugin a `gatsby-config.js`

{% code title="gatsby-config.js" %}

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

{% endcode %}

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`).

{% hint style="info" %}
**Código de referencia**: [Github](https://github.com/khriztianmoreno/workshop-gatsby/commit/6c79442eb7acc934a1dc011f51704ecc1fcd1574)
{% endhint %}
