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

---

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

After that add

```
<link rel="manifest" href="<?php echo $wo['config']['site_url'];?>/manifest.php">
		<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>
```

##### **Step 3: Adding the popup banner** 

##### Open themes/scriptstribe/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

```
	<div id="pwa-popup" style="position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; color:#000000; padding: 15px; text-align: center; z-index: 1000; font-family: Arial, sans-serif; font-size: 16px; display: none; flex-direction: column; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <img src="<?php echo $wo['config']['theme_url'];?>/img/logo.png" alt="Logo" style="width: 150px; margin-bottom: 10px;">
    <span style="margin-bottom: 15px; font-size: 14px;">To get the best experience, open in the app!</span>
    <div style="display: flex; gap: 10px;">
        <button id="install-popup-button" style="background-color: var(--main); color: #000; border: none; padding: 10px 20px; border-radius: 4px; font-size: 14px; cursor: pointer;">Install App</button>
        <button id="close-popup" style="background-color: var(--main); color: #000; border: none; padding: 10px 20px; border-radius: 4px; font-size: 14px; cursor: pointer;">Close</button>
    </div>
</div>
```

##### **Step 4: Adding the popup banner in welcome page** 

##### Open themes/YourTheme/welcome/welcome-users-profiles.phtml

<div id="bkmrk--6"><div class=" js-list" id="bkmrk--7"><div id="bkmrk--8"><div id="bkmrk--9"><div class="objects-content"><div class="objects-content-area" id="bkmrk--10"></div></div></div></div></div></div>Go to the very bottom and add

```
	<div id="pwa-popup" style="position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; color:#000000; padding: 15px; text-align: center; z-index: 1000; font-family: Arial, sans-serif; font-size: 16px; display: none; flex-direction: column; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <img src="<?php echo $wo['config']['theme_url'];?>/img/logo.png" alt="Logo" style="width: 150px; margin-bottom: 10px;">
    <span style="margin-bottom: 15px; font-size: 14px;">To get the best experience, open in the app!</span>
    <div style="display: flex; gap: 10px;">
        <button id="install-popup-button" style="background-color: var(--main); color: #000; border: none; padding: 10px 20px; border-radius: 4px; font-size: 14px; cursor: pointer;">Install App</button>
        <button id="close-popup" style="background-color: var(--main); color: #000; border: none; padding: 10px 20px; border-radius: 4px; font-size: 14px; cursor: pointer;">Close</button>
    </div>
</div>
```


##### **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)