Theme Documentation - PWA Support

Aprende a convertir tu site con FixIt en un PWA (Progressive Web App).

¿Qué son los PWAs?

Progressive Web Apps (PWAs) son aplicaciones web que usan service workers, manifests, y otras funcionalidades de las plataformas web en combinación con progressive enhancement para dar al usuario una experiencia a la altura de las aplicaciones nativas.

¿Por qué molestarse?

Bien, la respuesta directa a esta pregunta es “No necesitas convertir tu sitio web en un PWA.” Un sitio web normal es perfecto para todo el contenido que quieras compartir. Sin embargo las técnicas PWA brindan algunos beneficios adicionales que pueden ser muy útiles.

1. Los service workers almacenan las páginas en caché cuando se instala la aplicación, y eso hace que la carga del sitio sea prácticamente instantánea en visitas subsiguientes.

2. Los usuarios pueden visitar las páginas en caché aunque estén offline.

Estas funcionalidades pueden ser útiles para algunos sitios web, como por ejemplo sitios de documentación. Pero no tiene mucho sentido pasar un blog personal a PWA. La elección final es tuya, pero el tema FixIt te permite implementar PWA si lo deseas.

How to turn your FixIt site into a PWA?

Configure site.webmanifest

Under the /static/ folder, you need to create a file named site.webmanifest. This file provides information about your app and it is required for your app to be installable.

Here are the key values required.

• name [required]

  The name of your web app.

• short_name [required]

  A shorter name for your web app.

• start_url [required]

  The start URL of your web app. Please fill in "/" by default.

• icons [required]

  An array of objects representing image files will be served as application icons. You can reuse the favicon of your site as the icons.

There are other optional values you can set in the manifest file, check out this documentation for more information.

Here is a sample site.webmanifest file from this documentation site.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
  "name": "FixIt Theme Documentation",
  "short_name": "FixIt Docs",
  "start_url": "/",
  "description": "A Clean, Elegant but Advanced Hugo Theme",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons": [
    {
      "src": "/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Configure the offline page

The offline page will be served to your visitor when they are offline.

You just need to create an offline.md or offline/index.md in the /content/ directory, and you can create them quickly with the following commands in your site directory:

1
2
3
4
5
6

hugo new offline.md
hugo new offline/index.md
# [i18n] if you are running a multilingual website.
hugo new offline/index.en.md
hugo new offline/index.zh-cn.md
hugo new offline/index.zh-tw.md

Here is a sample offline page.

1
2
3

---
type: "offline"
---

Enable the enablePWA option

Go to config.toml, add or change the option enablePWA = true under [params].

1
2
3

[params]
    # ...
    enablePWA = true

Install your PWA

Now, an install button should show up when you visit your website and you will be able to install your site as an app. After clicking “Install”, your website should be installed as a native app.

Congratulation! You have successfully turned your static site into a PWA 🎉

If you have any issues during the setup process, you can check the Console and Application panels in your browser’s DevTools for debugging. Alternatively, you can check your site on PWA Builder for more information. You can also start a discussion if you have any questions or propose an issue for any bugs you find.