Question 11741 in Shopify Question posted in
The Shopify help center can be found here.

How to Resgister Service Worker .js file from remote origin – Shopify

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));
              }
          });
})()
Tags:

2

Answers


  1. 0

    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.
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search