问题标签 [workbox-webpack-plugin]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
11208 浏览

webpack - Webpack 工作箱在您的 SW 源代码中找不到 self.__WB_MANIFEST

我从 webpack-workbox-plugin 的 v4 迁移到 v5,但是当我尝试构建时,出现错误:

是否__WB_MANIFEST会在 precach-manifest 文件中创建并像 v4 一样自动导入?

网络包配置:

我的 sw.js:

0 投票
1 回答
1257 浏览

vue.js - VueJS PWA's - 通过 GenerateSW 启用 Workbox “调试”

在使用GenerateSW构建您的 WorkBoxservice-worker.js时,有许多配置很难找到一致的文档。

许多问题可以通过在以下位置启用 Workbox 调试模式来解决service-worker.js

如何自动npm run build将此行添加到service-worker.js

我目前的配置是:

请注意,只需将setConfig行添加到service-worker.js(构建后)就可以满足我的需要..但这很乏味并且必须是不必要的?

0 投票
0 回答
325 浏览

reactjs - 通过 react-app-rewired 将 workbox-webpack-plugin 配置添加到 webpack 配置中而不弹出以添加 workbox injectionManifest 插件

通过 config-overrides.js 将工作箱中的 injectManifest 插件添加到 webpack 配置中,因为我不想注入我的项目

警告:我对此很陌生。

我正在寻找战争来添加一些配置以将 injectManifest 插件插入到我的 webpack 配置中而不弹出 webpack 设置,最后我发现插件名称是react-app-rewired 并且这个插件给了我一个添加一些配置的方法但我知道如何添加我的配置我尝试了一种简单的方法,但是当我尝试朗姆酒npm start时出现错误。

但我在控制台中遇到这样的错误:

0 投票
1 回答
322 浏览

service-worker - workbox v5 - 如何版本服务工作者?

在 v4 中,我们可以使用precacheManifestFilenameworkbox webpack 插件在我们的清单名称中放置一个版本,该版本被导入到 SW 中,从而对其进行版本化。既然清单已内联并删除了该选项,那么版本 SW 的新方法是什么?我可以想到一些可以在缩小后幸存下来的方法,但它们看起来很老套。我们应该对缓存名称进行版本控制吗?

0 投票
1 回答
889 浏览

workbox - 如何缓存 webpack 的资产并排除 index.html?

我想优化我的 SPA 以缓存所有 webpack 的资产,以便它们在下次重新加载时加载得更快。

我不需要离线功能,我希望用户在重新加载页面后始终能够获得新版本,没有“新内容可用;请刷新”。信息。

据我了解,Webpack 在每个文件的名称中都包含哈希,因此文件名从一个版本到另一个版本是“唯一的”。所以我的策略是缓存除index.html. 因此,当用户点击重新加载时,他总是index.html从服务器获取,然后服务工作人员为已加载的文件提供缓存。

简而言之,我希望复制一个简单的缓存,如标头 Cache-Control。

我应该使用workbox-webpack-pluginandGenerateSW(config)方法吗?如何将其配置为仅从index.html缓存中排除并包含其他所有内容?

0 投票
1 回答
569 浏览

workbox - 如何将更多文件添加到 precach 清单列表?

我的应用程序是使用创建的create-react-app,我正在使用react-app-rewired将其更改navigationFallback: "index.html"navigationFallback: "offline.html".

我使用 将copy-web-plugin文件复制offline.html到 dist 文件夹中。但是,在文件中找不到这个precach-manifest文件。

谢谢

0 投票
0 回答
98 浏览

reactjs - 如何在使用反应应用程序中的工作箱安装服务工作者时预缓存散列文件(/build/static)

我创建了一个反应应用程序。我需要使该应用程序可供用户离线使用。为此,我使用 Workbox 将其制成 PWA。

我能够预缓存图像,但我还想在安装服务工作者时预缓存 /build/static/js、/build/static/CSS 和整个构建文件夹中的所有散列文件。目前 Workbox 正在缓存服务工作者注册时的所有图像,但其他 js 文件仅在我访问特定页面时才被缓存。这意味着只有用户在他在线时访问的应用程序部分在他离线时才可用。

如何在 Service Worker 安装时缓存所有散列文件和图像。请建议我如何实现这一点。

0 投票
1 回答
391 浏览

javascript - 如何在 vuejs 中生成每个版本的新版本?

我正在使用带有 pwa(工作箱)的 vue cli。

每次我构建项目时,vue 都会为我创建文件:precache-manifest.882c44d211b70f8989278935.js.

里面我有条目:revisionurl

如果我不更改文件,它会得到相同的revision.

revision我的问题是每次构建项目时如何强制不同?

0 投票
1 回答
836 浏览

laravel - 如何使用 laravel-mix-workbox 预缓存静态资产?

我正在尝试使用 Laravel 和 Vue.js 构建具有离线支持的 PWA。我正在使用 laravel-mix-workbox 插件来设置我的服务工作者,但是我在尝试完成应该是一项简单的任务时遇到了很多麻烦。我有一些从我的应用程序中提供的静态资产(图像、XML 文件等),我无法让工作箱将它们添加到预缓存文件列表中。

我尝试将资产移动到 /resources/img 并添加对 copyDirectory 的调用以尝试将它们包含在内,此外,我尝试了 webpack-copy-plugin,但只包含编译后的资产(js、css、字体等)。这是我的 webpack.mix.js 文件:

有谁知道如何将我的/resources/img(或/public/img)中的所有文件包含在预缓存文件列表中?

0 投票
1 回答
186 浏览

javascript - 工作箱后台同步 - 访问重放的 API 响应