从 main.js 文件或 index.html 调用服务工作者是否正确?
Is correct to call the service worker from main.js file or from index.html?
我正在尝试使用 Webpack 在 Vuejs 上配置自定义服务工作者,但它不能完全使用事件或工作箱(取决于我调用 sw.js 文件的位置。
按照 Google 的工作箱指南,我已经配置了要注册的软件并缓存数据,但正如我之前提到的,取决于我调用软件的位置是否做错了事情(或者我可能只是愚蠢).
例如,如果我像这样在 index.html 上注册文件 SW:
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) 但是我可以使用 workbox:
服务-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);
...在这种情况下,我能够听到事件,但我无法使用 workbox(我在控制台上收到未定义的错误。 )
你知道哪里出了问题吗?
我认为你在这里混淆了一些东西,让我解释一下:)
Service Worker 和网络 application/web 页面本身 不要 共享相同的执行上下文。如果您在 SW 脚本中定义变量,则页面上的 "normal" JavaScript 无法访问它,反之亦然。它们完全分开。
出于这个原因,如果你把这样的东西:
import store from './store/index';
在您的服务-worker.js(Service Worker 脚本)中,它并不与您的[=35=中具有相同代码行的意思相同].您不能 从 SW 脚本调度 Vuex 操作。
如何从 SW 与 "main bundle" 通信?使用 postMessage。使用 postMessage,您可以从页面向 SW 以及从 SW 向页面发送 JSON 消息。然后消息的处理程序可以调度 Vuex 操作等。
这是否为您解决了问题?
我正在尝试使用 Webpack 在 Vuejs 上配置自定义服务工作者,但它不能完全使用事件或工作箱(取决于我调用 sw.js 文件的位置。
按照 Google 的工作箱指南,我已经配置了要注册的软件并缓存数据,但正如我之前提到的,取决于我调用软件的位置是否做错了事情(或者我可能只是愚蠢).
例如,如果我像这样在 index.html 上注册文件 SW:
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) 但是我可以使用 workbox:
服务-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);
...在这种情况下,我能够听到事件,但我无法使用 workbox(我在控制台上收到未定义的错误。 )
你知道哪里出了问题吗?
我认为你在这里混淆了一些东西,让我解释一下:)
Service Worker 和网络 application/web 页面本身 不要 共享相同的执行上下文。如果您在 SW 脚本中定义变量,则页面上的 "normal" JavaScript 无法访问它,反之亦然。它们完全分开。
出于这个原因,如果你把这样的东西:
import store from './store/index';
在您的服务-worker.js(Service Worker 脚本)中,它并不与您的[=35=中具有相同代码行的意思相同].您不能 从 SW 脚本调度 Vuex 操作。
如何从 SW 与 "main bundle" 通信?使用 postMessage。使用 postMessage,您可以从页面向 SW 以及从 SW 向页面发送 JSON 消息。然后消息的处理程序可以调度 Vuex 操作等。
这是否为您解决了问题?