How to Resgister Service Worker .js file from remote origin

Question

I have a app in shopify platform and I'm using Script Tag to add functionlity to merchant's storefront, in script tag file I'm trying to register service worker but I got the fallowing error:

Uncaught (in promise) DOMException: Failed to register a ServiceWorker: The origin of the provided scriptURL ('https://fea3-5-219-49-37.ngrok.io') does not match the current origin ('https://pouyas-store.myshopify.com')

here is my code in embeded javascript file:

const baseURL = "https://fea3-5-219-49-37.ngrok.io";
(function (){
      navigator.serviceWorker.register(baseURL+"/static/shopify_app/ServiceWorker.js")
          .then((reg) => {
            console.log("reg",reg);
              if (Notification.permission === "granted") {
                  getSubscription(reg);
              } else if (Notification.permission === "blocked") {
              } else {

                  $("#GiveAccess").show();
                  $("#PromptForAccessBtn").click(() => requestNotificationAccess(reg));
              }
          });
})()

The problem is that an embedded app is an iframe with a different domain. As far as I know is not possible to register a ServiceWorker with an iframe under a different domain. The only possible solution I can think of is to not use and embedded app but just redirect to your domain. — Fabio Filippi, May 25 '22 at 14:07

score 0 · Answer 1 · answered May 25 '22 at 18:07

Your top-level service worker script URL needs to be served from the same origin as the client page that calls navigator.serviceWorker.register(). This script URL is used to determine the default scope of the service worker registration. Because the location of the same-origin service worker script impacts the scope of the service worker registration, you'll normally want to serve your service worker from a top-level path, like /local-sw.js.

Inside of your service worker script, you can use importScripts() to include logic from any arbitrary cross-origin script URL, as long as the script is served using CORS.

So the following is allowed:

// Inside your web app's client JavaScript:

navigator.serviceWorker.register('/local-sw.js');

// Inside /local-sw.js:

importScripts('https://cross-origin.com/sw-logic.sw');

// Inside https://cross-origin.com/sw-logic.sw:

// Your service worker logic goes here.

it did't work, because I don't have any access to local files — Pouya Salimian, May 28 '22 at 12:58

score 0 · Answer 2 · answered Feb 15 '23 at 10:29

Yes shopify don't give access to local root files through third party access.

So you're validate script can't access the sw.js file in root folder.

The workaround for this to use app-proxy in the shopify. You need to place your sw.js file in the online server of any domain.

And add that server into your proxy-url.

Like in the prefix you can choose app and in the subpath you can give any name.

Now in the navigate.register.serviceworker() parameter give the relative path like /apps/your-subpath/sw.js.

Now whenever this function works it access this url (your-shopify-domain/apps/source).

Because of proxy-url above url redirects to the proxy-url.

Keep in mind in the proxy url don't give the file path just the entry point of your server.

As when navigate function access the /apps/source/sw.js.

It strips the sopifu-domain/apps/sub-path with your proxy - url and the new url becomes proxy-url/sw.js

But the response domain remain your shopify-domain. It's good.

Because to register service worker navigate.register function compares the requested and response domain.

So if your file comes from another domain It won't register the service worker.

Hope it helps.

How to Resgister Service Worker .js file from remote origin

2 Answers2

Linked