# Simple implementation of Progressive Web Apps (PWA) on Hugo website

**URL:** <https://discourse.gohugo.io/t/simple-implementation-of-progressive-web-apps-pwa-on-hugo-website/39952>\
**Category:** tips & tricks\
**Tags:** pwa\
**Created:** [August 11, 2022, 9:46pm UTC](https://discourse.gohugo.io/t/simple-implementation-of-progressive-web-apps-pwa-on-hugo-website/39952 "2022-08-11T21:46:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![idarek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/idarek/32/26229_2.png) [@idarek](https://discourse.gohugo.io/u/idarek)\
**Post date:** [August 11, 2022, 9:46pm UTC](https://discourse.gohugo.io/t/simple-implementation-of-progressive-web-apps-pwa-on-hugo-website/39952/1 "2022-08-11T21:46:05Z")

</div>

I recently rediscovered the use of PWA in web development. The main goal was to add options to an even better experience for mobile users when using websites on portable devices, especially when the whole web development was oriented toward mobile-first design.

Here is the code needed to implement PWA in any Hugo website (you will need your graphics made). All served from `/static` folder.

I you are interested in the benefits of that approach, I am adding a link to my three (3) posts at the bottom.

## PWA solution for Hugo

### In the `<head>`

```html

<link rel="manifest" href="/manifest.webmanifest">

<meta name="mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-title" content="My PWA" />

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<script>

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/sw.js');

};

</script>

```

### `manifest.webmanifest` file

```json
{
  "lang": "en",
  "short_name": "My PWA",
  "name": "My Super Duper Fancy PWA",
  "description": "The description of My My Super Duper Fancy PWA",
  "icons": [
    {
      "src": "/favicon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/maskable_favicon-192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable"
    },
    {
      "src": "/favicon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/maskable_favicon-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ],
  "start_url": "/?utm_source=pwa",
  "scope": "/",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "display": "standalone",
  "shortcuts": [
    {
       "name": "Shortcut 1",
       "description": "Shortcut to important page in my PWA",
       "url": "/shortcut1/?utm_source=pwa",
       "icons": [
        {
          "src": "/favicon-192.png",
          "type": "image/png",
          "sizes": "192x192"
        },
        {
          "src": "/maskable_favicon-192.png",
          "type": "image/png",
          "sizes": "192x192",
          "purpose": "maskable"
        }
       ]
    },
    {
      "name": "Shortcut 2",
      "description": "Shortcut to another important page in my PWA",
      "url": "/shortcut2/?utm_source=pwa",
      "icons": [
       {
         "src": "/favicon-192.png",
         "type": "image/png",
         "sizes": "192x192"
       },
       {
         "src": "/maskable_favicon-192.png",
         "type": "image/png",
         "sizes": "192x192",
         "purpose": "maskable"
       }
      ]
    }
 ]
}

```

### Service Worker `sw.js`

```js

self.addEventListener ('fetch', function(event) {

});

```

## References

> **[Rediscovering Progressive Web Apps (PWA)](https://dariusz.wieckiewicz.org/en/rediscovering-progressive-web-apps-pwa/)**
>
> PWAs are a new way to build web apps that are installable, fast, reliable, and engaging. They can be used to create apps that work offline, can be updated automatically, and can be accessed from the home screen like a native app. PWAs are a great way...

> **[Simple implementation of PWA on a website with a Mobile First Design approach](https://dariusz.wieckiewicz.org/en/simple-implementation-pwa-webdev-mobile-first-design/)**
>
> The article discusses the simple implementation of PWA on a website with a Mobile First Design approach. I explain that Progressive Web Apps are not only about mobile-first, and that this implementation adds nice functionality for desktop browsers.

> **[Simplified way of adding a favicon to the website](https://dariusz.wieckiewicz.org/en/simplified-way-of-adding-favicon-to-website/)**
>
> This article describes how to add a favicon to a website. The article provides step-by-step instructions and screenshots, as well as tips for creating a favicon that looks good and is accessible to all users.

---

<div class="post-metadata">

**Author:** ![nfriedli](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nfriedli/32/26027_2.png) [@nfriedli](https://discourse.gohugo.io/u/nfriedli)\
**Post date:** [August 11, 2022, 9:59pm UTC](https://discourse.gohugo.io/t/simple-implementation-of-progressive-web-apps-pwa-on-hugo-website/39952/2 "2022-08-11T21:59:43Z")

</div>

For a simple implementation, have a look here:

> **[Minimal viable service worker](https://adactio.com/journal/13540)**
>
> Boosting performance with a general-purpose service worker script.

---

<div class="post-metadata">

**Author:** ![idarek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/idarek/32/26229_2.png) [@idarek](https://discourse.gohugo.io/u/idarek)\
**Post date:** [March 6, 2023, 1:18pm UTC](https://discourse.gohugo.io/t/simple-implementation-of-progressive-web-apps-pwa-on-hugo-website/39952/4 "2023-03-06T13:18:16Z")

</div>

This is not as easy as you may think. You need to find a way to store tracking results on user device and send them accurately when device is back online. This may be far beyond Static approach.

---

<div class="post-metadata">

**Author:** ![assa](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@assa](https://discourse.gohugo.io/u/assa)\
**Post date:** [May 13, 2023, 9:57am UTC](https://discourse.gohugo.io/t/simple-implementation-of-progressive-web-apps-pwa-on-hugo-website/39952/5 "2023-05-13T09:57:31Z")

</div>

PWA looks interesting

there are some issues at google lighthouse is complaining about:

- `<meta name="theme-color" content="#317EFB"/>`

Web app manifest or service worker do not meet the installability requirements

- `"prefer_related_applications" : false,`

`window.innerWidth` is not equal to `window.outerWidth`

---

<div class="post-metadata">

**Author:** ![iaeiou](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/iaeiou/32/15332_2.png) [@iaeiou](https://discourse.gohugo.io/u/iaeiou)\
**Post date:** [May 13, 2023, 11:15am UTC](https://discourse.gohugo.io/t/simple-implementation-of-progressive-web-apps-pwa-on-hugo-website/39952/6 "2023-05-13T11:15:20Z")

</div>

Related topic: [A programmatic PWA (service worker) module](https://discourse.gohugo.io/t/a-programmatic-pwa-service-worker-module/43611)