How to Install the Free Sngine PWA (Progressive Web App)

Download the zip from here

NOTE: If you are updating, do not upload image files to avoid overwriting your existing ones.

I renamed some files to make it harder for people to steal your code. Please read Step 7.

Changes:

1. Added banner block or fixed it.
2. 
3. Added button.
4. 
5. Fixed bugs.
6. Changed file structure for better organization.
7. Added offline.html – show a message if users disconnect (feel free to style it).

Give your Sngine social network a native app-like experience by installing this free Sngine PWA! This guide walks you through setup, integration, and customization. Works with all themes.

The sharer is not working (left it in case someone figures it out – tell me if you do!)

Step 1: Upload Files to the Root Folder

1. Download the zip and extract the files.
2. Upload everything to your website's root directory.
3. Make sure the folder structure matches the one in the zip.

Step 2: Register the Service Worker

Note for updates: Replace the code and delete the old service-worker.js.

Open /content/themes/default/templates/_head.tpl and before </head>, add:

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then((registration) => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch((error) => {
        console.log('Service Worker registration failed:', error);
      });
  }
</script>

And also add the manifest link:

<link rel="manifest" href="{$system['system_url']}/manifest.json">

Step 3: Add JavaScript for PWA Functionality

Open /content/themes/default/templates/_footer.tpl and before </body>, add:

<script type="text/javascript" src="{$system['system_url']}/includes/assets/js/core/msett.js"></script>

This script controls how often the PWA popup appears – don’t overdo it.

Step 4: Add the Install Button or Banner

Choose where to install it. You have two options:

{include file='pwabutton.tpl'}

or use the orange banner:

{include file='pwabanner.tpl'}

Button preview:

Banner preview:

Want a floating banner? Edit pwabanner.tpl and change:

#install-banner {
    display: none;
    position: block;
}

to

#install-banner {
    display: none;
    position: fixed;
}

Step 5: Edit the Manifest File

1. Open manifest.json.
2. Update site details like name and URL.

Example:

{
  "id": "https://sitename.com/",
  "dir": "ltr",
  "lang": "en",
  "name": "SiteName",
  "short_name": "SiteName",
  "description": "Stay connected with SiteName, your hub for news, business, and connections!"
}

Step 6: Replace Icons and Screenshots

1. Navigate to /content/uploads/pwa/.
2. Replace the icons (icon-192x192.png, icon-512x512.png).
3. Use these sizes:
   • 192x192 px
   • 512x512 px
   • 3 mobile screenshots
   • 3 desktop screenshots

Step 7: Obfuscate Your JavaScript

If you want to protect your code, obfuscate msett.js using Obfuscator.io.

• Can you undo it? Not really.
• Keep a clean backup before you obfuscate.

BONUS – Multi-language Manifest

You can serve different manifest files per language.

1. Duplicate manifest.json (e.g. manifest-es.json).
2. Update your _head.tpl with:

<link rel="manifest" href="{$system['system_url']}/{__('manifest.json')}">

Then add this to your language file (e.g. es_es):

msgid "manifest.json"
msgstr "manifest-es.json"

Tip: You can also localize image names using the same translation trick!

🌟 You're Done!

Congrats! Your Sngine site now works like a native app.

If you appreciated this, feel free to tip me through my profile – yes, it actually works ;)