How Do Push Apps Register Service Worker & Save FCM Token From Merchant Storefront?

Partner Discussions
1

Hi everyone,

I’m building a Shopify app for web push notifications, similar to apps like PushOwl, PushBot, etc.

MAIN ISSUE (CROSS-ORIGIN ERROR):
We are trying to ask for push notification permission directly on the merchant’s storefront, but the request and service worker come from our app or CDN domain, which causes Chrome to block it due to cross-origin restrictions.
Browsers require the service worker (sw.js) to be served from the same origin (for example: merchant.myshopify.com/sw.js), but Shopify does not allow apps to place files at the root directory.

WHAT I’M TRYING TO DO:

  • Ask for notification permission directly on the merchant storefront
  • Register a service worker (sw.js) from the same origin as the merchant store (as required by browser security rules)
  • Subscribe the user to push notifications using Firebase Cloud Messaging (FCM)
  • Save the FCM token to Firestore automatically without asking the merchant to manually add anything

WHAT’S BLOCKING US:

  • Shopify does not allow apps to upload or place files directly to the root of the merchant domain (like /sw.js)
  • Because of this, browser blocks the service worker registration due to CORS / origin mismatch
  • And this breaks the entire token saving and permission flow

ERROR WE ARE GETTING:
Failed to register a ServiceWorker for scope (…) with script (…/sw.js): A bad HTTP response code (404) was received when fetching the script

WHAT WE ALREADY TRIED:

  • Serving sw.js using Shopify App Proxy → this is blocked because the response returns HTML, not application/javascript
  • Hosting sw.js on our own CDN → this is blocked by browser due to cross-origin security rules
  • Using iframe or blob-based service worker registration → blocked due to Shopify CSP (Content Security Policy) and browser restrictions
  • Uploading sw.js to the theme using Admin API under /assets/sw.js → upload works, but browser still blocks it because it’s not at root level (still cross-origin)

WHAT WE NEED HELP WITH:

  • How do apps like PushOwl, PushBot, PushRocket, etc. solve this issue automatically without asking merchants to upload anything manually?
  • Is there any documented or safe Shopify-supported way to serve sw.js from the root of the merchant’s domain (merchant.myshopify.com/sw.js)?
  • What’s the correct way to register a service worker on the storefront, get the FCM token, and send it to our backend without triggering cross-origin or CORS errors?
  • Are there any known solutions or best practices that other apps are using in 2025 to get around this limitation?

We just want to make this push notification setup work 100% automatically like other apps — with no merchant involvement.
Everything else in the app is working perfectly. Any help, clarification, or guidance would be really appreciated.

Thanks !