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.
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
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.
Look for at the very top
After that add
Step 3: Adding the popup banner
Open themes/scriptstribe/home/content.phtml
Go to the very bottom and add
To get the best experience, open in the app!
Step 4: Adding the popup banner in welcome page
Open themes/YourTheme/welcome/welcome-users-profiles.phtml
Go to the very bottom and add
To get the best experience, open in the app!
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.
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.
desktoplogout.png
desktoplogin.png
forums.png
features.png
explore.png
screenshot3.png
Enjoy! And if you love it leave me a review here it really helps build a reputation.
To get the best experience, open in the app!