Installaton Guide

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.

Click here to see this tutorial online

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

if you need help or have suggestions please visit the support forum here

Step 1: Upload the files

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 it out or remove.

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

Look for <head> at the very top

<script src="<?php echo $wo['config']['theme_url'];?>/javascript/OneSignalSDK.js" async='async'></script>

After that add

<link rel="manifest" href="<?php echo $wo['config']['site_url'];?>/manifest.php">
		<script src="<?php echo $wo['config']['theme_url'];?>/javascript/pwa.service-worker.js" async='async'></script>
<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('<?php echo $wo["config"]["theme_url"]; ?>/javascript/pwa.service-worker.js')
            .then(registration => {
                console.log('Service Worker registered with scope:', registration.scope);
            })
            .catch(error => {
                console.log('Service Worker registration failed:', error);
            });
    }
</script>

Step 3: Edit the pwa.service-worker.js file

Open /~~themes/wondertag/javascript/pwa.~~service-worker.js

Look for and change wondertag for your theme name

/themes/wondertag/stylesheet/style.css', // Theme CSS
    '/themes/wondertag/javascript/script.js', // Theme JavaScript
    '/themes/wondertag/img/pwai/logo-192x192.png', // PWA logo
    '/themes/wondertag/img/pwai/logo-512x512.png' // Larger logo for PWA

Also at the bottom

  icon: '/themes/wondertag/img/pwai/logo-192x192.png',
        badge: '/themes/wondertag/img/pwai/logo-72x72.png',

Step 4: Images

Open themes/wondertag/img/pwai

each image I have there indicate the size of the image that you need to create. make sure you have all images, do not delete any or your pwa may stop working.

Enjoy! And if you love it leave me a review and a cookie