我有一个Vue-cli项目,并希望启用离线支持(pwa,渐进式Web应用程序功能)。因此,我为vue cli安装了PWA-Plugin。
在vue.config.js中,我配置了Pwa和工作箱,如下所示:
...
pwa: {
name: 'projectname',
// configure the workbox plugin
// workboxPluginMode: 'GenerateSW',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'src/service-worker.js',
}
}
...
现在,我想将以下其他事件注入到service-worker中(来自src / service-worker.js)
self.addEventListener('push', function (event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
});
self.addEventListener('fetch', function (event) {
console.log(event.request.url);
// event.respondWith(() => {
// fetch(event.request)
// }
// );
});
在registerServiceWorker.ts中,我注释了环境检查,因此服务工作者也可以在我的本地主机上服务。
/* eslint-disable no-console */
import { register } from 'register-service-worker'
// if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n'
)
},
cached () {
console.log('Content has been cached for offline use.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
// }
但是当我检查提供给浏览器的service-worker.js时,我只会看到默认的service-worker
/* eslint-disable-next-line no-redeclare */
/* global self */
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// It is read and returned by a dev server middleware that is only loaded
// during development.
// In the production build, this file is replaced with an actual service worker
// file that will precache your site's local assets.
self.addEventListener('install', () => self.skipWaiting())
self.addEventListener('activate', () => {
self.clients.matchAll({ type: 'window' }).then(windowClients => {
for (const windowClient of windowClients) {
// Force open pages to refresh, so that they have a chance to load the
// fresh navigation response from the local dev server.
windowClient.navigate(windowClient.url)
}
})
})
我希望它看起来像:
self.addEventListener('install', () => self.skipWaiting())
self.addEventListener('activate', () => {
self.clients.matchAll({ type: 'window' }).then(windowClients => {
for (const windowClient of windowClients) {
// Force open pages to refresh, so that they have a chance to load the
// fresh navigation response from the local dev server.
windowClient.navigate(windowClient.url)
}
})
})
self.addEventListener('push', function (event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
});
self.addEventListener('fetch', function (event) {
console.log(event.request.url);
});
我尝试过的其他事情:
我要做的第一件事是将“ devserver”添加到vue.config.js:
devServer: {
https: true,
},
pwa: {
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/service-worker.js',
swDest: 'service-worker.js',
}
}
...
此外,我没有设法运行没有证书错误并为生产环境提供服务的vue-cli服务(即使我是通过生产模式构建的,在/ dist]文件夹中也使用了正确的服务工作者)。
我当前的解决方法是使用.NetCore应用程序,将代码复制到wwwroot
,然后使用IISExpress运行该解决方案。我使用npm run ship
。"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "copydist": "xcopy .\\dist ..\\wwwroot\\ /s /y", "ship": "npm run build && npm run copydist", "test": "set NODE_ENV=production && npm run build && serve -s dist" },
我还没有弄清楚的是: