🎧 How to Upload Your Radio Digital v1.1 Player to cPanel (Beginner's Guide)

✅ What do you need?

• Access to your cPanel account.
• The files of your player (such as index.html, radio-player.js, styles.css, etc.).
• A web browser (Google Chrome, Firefox, etc.).

📂 What does the Radio Digital v1.1 project include?

The project includes several organized files that make the player work:

• index.html: Main page of the player.
• radio-player.js, service-worker.js, install-popup.js, etc.: JavaScript files for functionality.
• styles.css, radio-image-style.js: Stylesheet files.
• img/: Folder with images and icons.
• manifest.json: A file that helps your player work like an app (PWA).

🚀 Step 1: Access Your cPanel

Open your browser and enter your cPanel address. It's usually something like:

https://yourdomain.com/cpanel

Log in with the username and password provided by your hosting provider.

📁 Step 2: Open the File Manager

• In the main menu, look for the "File Manager" option and click on it.
• Inside the file manager, open the public_html folder. This is where your public website files go.

⬆️ Step 3: Upload All Project Files

• Click the “Upload” button (top left).
• From your computer, select all the files from the Radio Digital v1.1 project (use Ctrl + click or Shift to select multiple files).
• Also include the img/ folder.
• Once the upload is complete, go back to the file manager to verify everything is there.

🛠️ Special Configuration if You Use a Folder (e.g., /radio-digital)

If you upload your player inside a folder like public_html/radio-digital/, you’ll need to make some adjustments to ensure the PWA works properly:

🔧 1. Edit manifest.json

Look for this line:

"start_url": "/"

And change it to:

"start_url": "/radio-digital/"

🔧 2. Ensure Relative Paths in index.html

Example of how the manifest and service-worker should be linked:

<link rel="manifest" href="./manifest.json">

navigator.serviceWorker.register('./service-worker.js')

🌐 Step 4: Test the Player in Your Browser

Visit the address where you uploaded the project. Examples:

• If you uploaded it directly to public_html:
  https://yourdomain.com
• If you uploaded it to a folder called radio-digital:
  https://yourdomain.com/radio-digital/

You should see the player loaded and working correctly.

📲 How to Know if the PWA is Working?

• Open the site from a mobile device.
• You should see a message like “Add to Home Screen”.
• This indicates that manifest.json and service-worker.js are working correctly.

🧩 Additional Tips

• Your site must have HTTPS enabled for features like autoplay and PWA to work.
• Check the browser console (F12 > Console) to see any errors if something doesn't load.
• If the player looks broken, make sure styles.css is correctly linked in the HTML.

🎉 Congratulations!

You’ve successfully published Radio Digital v1.1 and it’s ready to be shared with your audience. It works on desktop, mobile, and can be installed as an app thanks to PWA technology.