Можем ли мы зарегистрировать Service Worker из разных источников

Я пытаюсь использовать сеть CDN для размещения моего сервисного работника, который разрешает CORP из разных источников. Затем я узнал об API-интерфейсе fetch для доступа к ресурсам Cross Origin. Вот код, который я использую в своем Index.HTML для регистрации работника службы

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('https://www.otherdomain.com/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}`

Как использовать кросс-доменный сервис-воркер с API-интерфейсом выборки


javascript https progressive-web-apps fetch-api service-worker
person Ajay Malik    schedule 13.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Какую ошибку вы получаете, когда сервисный работник работает только через https, в любом случае было бы полезно не включать это в ваш html-файл, а скорее в другой файл js.

Вот что-то, что назвало бы вас файлом sw.js. включите это в свой html или снова в другой файл js.

var deferredPrompt;

if (!window.Promise) {
  window.Promise = Promise;
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function () {
      console.log('Service worker registered!');
    })
    .catch(function(err) {
      console.log(err);
    });
}

window.addEventListener('beforeinstallprompt', function(event) {
  console.log('beforeinstallprompt fired');
  event.prompt();
  deferredPrompt = event;
  return false;
});

Попробуйте это

self.addEventListener('fetch', function (event) {

  var url = 'https://httpbin.org/get'; //add your URL here 
  if (event.request.url.indexOf(url) > -1) {
    event.respondWith(
      caches.open(CACHE_DYNAMIC_NAME)
        .then(function (cache) {
          return fetch(event.request)
            .then(function (res) {
              // trimCache(CACHE_DYNAMIC_NAME, 3);
              cache.put(event.request, res.clone());
              return res;
            });
        })
    );
  } else if (isInArray(event.request.url, STATIC_FILES)) {
    event.respondWith(
      caches.match(event.request)
    );
  } else {
    event.respondWith(
      caches.match(event.request)
        .then(function (response) {
          if (response) {
            return response;
          } else {
            return fetch(event.request)
              .then(function (res) {
                return caches.open(CACHE_DYNAMIC_NAME)
                  .then(function (cache) {
                    // trimCache(CACHE_DYNAMIC_NAME, 3);
                    cache.put(event.request.url, res.clone());
                    return res;
                  })
              })
              .then(function (err) {
                return caches.open(CACHE_STATIC_NAME)
                  .then(function (cache) {
                    if (event.request.headers.get('accept').includes('text/html')) {
                      return cache.match('offline.html');
                    }
                  });
              });
          }
        })
    );
  }
});



self.addEventListener('install', function (event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
      .then(function (cache) {
        console.log('[Service Worker] Precaching App Shell');
        cache.addAll(STATIC_FILES);
      })
  )
});
person whiraj    schedule 13.03.2018
comment
вот какую ошибку я получаю DOMException: Failed to register a ServiceWorker: The origin of the provided scriptURL ('https://rawgit.com') does not match the current origin - person Ajay Malik; 13.03.2018
comment
Вы можете добавить весь свой сервисный работник? Как я понимаю, вы пытаетесь получить сервис-воркер откуда-то, а не из своих локальных ресурсов? Просто нужно больше информации. - person whiraj; 13.03.2018
comment
Эта ошибка возникает, когда я использую любой из приведенных выше скриптов. - person Ajay Malik; 13.03.2018
comment
вы добавили заголовки cors? Просто нужно больше информации, чем пара строк кода. - person whiraj; 13.03.2018
comment
Этот CDN включил заголовок CORS для всего домена, даже мой manifest.json размещен на нем. - person Ajay Malik; 13.03.2018
comment
добавил больше материала в мой ответ, попробуйте использовать событие выборки, а не загрузку. удалите некоторые вещи, которые вам не нужны, вам также нужно добавить статический кеш и динамический кеш. Проблема только с твоей прошивкой? - person whiraj; 13.03.2018
comment
Вышеупомянутая ошибка удалена, но сервисный работник все еще не установлен - person Ajay Malik; 13.03.2018
comment
ну, вы не устанавливаете его нигде в своем коде, вы просто получаете его - person whiraj; 13.03.2018
comment
вам нужно установить его, активировать, а затем получить все, что вы хотите - person whiraj; 13.03.2018
comment
Привет! Не могу понять как установить, подскажите - person Ajay Malik; 13.03.2018
comment
Добавлено больше кода, но, честно говоря, просто погуглите. Хотелось бы больше лайков :D - person whiraj; 13.03.2018