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

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

For a simple implementation, have a look here:

2 Likes