我正在使用workbox-sw和workbox-webpack-plugin src sw.js文件位于根文件夹（与.env文件处于同一级别）

如何获取环境变量并将其访问到我的src sw.js文件中

这是我的 webpack.config.js

new workboxPlugin({
    globDirectory: 'dist',
    globPatterns: ['**/*.{html,js,css,svg,otf,png,jpg,gif}'],
    swSrc: './sw.js',
    swDest: path.join('public', 'sw.js')
})

每一个帮助将不胜感激！感谢大家！

我的workbox 3.2配置非常简单如下:

const pagesHandler = workbox.strategies.networkOnly();
workbox.routing.registerRoute(new RegExp('/?(?:id|en|sg|my|bn)/?$'), pagesHandler);

Workbox正确选取路线:

但是响应始终是200并且有警告

检查网络选项卡显示Service Worker未能返回文档:

ERR_CONNECTION_RESET上面的"失败"文字上有工具提示.

/en路由中没有错误(它在生产中运行数月),如果该路由没有注册到服务工作者(通过删除上面的代码片段),则不会出现问题.我也尝试将缓存策略更改为networkFirst.

同样sw.js,我也有预先路由(workbox.precaching),他们都工作正常(可以由SW缓存和服务)

这可能有什么问题？以及如何解决？ /en是由NodeJS提供的服务器呈现的React页面.

语境

我有一个使用webpack，vueJS和Workbox的SPA。在服务人员中，我有以下几行（）：

workbox.precaching.precache([
  '/index.html'
])

workbox.routing.registerNavigationRoute('/index.html', {
  blacklist: [
    /.*\.css/,
    /.*\.(?:png|jpg|jpeg|svg|gif)/,
    /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/
  ]
})

问题

首次构建该应用程序时，该app.js文件现在已命名app.xxxxxxxx.js（例如）。因此，当客户端使用服务工作者时，它将index.html使用以下行预缓存文件：

<script type=text/javascript src=/js/app.xxxxxxxx.js></script>

当我更新应用程序并对其进行重建时，该app.js文件将被命名app.yyyyyyyy.js，但客户端仍会index.html使用旧app.xxxxxxxx.js文件缓存该文件，因此该应用程序将无法工作（显然...）

预期行为

服务工作者似乎index.html使用CacheFirst策略获取了预缓存的文件。我猜如果它使用NetworkFirst策略，它将起作用。

有可能做到吗？

-编辑-

我忘了精确：每个.js文件都使用NetworkFirst策略进行缓存：

workbox.routing.registerRoute(
  /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/,
  workbox.strategies.networkFirst({
    cacheName: 'assets-cache',
    plugins: [
      new workbox.expiration.Plugin({})
    ],
  })
)

我用针线用的WebPack生成服务工作者。

在以下代码中webpack.config.js：

new WorkboxPlugin.InjectManifest({
  swSrc: "./src/sw.js"
}),

很好地生成了一个服务人员。

在中./src/sw.js，我有：

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

而且我所有的资产都很好地预缓存了。

但是，我只有一个页面应用程序，并且我注意到从非主页路由脱机时刷新页面时，服务工作者没有响应。例如，当/page1离线时刷新不起作用，但是刷新/起作用。

如何配置工作箱以使用运行时策略/index.html作为HTML请求的后备？

注意

做这样的事情：

new WorkboxPlugin.InjectManifest({
  swSrc: "./src/sw.js",
  navigationFallback: "/index.html"
})

不工作，因为navigationFallback不是一个有效选项在它的上面使用。

{ message: '"navigationFallback" is not a supported parameter.'

我有一个带有自签名SSL的快递服务器，该服务器仅为SPA前端提供资产。当我访问https://localhost:8433应用程序统计信息并成功获取所有需要的资产时。但是，与此同时，应用程序的服务工作者（工作箱）也会发送其请求以缓存相同的资产。这些请求随机失败，并带有TypeError: Failed to fetch

网络标签：

似乎有些请求被服务工作者随机取消。

我已经尝试寻找类似的问题，但是没有发现。有些建议玩弄CORS，没有帮助，交换localhost的127.0.0.1或改变缓存策略有同样的效果，最后我不得不用预先缓存只（不运行缓存）的很小的配置，可惜的是没有什么帮助。

我很确定这应该是一个普遍的问题，我只是想念它:)有人有什么想法吗？

顺便说一句，当从不安全的地方提供应用程序时http-完全没有错误。

我正在尝试在我的Angular Application中使用service-worker。它是使用webpack构建的。

我使用workbox-webpack-plugin。我想为我的GET API调用提供表单缓存，并在后台更新数据。

