ServiceWorker неправильно определяет где лежит файл?

Question

[Yuriy]

Суть проблемы возникает 404 ошибка на файл pwabuilder-sw.js

A bad HTTP response code (404) was received when fetching the script.
pwaupdate:176 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://site.ru/catalog/') with script ('https://site.ru/catalog/pwabuilder-sw.js'): A bad HTTP response code (404) was received when fetching the script.

В скрипте указано, где лежит файл

if ("serviceWorker" in navigator) {
  if (navigator.serviceWorker.controller) {
    console.log("[PWA Builder] active service worker found, no need to register");
  } else {
    // Register the service worker
    navigator.serviceWorker
      .register("/pwabuilder-sw.js", {
        scope: "./"
      })
      .then(function (reg) {
        console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
      });
  }
}

pwabuilder-sw.js находится в корне сайта, а в ошибке почему-то он пытается его найти в другом разделе https://site.ru/catalog/pwabuilder-sw.js т.е. если перейти с главной в другой раздел сайта, то путь до файла будет именно раздела.

Comments

[Ross Alex]

Манифест?

[Eddi_Jagger]

Добрый день! Подскажите, пожалуйста, получилось ли найти решение проблемы? Тоже столкнулся с этим.

[Yuriy]

Eddi_Jagger, не скажу точно, но глянул файл там написано так

.register("pwabuilder-sw.js", {

т.е. без /

[Eddi_Jagger]

Yuriy, ,благодарю за столь быстрый ответ, Юрий. К сожалению, даже с такой регистрацией получаю ошибку.
На данный момент вот так:

navigator.serviceWorker.register('service-worker.js', {
        scope: './'
})

Корневая директория у меня при открытии приложения
localhost/rambler-promo

Если перемещаюсь, например, на localhost/rambler-promo/calculator-ipoteki, то все ок, SW регистрируется и работает без ошибок.

А вот если иду на localhost/rambler-promo/bank/akibank , то уже получаю ошибку, как у вас.

[Yuriy]

Eddi_Jagger,

файл manifest.json и pwabuilder-sw.js лежать в корне сайта

/home/bitrix/ext_www/site.ru/manifest.json
/home/bitrix/ext_www/site.ru/pwabuilder-sw.js

в вызов
вызов скрипта pwabuilder-sw.js
в файле /home/bitrix/ext_www/site.ru/local/templates/front/js/custom.min.js

"serviceWorker"in navigator&&(navigator.serviceWorker.controller?console.log("[PWA Builder] active service worker found, no need to register"):navigator.serviceWorker.register("pwabuilder-sw.js",{scope:"./"}).then(function(a){console.log("[PWA Builder] Service worker has been registered for scope: "+a.scope)}));

Вот мой манифест.

{
    "dir": "ltr",
    "lang": "Russian",
    "name": "Site интернет-магазин",
    "scope": "/",
    "display": "standalone",
    "start_url": "https://site.ru/",
    "short_name": "Site",
    "theme_color": "#A12121",
    "description": "Site Site Site",
    "orientation": "any",
    "background_color": "#A12121",
    "related_applications": [],
    "prefer_related_applications": false,
    "categories":["shopping","business"],
    "icons": [
        {
            "src": "https://site.ru/images/icons/android-icon-36x36.png",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "https://site.ru/images/icons/android-icon-48x48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "https://site.ru/images/icons/android-icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "https://site.ru/images/icons/android-icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "https://site.ru/images/icons/android-icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "https://site.ru/images/icons/android-icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "https://site.ru/images/icons/android-icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"

        }
    ],
    "screenshots": [
        {
            "src": "https://site.ru/images/screenshot_1.png",
            "sizes": "600x900",
            "type": "image/png"
        },
        {
            "src": "https://site.ru/images/screenshot_2.png",
            "sizes": "600x900",
            "type": "image/png"
        },
        {
            "src": "https://site.ru/images/screenshot_3.png",
            "sizes": "600x900",
            "type": "image/png"
        },
        {
            "src": "https://site.ru/images/screenshot_4.png",
            "sizes": "1280x720",
            "type": "image/png"
        }
    ],
    "url": "https://site.ru/"
}

[Eddi_Jagger]

Yuriy, благодарю за код!

Ваш код очень помог, а точнее вот эта проверка

if (!navigator.serviceWorker.controller) {
...
}

Благодаря этому if'у SW не регистрируется на каждой странице, ошибок более нет. Для управления SW-ом использовал плагин Workbox Webpack Plugin (InjectManifest)