服务工作者不缓存 https 响应答案

【问题标题】：Service worker not caching https responses服务工作者不缓存 https 响应
【发布时间】：2019-07-17 19:30:17
【问题描述】：

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

【问题讨论】：

如果您单击cache storage 中的单个缓存项，您是否在其中任何一个中看到您的API Url？
@Francesco 不，它不在网址列表中
您是否尝试在“urlPattern”字段中使用静态 URL 而不是正则表达式？运行时可能会发送拼写错误或错误值，并且正则表达式与 API URL 不匹配。如果您在缓存存储中没有看到它，则表示完全正确（没有 URL 匹配）。
@Francesco 静态 url 没有区别。
服务工作者模块似乎已正确导入，并且软件已在客户端上注册，因此在此之前一切似乎都很好。如果即使使用“硬编码” URL，它仍然没有缓存 API 响应，那么问题似乎与缓存设置明确相关，这不仅仅是一个错字。不幸的是，我没有使用 Vue 的经验，但我写了一篇文章来使用 Angular 缓存 API：dev.to/paco_ita/…（以防万一你可能会发现一些关于你身边缺少的东西的提示）

标签： vue.js service-worker progressive-web-apps

【解决方案1】：

很可能是包@ionic/vue 是原因。

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

在 cmets 建议的同一篇文章中，我还提供了 Overview about Workbox。

一些关于使用 Workbox 和 Vue PWA 的文章：

【讨论】：