# How to Install PWA for Wowonder

# 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, the online tutorial is much better for copy and paste.](https://howto.scriptstribe.com/books/how-to-install-pwa-for-wowonder/page/installaton-guide)

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](https://community.scriptstribe.com/forums/45/)**

##### **Step 1: Upload the files and install languages**

---

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

visit yourSite.com/installrss.php

##### **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 &lt;head&gt; at the very top

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='async'></script>
		<script src="<?php echo $wo['config']['theme_url'];?>/javascript/pwajs.js" async='async' defer></script>
		
<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js', { scope: '/' })
        .then((registration) => {
            console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch((error) => {
            console.error('Service Worker registration failed:', error);
        });
}
</script>
```

##### **The Pwa will pop up automatically but if you want to add banner and button he is the code**

##### **Step 3: If you want the floating banner Adding the popup banner** 

##### Open themes/youtheme/layout/home/content.phtml

<div id="bkmrk--1"><div class=" js-list" id="bkmrk--2"><div id="bkmrk--3"><div id="bkmrk--4"><div class="objects-content"><div class="objects-content-area" id="bkmrk--5"></div></div></div></div></div></div>Go to the very bottom and add

```
<!-- 🚀 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 experienceby 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>
```

[![wowonderBanner.png](https://howto.scriptstribe.com/uploads/images/gallery/2025-01/scaled-1680-/jSsw3PrBMUGR8pmI-wowonderbanner.png)](https://howto.scriptstribe.com/uploads/images/gallery/2025-01/jSsw3PrBMUGR8pmI-wowonderbanner.png)

##### **Here is the code for the button, you can add where ever you wish, I added on my sidebar for sample[![wowonderButton.png](https://howto.scriptstribe.com/uploads/images/gallery/2025-01/scaled-1680-/98zlqzdgHQvJAvWD-wowonderbutton.png)](https://howto.scriptstribe.com/uploads/images/gallery/2025-01/98zlqzdgHQvJAvWD-wowonderbutton.png)**

<div id="bkmrk--7"><div class=" js-list" id="bkmrk--8"><div id="bkmrk--9"><div id="bkmrk--10"><div class="objects-content"><div class="objects-content-area" id="bkmrk--11"></div></div></div></div></div></div>```
<!-- Install PWA Button End -->
    <button class="install-button" id="install-button"> 📲 Install Web App</button>
       
<!-- Install PWA Button End -->
```

**<span style="color: rgb(45, 194, 107);">Change you buttons colors on /themes/youtheme/stylesheet/pwa.css</span>**


##### **Step 5: Edit the service-worker.js file** 

Open /service-worker.js

Look for and change wondertag for your theme name

##### **Step 6: Icon Images**

Open themes/youtheme/img/pwai and replace these images for the icons. Yes! each image is importantand shows in different places if you delete one the app will not work.

[![logo-48x48.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/afH0cHIPkgmumfSl-logo-48x48.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/afH0cHIPkgmumfSl-logo-48x48.png)[![logo-72x72.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/KYpoB9DtXMi80MK5-logo-72x72.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/KYpoB9DtXMi80MK5-logo-72x72.png)![logo-96x96.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/Mi1WfSSpqx5UVnRv-logo-96x96.png)[![logo-128x128.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/W1kb7I4HN4u0xKoB-logo-128x128.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/W1kb7I4HN4u0xKoB-logo-128x128.png)![logo-144x144.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/MsKnS4uozvc4AARL-logo-144x144.png)[![logo-192x192.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/dyc93wIFIjmXXFQI-logo-192x192.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/dyc93wIFIjmXXFQI-logo-192x192.png)[![logo-384x384.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/gNdpJ3u8SNq9SMWQ-logo-384x384.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/gNdpJ3u8SNq9SMWQ-logo-384x384.png)[![logo-512x512.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/tmPSUCnVzPMt4OA3-logo-512x512.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/tmPSUCnVzPMt4OA3-logo-512x512.png)

##### **Step 7: Screenshots icons**

**Next you will create the screenshot images of your site. this is a example with my site and please name the images the same way, the screenshots will show like this when a user click the install button. pretty hum? check all the images names bellow.**

**[![thisiswhy.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/XapLHvgqmeiM9Xdy-thisiswhy.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/XapLHvgqmeiM9Xdy-thisiswhy.png)**

**<span style="color: rgb(53, 152, 219);">desktoplogout.png</span>**

**[![desktoplogout.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/HI5UKG1JAnSYqzsN-desktoplogout.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/HI5UKG1JAnSYqzsN-desktoplogout.png)**

<span style="color: rgb(53, 152, 219);">**desktoplogin.png**</span>

**[![desktoplogin.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/qBNHwxR1Tw8859qA-desktoplogin.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/qBNHwxR1Tw8859qA-desktoplogin.png)**

**<span style="color: rgb(53, 152, 219);">forums.png</span>**

**[![forums.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/4l6L7DyRaE5ImiX8-forums.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/4l6L7DyRaE5ImiX8-forums.png)**

<span style="color: rgb(53, 152, 219);">**features.png**</span>

**[![features.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/BvBs3t3D2HDEvoan-features.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/BvBs3t3D2HDEvoan-features.png)**

<span style="color: rgb(53, 152, 219);">**explore.png**</span>

**[![explore.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/rAxybv2Xh8NALQPX-explore.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/rAxybv2Xh8NALQPX-explore.png)**

<span style="color: rgb(53, 152, 219);">**screenshot3.png**</span>

**[![screenshot3.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/akmVPfsp5nrCjuak-screenshot3.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/akmVPfsp5nrCjuak-screenshot3.png)**

**Enjoy! And if you love it leave me a [review here it really helps build a reputation.](https://scriptstribe.com/wowonder-pwa-addon-progressive-web-app/)**

**[![emot.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/scaled-1680-/IYne7FovY9bt1UwY-emot.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-11/IYne7FovY9bt1UwY-emot.png)**

# Icons License

Click any link below to see where I got the icons

Blog Icon [GPL](https://www.iconfinder.com/icons/1055019/news_article_information_newspaper_periodical_icon)   
Forum [Free for Commercial use](https://www.iconfinder.com/icons/5027855/chat_communication_message_talk_icon)  
Events: [Free for Commercial use](https://www.iconfinder.com/icons/4171356/calendar_day_hanging_heart_letter_love_valentine_valentines_icon)  
Ads: [Free for Commercial use](https://www.iconfinder.com/icons/4550882/ads_adwords_google_icon%20Free)  
Market [CC0 1.0 Universal (CC0 1.0) Public Domain Dedication](https://www.iconfinder.com/icons/8726303/shop_icon)  
Reels [MIT License](https://www.iconfinder.com/icons/9039905/camera_reels_icon)