How to Enable OneSignal Push Notifications on Blogger Website With Cloudflare All errors Fixed
I stumbled upon this solution when I was trying to add push notifications to my website with OneSignal. I discovered that OneSignal doesn’t support Blogger by default because website builders like Blogger don’t allow uploading files to the root directory.
I wondered how I could get around this limitation. Then, I had an idea—what if I used Cloudflare Workers and custom routes to serve the OneSignal worker JavaScript file from my domain? Guess what? It worked perfectly! My website now has a working push notification service powered by OneSignal.
In today’s article, I’ll show you how to fix the “OneSignal worker.js file not loaded behind redirect” issue and enable OneSignal on your Blogger website.
Prerequisites
Before you start, you must have a custom domain connected to your Blogger site and set up with Cloudflare. If you haven’t done this yet, configure Cloudflare with your custom domain first.
Step 1: Create a Private Git Repository
First, create a private Git repository on GitHub or GitLab with these two
files: index.js and wrangler.toml.
Important: Replace your Zone ID and Account ID in
wrangler.toml. You can find these in your Cloudflare account.
Also, replace codersikarwar.site in index.js with
your actual website domain.
After uploading, commit your changes.
index.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const url = new URL(request.url);
const workerPath = '/OneSignalSDKWorker.js';
if (url.pathname === workerPath) {
const oneSignalCdnFileUrl = 'https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js';
const response = await fetch(oneSignalCdnFileUrl, request);
const headers = new Headers(response.headers);
headers.set('Content-Type', 'application/javascript; charset=utf-8');
headers.set('Cache-Control', 'public, max-age=31536000, immutable');
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: headers
});
}
return fetch(request);
}
wrangler.toml
name = "onesignal-worker"
main = "index.js"
compatibility_date = "2025-07-04"
account_id = "YOUR_CLOUDFLARE_ACCOUNT_ID"
[[routes]]
pattern = "www.yourdomain.com/OneSignalSDKWorker.js*"
zone_id = "YOUR_CLOUDFLARE_ZONE_ID"
Step 2: Deploy the Cloudflare Worker
- Log in to Cloudflare and go to the Workers section.
- Click Create a Worker and choose Import Git Repository.
-
You will be redirected to GitHub to authorize access to your repository.
Select your
onesignal-workerrepo and approve. - Back in Cloudflare, click Create Worker again, pick your repository from the list, and click Deploy.
After a few minutes, your CDN worker will be ready. To confirm it’s working, try visiting:
https://yourdomain.com/OneSignalSDKWorker.js?test-variable
If you see the JavaScript file loading, everything is set up correctly
Step 3: Configure OneSignal and Integrate with Blogger
- Go to OneSignal and click Create New App.
- Select Typical Site and generate the integration code.
- In your Blogger dashboard, navigate to Themes > Edit HTML.
-
Paste the OneSignal code snippet inside the
<head>section of your theme.
Test Your Integration
Visit your website and you should see a notification permission prompt. When you click Subscribe, you will receive a welcome message confirming that push notifications are working.
Conclusion
If you found this guide helpful, consider subscribing to our notifications to get future updates and solutions to common Blogger issues.
