Help Center

A PWA turns your website into an app-like experience. This setup enables offline functionality, faster load times, and the ability to "Add to Home Screen" on mobile devices.

Before you start, please backup your files, uploading this will overwrite the following files.

If you need help or have suggestions please visit the dedicated support forum for this addon here

Step 1: Upload the files and install languages

Unzip and upload the files to your root directory according to the folder structure.

Step 2: Add to header (Please backup any file before editing)

Open themes/yourTheme/layout/container.phtml

Look for and comment out or remove:

<link rel="manifest" href="<?php echo $wo['config']['theme_url'];?>/javascript/OneSignalSDKFiles/manifest.json">

Then after that add

<link rel="manifest" href="<?php echo $wo['config']['site_url'];?>/manifest.php">
<link rel="stylesheet" type="text/css" href="<?php echo $wo['config']['theme_url']; ?>/stylesheet/pwa.css">
<script src="<?php echo $wo['config']['site_url'];?>/service-worker.js" async></script>
<script src="<?php echo $wo['config']['theme_url'];?>/javascript/pwajs.js" async defer></script>

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

Step 3: Floating Banner (Optional)

Open themes/yourTheme/layout/home/content.phtml and add at the bottom:

<!-- 🚀 Small Card-Style PWA Popup -->
<div id="pwa-popup">
  <img src="<?php echo $wo['config']['theme_url'];?>/img/logo.png" alt="Logo">
  <span>📲 Get the best experience by Installing the Web App!</span>
  <div class="pwa-buttons">
    <button id="install-popup-button">Install App</button>
    <button id="close-popup">Close</button>
  </div>
</div>

Step 4: Install Button

Add this anywhere you want (e.g., sidebar):

<button class="install-button" id="install-button">📲 Install Web App</button>

Step 5: Service Worker

Edit /service-worker.js and replace wondertag with your theme name.

Step 6: Icon Images

Replace all images inside themes/yourTheme/img/pwai/ with your own icons (48x48, 72x72, 96x96, 128x128, 144x144, 192x192, 384x384, 512x512).

Step 7: Screenshots

Create screenshots of your site and name them as in the example (desktoplogin.png, desktoplogout.png, forums.png, features.png, explore.png, etc). They will appear when the user installs the app.

Enjoy! And if you love it, leave a review here – it really helps build a reputation.