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

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

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

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('/service-worker.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

1. Open /content/themes/default/templates/_footer.links.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>
let deferredPrompt;
// Listen for the `beforeinstallprompt` event
window.addEventListener("beforeinstallprompt", (e) => {
    e.preventDefault();
    deferredPrompt = e;
    console.log("BeforeInstallPrompt event triggered");

    // Automatically trigger the install prompt after a delay
    setTimeout(() => {
        if (deferredPrompt) {
            try {
                deferredPrompt.prompt(); // Default browser popup
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === "accepted") {
                        console.log("User accepted the install prompt");
                    } else {
                        console.log("User dismissed the install prompt");
                    }
                    deferredPrompt = null; // Clear the deferred prompt
                });
            } catch (error) {
                console.error("Error triggering prompt:", error);
            }
        }
    }, 24000); // Adjust delay (e.g., 5 seconds) to ensure a user-gesture-friendly experience
});
// Listen for `appinstalled` to confirm installation
window.addEventListener("appinstalled", () => {
    console.log("PWA installed");

    // Optionally, send analytics or hide any installation-related UI
    fetch("/track-install.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ action: "appinstalled", timestamp: Date.now() }),
    }).catch((err) => console.error("Analytics tracking failed:", err));
});
</script>

Step 4: Edit the Manifest File

1. Open manifest.json in the root folder.

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

Example:

"id": "https://yoursite.com/",

  "dir": "ltr",

  "lang": "en",

  "name": "YourSiteName",

  "short_name": "YourSiteName",

  "description": "Stay connected with YourSiteName, 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.

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"