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

 Download the zip from here 

NOTE: If you are updating, please do not upload the image files because it may overwrite your already created images.

I changed the files names to make it harder for people to steal your code. Please read STEP: 7

Changes:

1. Added banner block or fixed
2. 
3. Added Button
4. 
5. Fixed Bugs
6. Changed file structure for better organization
7. Added offline.html if user get disconnected they will see a message. feel free to style this page to make your own.

Give your Sngine social network a native app-like experience by installing the free Sngine PWA! This guide will walk you through setting up the service worker, integrating the JavaScript, updating the manifest file, and replacing icons and images.

The Sharer is not working but I left for reference, if anyone figure out, let me know, I want to :D

You will need to edit some files to make it your own. Manifest.json,  sw.js, and images, and yes, it works with all themes. 

Step 1: Upload Files to the Root Folder

1. Download the zip from here and Extract the downloaded PWA ZIP folder.

2. Upload all the files to your website's root directory using FTP or your hosting file manager.

3. Ensure the folder structure matches exactly as in the ZIP package.

Step 2: Register the Service Worker If you are updating, please change this code and delete this old file named service-worker.js

The service worker enables offline access and caching. To register it:

1. Open /content/themes/default/templates/_head.tpl.

2. Add the following code before the closing </head> tag:

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

Add the manifest

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

Step 3: Add JavaScript for PWA Functionality If you are updating, remove the old code

1. Open /content/themes/default/templates/_footer.tpl.

2. Add the following script before the closing </body> tag: (Please note the colored code area, this is where you set how often you want the pwa to popup, to frequently becomes annoying. 

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

Choose the location where you want to install the button and add 

There is 2 styles of buttons

 {include file='pwabutton.tpl'} 

or for the orange banner

 {include file='pwabanner.tpl'} 

Button style it will look like this

and Banner will show like this

if you want a floating banner instead, open /content/themes/default/templates/pwabanner.tpl and change 

#install-banner {
        display: none; /* Hidden by default */
        position: block;

to 

#install-banner {
        display: none; /* Hidden by default */
        position: fixed;

Open sw.js and make sure that the info there matches your website.

Step 4: Edit the Manifest File

1. Open manifest.json in the root folder.

2. Replace sitename and sitename.com with your site's information.

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 5: Replace Icons and Images

1. Go to /content/uploads/pwa/.

2. Replace the default icons (icon-192x192.png, icon-512x512.png) with your own images.

3. Make sure your icons follow these sizes:

   • 192x192 px

   • 512x512 px

   • mobileShot 3 images
   • DesktopShot 3 Images

Follow the sizes inside the manifest

Step 6: Clear Cache and Test

1. Clear your browser cache.

2. Visit your website.

3. You should see an "Install App" option or a browser prompt to install the app.

Step 7: Obfuscate your JavaScript

If you want to hide your js obfuscate your JavaScript file (msett.js) using a tool like Obfuscator.io

Can you "Unobfuscate" it?

• Not fully. Once a script is obfuscated, reversing it is difficult.
• If you need to edit it later, keep an original copy of msett.js in a safe place before obfuscation.

BONUS - Deferent languages

Want to offer your PWA in other languages? this is the only solution I found, if you know any better solution let me know

Duplicate the manifest.json

for instance, I left a sample in your zip folder for spanish manifest-es.json upload this file also to your root, so now you will have 2 manifest, one for each language.

Now in your head.tpl 

Replace 

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

With

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

Note the language key in the blue code? oh yes, you can also translate an image in a post like that e.g: {__("MySpanishImage.png")} Just a tip, oh! wait, I am going off topic, let's go back to PWA :D 

Now open you language file e.g: I used Spanish es_es
/content/languages/locale/es_es/LC_MESSAGES/messages.mo

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

Thanks for sharing this pwa but unfortunately this is not working for my website. When I install everything it wont let me login. =(

Try open the service worker and remove the cache line. 

Or send m your info privately and when I have little time I will check for you 

Someone told me they had that issue because they had the code duplicated both in head.tpl and admincp custom js

I LOVE THAT!!! Working fine <3  Thanks A LOT for sharing this wonderful script!!

I open your site on iphone and still doen't show app button.

try clean cache, some people says that it orks some say it does not, I dont have an iphone

Wanted to record a voice note but this error came up.