Правильно ли вызывать работника сервиса из файла main.js или из index.html? - PullRequest
Новая
       35

Правильно ли вызывать работника сервиса из файла main.js или из index.html?

0 голосов
/ 16 апреля 2019

Я пытаюсь настроить рабочих сервисов на Vuejs с Webpack, но он не полностью работает с событиями или рабочим окном (в зависимости от того, где я вызываю файл sw.js.

Следуя руководству по рабочему окну от Google, я настроил ПО для регистрации и кеширования данных, но, как я уже упоминал ранее, в зависимости от того, куда я звоню, ПО делает неправильные вещи (или, может быть, я просто тупой).

Например, если я зарегистрирую файл SW на index.html , например:

index.html 

<script>
    // Check that service workers are registered
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('service-worker.js').then(registration => {
                // registration.pushManager.subscribe({ userVisibleOnly: true, 
                //   applicationServerKey: key });
                console.log('SW registered: ', registration);
            }).catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });
        });
    }
</script>

... мой SW зарегистрирован , но он не может перехватывать события (в автономном режиме и онлайн) в файле SW , показанном ниже ( service-worker.js ) НО Я могу использовать рабочий ящик :

сервис-workers.js 

import store from './store/index';

window.addEventListener('online', () => {
  console.log('Ando online compa');
  store.dispatch('IndexedDB/prueba');
});

window.addEventListener('offline', () => {
  console.log('Ando offline compa');
  store.dispatch('IndexedDB/prueba');
});

window.addEventListener('push', (event) => {
  const title = 'Get Started With Workbox';
  const options = {
    body: event.data.text(),
  };
  event.waitUntil(window.registration.showNotification(title, options));
});

workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.precaching.precacheAndRoute(self.__precacheManifest);

... Если я удалю тег сценария из index.html и вызову main.js и изменим service-worker.js вот так:

main.js 

import './vapidHelper';
import Vue from 'vue';
import './plugins/vuetify';
import VueSocketIO from 'vue-socket.io';
import App from './App.vue';
import router from './router';
import store from './store';
import './axiosConfig';
import initDB from './indexedDB/IndexedDB';
import './service-worker'; // <---- LINE

Vue.config.productionTip = false;
...

сервис-worker.js 

import store from './store/index';

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js').then((registration) => {
      // registration.pushManager.subscribe({ userVisibleOnly: true, 
      //   applicationServerKey: key });
      console.log('SW registered: ', registration);
    }).catch((registrationError) => {
      console.log('SW registration failed: ', registrationError);
    });
  });

  window.addEventListener('online', () => {
    console.log('Ando online compa');
    store.dispatch('IndexedDB/prueba');
  });

  window.addEventListener('offline', () => {
    console.log('Ando offline compa');
    store.dispatch('IndexedDB/prueba');
  });

  window.addEventListener('push', (event) => {
    const title = 'Get Started With Workbox';
    const options = {
      body: event.data.text(),
    };
    event.waitUntil(window.registration.showNotification(title, options));
  });
}

workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.precaching.precacheAndRoute(self.__precacheManifest);

... В этой ситуации Я могу слышать события, но не могу использовать рабочую коробку (я получаю сообщение об ошибке на консоли, что оно не определено).


У вас есть идея, что может делать не так?

1 Ответ

0 голосов
/ 17 апреля 2019

Я думаю, что вы перепутали некоторые вещи, позвольте мне объяснить:)

Service Worker и само веб-приложение / веб-страница НЕ используют один и тот же контекст выполнения. Если вы определите переменную в своем скрипте SW, ваш «нормальный» JavaScript на странице не сможет получить к ней доступ, и наоборот. Они ПОЛНОСТЬЮ отдельные.

По этой причине, если вы поставите что-то вроде этого: 

import store from './store/index';

в вашем service-worker.js (сценарий Service Worker), это НЕ означает то же самое, что наличие в вашем main.js. той же строки кода. Вы НЕ МОЖЕТЕ отправить действия Vuex из SW-скрипта.

Как вы можете общаться с SW на "основной пакет"? Используйте postMessage. С postMessage вы можете отправлять сообщения JSON со страницы на ПО и с ПО на страницу. Затем обработчик сообщений может отправлять действия Vuex и т. Д.

Это проясняет ситуацию для вас?

...