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

tips & tricks
1

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> 


<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

{
  "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 


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

});

References

4 Likes
2

For a simple implementation, have a look here:

3 Likes
4

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.

5

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

6

Related topic: A programmatic PWA (service worker) module