gpt4 book ai didi

typescript - 如何在带有 typescript 的 vue-cli 中使用自定义服务 worker 事件

转载 作者:行者123 更新时间:2023-12-03 17:00:41 25 4
gpt4 key购买 nike

我有一个 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',
}
}
...

现在我想将以下附加事件注入(inject)到 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 中,我评论了环境检查,因此服务 worker 也在我的本地主机上提供服务。
/* 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);
});

我尝试的其他事情:
  • 使用 src/service-worker。 ts 而不是 js 文件没有帮助。
  • 使用“vue-cli-service serve --mode production”也会返回错误的 service worker。
  • 当我将附加代码放入公用文件夹并手动注册服务人员时,我得到了“推送”测试,但离线缓存显然不起作用。
  • 最佳答案

    我要做的第一件事是将“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"
    },

    我还没有弄清楚的事情是:
  • 我如何为服务人员使用 typescript 。
  • 如何使用有效的本地主机证书避免 .NetCore 解决方法。
  • 关于typescript - 如何在带有 typescript 的 vue-cli 中使用自定义服务 worker 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61258349/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com