为此，我将选项runtimeCaching与处理程序一起使用staleWhileRevalidate（有关GenerateSW插件的更多详细信息，请参见此处）

这是我在webpack.config.js中的配置：

  new GenerateSW({
    // importWorkboxFrom: 'local',
    clientsClaim: true,
    skipWaiting: true,
    navigateFallback: '/index.html',
    runtimeCaching: [
      {
        // Match any same-origin request that contains 'api'.
        urlPattern: /https:\/\/api.*/,
        handler: 'staleWhileRevalidate',
        options: {
          cacheName: 'api',
          broadcastUpdate: {
            channelName: 'api-updates',
          },
          // Add in any additional plugin logic you need.
          plugins: [],
        },
      }
    ]
  }),

根据本文档，当缓存更新时，我应该能够收到一个事件（我想向用户显示某些内容，以便他可以刷新数据）。

接收数据的代码如下所示：

export class AppComponent implements OnInit {

  public ngOnInit() {
    console.log( 'AppComponent - ngOnInit' ); …

我们有一个信号页应用程序，它已安装并处于活动状态。

现在我们的服务器重建了应用程序，服务端文件正在服务器端更新。

我们的客户对这个新的Service Worker文件一无所知，并且仍在使用旧的Service Worker文件。

什么时候有效？ 如果我刷新/重新加载该应用程序，则正在安装新的Service Worker。

如果正在服务器上更新服务工作者文件并且未重新加载客户端，我们如何刷新客户端？

可能的解决方案：我认为，我需要在1小时左右之后进行轮询。

Create-react-app v2 使用 workbox cacheFirst 策略。我想使用 staleWhileRevalidate。如何创建自定义 Service Worker 并将其添加为现有应用程序？

I am implementing PWA into my project, I have setted up the serviceworker.js, and I am using workbox.js for cache routing and strategies.

1- I add the offline page to cache on install event, when a user first visit the site:

/**
 * Add on install
 */
self.addEventListener('install', (event) => {
  const urls = ['/offline/'];
  const cacheName = workbox.core.cacheNames.runtime;
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls)))
});

2- Catch & cache pages with a specific regex, like these:

https://website.com/posts/the-first-post

https://website.com/posts/

https://website.com/articles/

workbox.routing.registerRoute(
  new RegExp('/posts|/articles'), …

抱歉，我没有这个问题的可重复测试案例，因为我什至从未亲眼看到过。我只知道发生这种情况是因为我的应用程序中有客户端登录以及用户的抱怨。

问题是：

1. 我部署了新版本的应用
2. 用户访问我的网站，获取新版本并成功运行
3. 用户再次访问我的网站并获得了我的应用的旧版本

我正在使用服务人员，我希望可以为这种情况不会发生提供一些保证。当新版本包括IndexedDB模式迁移时，这尤其令人不安，因为那时我的应用程序的旧版本甚至无法正常工作。

更多细节：

我正在使用Workbox 4.3.1。我的服务人员基本上是：

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerNavigationRoute("/index.html", {
    blacklist: [
        new RegExp("^/static"),
        new RegExp("^/sw.js"),
    ],
});

workbox.precaching.precacheAndRoute([]);被填充workboxBuild.injectManifest。我可以手动确认是否填写了正确的文件。通常，服务人员可以正常工作。我可以在浏览器开发工具中看到它。我可以断开与Internet的连接，但仍可以使用我的应用程序。一切似乎都很好。就像我在上面说的那样，我从未见过这个问题发生，并且我没有可复制的测试用例。

但是我的一些用户遇到了上述问题。我尝试使用客户端错误日志记录进行调查。我向我的应用程序添加了一些代码，以将其版本号存储在localStorage中，并在初始加载时将其与当前运行的版本号进行比较。如果localStorage中的版本比当前正在运行的版本新（即，它过去成功运行了一个新版本，但现在又回到了较旧的版本），它将记录版本号以及一些其他信息：

let registrations = [];
if (window.navigator.serviceWorker) {
    registrations = await window.navigator.serviceWorker.getRegistrations();
}
log({
    hasNavigatorServiceWorker:
        window.navigator.serviceWorker !== undefined,
    registrationsLength: registrations.length,
    registrations: registrations.map(r => {
        return {
            scope: r.scope,
            active: r.active
                ? {
                      scriptURL: r.active.scriptURL,
                      state: r.active.state,
                  }
                : null,
            installing: r.installing
                ? {
                      scriptURL: r.installing.scriptURL,
                      state: r.installing.state,
                  }
                : null,
            waiting: r.waiting
                ? {
                      scriptURL: …