Skip to Content
DocumentationInstallationWordpress

Customer Integration

💡

This example is a real customer integration. Our Transcodes team helped a client integrate PWA into their WordPress site.

Steps

1. Log into your WordPress admin console.

wordpress-image-1

2. Click Add Plugin, search for wpcode, and install it.

WPCode is a WordPress plugin that allows you to insert custom code into the head and footer sections of your site’s HTML without modifying theme files.

WPCode allows inserting custom code into the <head> and <body> of your site.

wordpress-image-2

3. After installation, open the Code Snippets → Header & Footer section.

wordpress-image-3

4. In the Header input field, paste the following PWA configuration

<link
  rel="manifest"
  href="https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/manifest.json"
/>
<script
  type="module"
  src="https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/webworker.js"
></script>

wordpress-image-4

5. To add sw.js, go to your hosting file manager or cPanel (e.g., Bluehost cPanel).

⚠️

File manager UI may vary based on your hosting provider.

wordpress-image-5

6. Upload downloaded sw.js file to the public_html directory

⚠️

Make sure the sw.js file is located at the root directory (public_html). Otherwise, WordPress won’t recognize the service worker.

wordpress-image-6

7. Your PWA is now active on your WordPress site.

wordpress-image-7

Last updated on
SvelteJSBubble