Distill website into progressive webapp

[bes827]

Is there a way to convert a static distill website into PWA? I am much into web development but I like the fact that PWAs can be installed into smart phones home screen and can display in full screen plus other features (eg push notifications, etc..).

I read some online tutorials and understood that we need to add the following to the website root folder before deployment:

• manifest.json and then link it in the index.html
• serviceworker.js
• app.js to register the service worker
• folder with different icon sizes and splash screen

I followed the instructions from this example https://dev.to/phonerefer/convert-any-static-website-to-pwa-3fkb but could not get it to work.

Is there a built in way in the distill package to make PWA? or is there a tutorial / github repo with an example that I can follow?

thank you

Update:
I was able to generate a progressive webapp from distill website by:

• adding service worker, manifest files and icons folder to the root directory (I found this example extremely helpful https://github.com/aladin002dz/PWA)
• adding this script to the head section of index.html

<link rel="manifest" href="manifest.json">
    <script>
        //if browser support service worker
        if('serviceWorker' in navigator) {
          navigator.serviceWorker.register('sw.js');
        };
      </script>

The problem is that the script won't persist in index.html if it is regenerated and I will have to manually add it every time. Is there a way to "inject" the script using a function that I can run after I render the site?