PWA Setup in WordPress Using Blocksy Content Blocks (Simple Guide)

Progressive Web App (PWA) Setup Using Simple Code and Blocksy theme content block

This guide shows how to make your website installable like an app using a simple PWA setup. No external services are used. Every step below clearly tells you where to create files and where to paste code.

---

Step 1 — Create manifest.json

Where: File Manager or Hosting Panel → open public_html (your WordPress root folder)

Action: Create a new file named manifest.json

Paste this inside the file:

{ “name”: “Your Site Name”, “short_name”: “YourSite”, “start_url”: “/”, “display”: “standalone”, “background_color”: “#ffffff”, “theme_color”: “#0a0500”, “icons”: [ { “src”: “/your-icon-192.png”, “sizes”: “192×192”, “type”: “image/png” }, { “src”: “/your-icon-512.png”, “sizes”: “512×512”, “type”: “image/png” } ] }

---

Step 2 — Upload App Icons

Where: WordPress Dashboard → Media → Add New

Action:

1. Upload a 192×192 PNG icon
2. Upload a 512×512 PNG icon
3. Click each image and copy its URL
4. Replace paths in manifest.json

Example:

“src”: “/wp-content/uploads/your-icon.png”

---

Step 3 — Add Manifest to WordPress

Where: WordPress → Appearance → Theme File Editor → open functions.php

Scroll to the very bottom of the file

Paste this code at the bottom:

function add_manifest() { echo ‘<link rel="manifest" href="/manifest.json">‘; } add_action(‘wp_head’, ‘add_manifest’);

---

Step 4 — Create Service Worker (sw.js)

Where: File Manager → public_html

Action: Create a new file named sw.js

Paste this inside:

const CACHE_NAME = “site-cache-v1”; const urlsToCache = [ “/”, “/offline/” ]; self.addEventListener(“install”, event => { event.waitUntil( caches.open(CACHE_NAME).then(cache => { return cache.addAll(urlsToCache); }) ); }); self.addEventListener(“fetch”, event => { const url = new URL(event.request.url); if ( url.pathname.startsWith(“/cart”) || url.pathname.startsWith(“/checkout”) || url.pathname.startsWith(“/my-account”) ) { return; } event.respondWith( fetch(event.request).catch(() => { return caches.match(event.request).then(response => { return response || caches.match(“/offline/”); }); }) ); });

---

Step 5 — Register Service Worker

Where: functions.php (same file as Step 3)

Scroll to the bottom again

Paste this below previous code:

function register_sw() { ?> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } </script> <?php } add_action('wp_footer', 'register_sw');

---

Step 6 — Create Offline Page

Where: WordPress Dashboard → Pages → Add New

Title: Offline

URL will be: /offline/

Content:

You are offline. Please check your connection.

Publish the page.

---

Step 7 — Create Install Popup (Blocksy)

Where: Blocksy → Content Blocks → Add New

Settings:

• Type: Popup
• Trigger: After X Time
• Time: 5 seconds
• Visibility: Mobile Devices Only

Inside the popup editor, add a Custom HTML block and paste:

<div style="text-align:center; padding:20px;"> <h3>Install App</h3> <p>Faster access and better experience</p> <button id="installAppBtn" style=" background:#fcb424; color:#000; border:none; padding:10px 20px; font-size:14px; cursor:pointer; "> Install App </button> </div>

Publish the popup.

---

Step 8 — Add Install Logic

Where: functions.php

Scroll to the bottom

Paste this below all previous code:

function install_logic() { ?> <script> let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferredPrompt = e; }); document.addEventListener("click", function(e) { if (e.target && e.target.id === "installAppBtn") { if (deferredPrompt) { deferredPrompt.prompt(); deferredPrompt.userChoice.then(() => { deferredPrompt = null; }); } } }); </script> <?php } add_action('wp_footer', 'install_logic');

---

Final Result

• Popup appears after 5 seconds (only on mobile)
• User clicks Install App
• Browser shows install prompt
• App installs on home screen
• Offline page works when internet is unavailable

---

Important Notes

• Works best on Android Chrome
• iOS requires manual “Add to Home Screen”
• Your website must use HTTPS
• If your WordPress root is not public_html, use your actual root folder

This is a simple and stable PWA setup without external dependencies.

Frequently Asked Questions

Does this PWA setup require a plugin?

No. This setup uses simple code without any WordPress plugin.

Does it work on all devices?

It works best on Android Chrome. On iOS, users must manually use “Add to Home Screen”.

Why is HTTPS required for PWA?

Service workers only run on secure (HTTPS) websites. Without HTTPS, PWA features will not work.

Why is the install popup not showing immediately?

The browser controls when the install prompt is available. It appears only after certain conditions are met.

Can I use this without Blocksy theme?

Yes. Blocksy is used only for popup convenience. The PWA setup works with any theme.