我正在尝试使用Webpack在Vuejs上配置自定义服务工作程序,但是它不能完全与事件或工作箱配合使用(取决于我在哪里调用sw.js文件。
根据Google的工作箱指南,我已经将SW配置为可以注册并缓存数据,但是正如我之前提到的,这取决于我在哪里称SW是做错事情(或者也许我只是愚蠢)。
例如,如果我这样在 index.html 上注册文件SW:
<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>
...我的软件已注册,但无法捕获以下( service-worker.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 像这样:
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;
...
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);
...在这种情况下,我能够听到事件,但是我无法使用工作箱(在控制台上收到未定义的错误。)
您知道什么地方可能做错了吗?
答案 0 :(得分:0)
我认为您在这里有些困惑,让我解释一下:)
Service Worker和Web应用程序/网页本身请勿共享相同的执行上下文。如果在SW脚本中定义变量,则页面上的“常规” JavaScript无法访问它,反之亦然。它们是完全单独。
因此,如果您输入以下内容:
import store from './store/index';
在service-worker.js(服务工作者脚本)中,不的含义与main.js中具有相同代码行的含义相同。您不能从SW脚本分派Vuex操作。
如何从软件与“主捆绑包”进行通信?使用postMessage。使用postMessage可以将JSON消息从页面发送到SW,也可以从SW发送到页面。然后,消息的处理程序可以调度Vuex操作等。
这是否为您解决了所有问题?