Проблемы с Rails Progressive Web Application - PullRequest
Новая
       7

Проблемы с Rails Progressive Web Application

0 голосов
/ 21 февраля 2020

Я пытаюсь реализовать прогрессивную функциональность веб-приложения в моем приложении на Rails 6, которое в первую очередь работает нормально. Я разрабатываю приложение для больницы, которое должно быть доступно и вне больницы, поэтому мы решили перенаправить внешние запросы в их DMZ на мой веб-сервер.

И это вызывает мою проблему: ресурс сценария, который регистрирует работника службы, находится за перенаправлением и не может получить к нему доступ, поэтому работник службы не загружается, и пользователи не могут использовать функциональность PWA.

Вот мой код для регистрации работника в приложении. js: 

    if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/service-worker.js', { scope: './' })
                           .then(function(registration) {
                             console.log('[Companion]', 'Service worker registered!')
                             console.log(registration)
                           })
}

Затем я использую подход двух контроллеров, один для файла манифеста, а другой для сервис-работник, который перенаправляет на соответствующие представления / файлы.

В своем теге head я добавил <link rel="manifest" href="/manifest.json"> в application.html.erb.

Мои маршруты следующие: 

get '/service-worker.js', to: 'service_workers/workers#index'
get '/manifest.json', to: 'service_workers/manifests#index'

Это мой служащий. js : 

var CACHE_VERSION = 'v1';
var CACHE_NAME = CACHE_VERSION + ':sw-cache-';

function onInstall(event) {
  console.log('[Serviceworker]', "Installing!", event);
  event.waitUntil(
    caches.open(CACHE_NAME).then(function prefill(cache) {
      return cache.addAll([
        '<%= asset_pack_path 'application.js' %>',
        '<%= root_path %>',
        '/mealplan',
      ]);
    })
  );
}

function onActivate(event) {
  console.log('[Serviceworker]', "Activating!", event);
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
          return cacheName.indexOf(CACHE_VERSION) !== 0;
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
}

// Borrowed from https://github.com/TalAter/UpUp
function onFetch(event) {
  event.respondWith(
    // try to return untouched request from network first
    fetch(event.request).catch(function() {
      // if it fails, try to return request from the cache
      return caches.match(event.request).then(function(response) {
        if (response) {
          return response;
        }
        // if not found in cache, return default offline content for navigate requests
        if (event.request.mode === 'navigate' ||
          (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
          console.log('[Serviceworker]', "Fetching offline content", event);
          return caches.match('/offline.html');
        }
      })
    })
  );
}

self.addEventListener('install', onInstall);
self.addEventListener('activate', onActivate);
self.addEventListener('fetch', onFetch);

Ошибки, которые я получаю в браузере при доступе к приложению для внешнего использования, следующие:

Ресурс сценария находится за редиректом, который запрещен.

Uncaught (в обещании) DOMException: не удалось зарегистрировать ServiceWorker для области ('https://xxxxxxx.nkbrf.de/') с помощью сценария ('https://xxxxxxx.nkbrf.de/service-worker.js'): сценарий ресурс находится за редиректом, который запрещен.

Я думаю, что свойство области может быть проблемой, но я не хочу устанавливать для него фиксированное значение. Есть ли способ решить эту проблему?

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 21 февраля 2020

Если вы удалите свойство scope, ошибка исчезнет? Выполните этот тест, поскольку свойство scope является необязательным и в вашем случае не должно быть разницы.

Согласно веб-сайту Mozilla:

параметр scope является необязательным, и может использоваться для указания подмножества вашего контента, которое вы хотите, чтобы работник службы контролировал. В этом случае мы указали «/ sw-test /», что означает весь контент в источнике приложения. Если вы пропустите его, оно все равно будет по умолчанию установлено на этом значении, но мы указали его здесь для целей иллюстрации.

https://developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API/Using_Service_Workers

...