Question

我有一个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);
});

我尝试过的其他事情：

使用src / service-worker。 ts 代替js文件无济于事。
使用“ vue-cli-service服务-模式生产”也会返回错误的服务人员。
当我将其他代码放在公用文件夹中并手动注册服务工作者时，我通过了“ push”测试，但是脱机缓存显然不起作用。

Answer 1

我要做的第一件事是将添加到 vem.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"
  },

我仍然不知道的事情是：

如何为服务工作人员使用打字稿。
如何通过有效的本地主机证书避免.NetCore解决方法。

Answer 2

作为在本地使用https服务应用程序的解决方案，您可以使用npm服务包（https://www.npmjs.com/package/serve）。

使用mkcert（https://github.com/FiloSottile/mkcert）生成证书。

serve -s -l 8080 --ssl-cert localhost.pem --ssl-key localhost-key.pem dist

如何在vue-cli中使用Typescript

2 个答案: