Question

我有一名服务人员负责vue pwa。它能够缓存资产，但我不知道如何缓存http响应。根据此tutorial，我应该在“缓存存储”列表中看到api-cache

vue.config.vue

module.exports = {
  pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "./src/sw.js",
      swDest: "service-worker.js",
      navigateFallback: "/index.html",
      runtimeCaching: [
        {
          urlPattern: new RegExp(
            "^https://<api>.<domain>.co.za/"
          ),
          handler: "networkFirst",
          options: {
            networkTimeoutSeconds: 2000,
            cacheName: "api-cache",
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }
      ]
    }
  }
};

registerServiceWorker.js

/* 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.'
      )
    },
    registered (registration) {
      setInterval(() => {
        registration.update();
      }, 1000 * 60 * 60);

      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated (registration) {
      document.dispatchEvent(
        new CustomEvent('swUpdated', { detail: registration })
      );
      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)
    }
  })
}

Answer 1

原因很可能是软件包skb

。

如果可以的话，我建议尝试使用Workbox实施PWA。它是一组节点库，因此您可以嵌入到Vue应用中。

在评论中建议的同一篇文章中，我也给出了Overview about Workbox。

有关将Workbox与Vue PWA结合使用的一些文章：

服务人员未缓存https响应

1 个答案: