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
3

I would implement a PWA for my site if only it was possible to track offline views. I remember some years ago I was able to do so with a WP plugin, but since I began using SSGs, I can’t figure it out.

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.