问题标签 [workbox-webpack-plugin]

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

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

这是来自我的webpack.config.js

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

我想使用带有 vue 组件的后备页面，但没有得到响应。因此，如果没有响应，则当前返回 html 页面。但我需要返回 Vue 组件。我正在使用 networkFirst 策略。

但是在 OfflineUrl 中，我想返回我的 Vue 组件。

这是我使用 workbox-webpack-plugin (InjectManifest) 编译的 service-worker：

预缓存没问题，但我不知道如何让 registerRoute 工作，我尝试了几件事。SW 只是不兑现来自“ http://54.xx.xxx.57/ ”的任何东西。请帮忙... ：）

在我的服务人员中，我有：

（例如）但没有创建这样的缓存。（但预缓存正在工作）

我想我缺少一些基本的东西。似乎找不到解决此问题的示例。

任何帮助，将不胜感激

我从上周开始对 PWA 进行研究我发现 Workbox 是一个很好的实现选择，我尝试使用 React+worbox+webpack 实现 PWA 我能够创建 App 图标，缓存 GET apis 数据但无法缓存服务器端用户图像和 POST api。如果有人发现这种方法不正确，请建议我实现 PWA 的最佳方法。我正在寻求帮助或指导，以帮助我完成最后期限。感谢您的帮助。提前致谢

包.json

webpack.config.js

索引.html

清单.json

语境

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

问题

首次构建应用程序时，该app.js文件现在被命名app.xxxxxxxx.js（例如）。因此，当客户端使用 service worker 时，它会预先缓存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 策略进行缓存：

BackgroundSync.Queue当“DidReplay”重播请求（仅请求，而不是整个队列）时，我尝试收到没有成功的通知（使用 eventListner、Callback 或其他任何东西）。

关键是我需要获取服务器响应以requestWillReplay根据此响应更改传入的重播请求。

另外，我尝试使用以下方法拦截请求：

但它不起作用，我只拦截来自客户端的请求。

有什么办法吗？

我正在使用Workbox 3.0 (webpack-plugin) 和Laravel Mix (5.6) 来自动生成一个 ServiceWorker 文件。

运行 webpack 编译器时，Workbox 为预缓存资产生成的清单文件如下所示：

显然，URL 字符串是错误的，会导致实际网页出现错误。

这是我的webpack.mix.js：（相关部分）

虽然在这里使用InjectManifest进行预缓存以及我自己的动态缓存，但在使用GenerateSW插件时也会发生同样的情况。

和我的来源sw.js：

知道如何解决这个问题吗？如果我手动修改precacheManifest，它工作正常：

重现此的步骤：

1. 创建一个新的 Laravel 项目：Laravel new <proj_name>
2. cd <proj_name>
3. npm install
4. npm install --save-dev workbox-webpack-plugin
5. 将这些行添加到 webpack.mix.js 为 Workbox 配置它：

const { GenerateSW } = require('workbox-webpack-plugin');

mix.webpackConfig({ plugins: [new GenerateSW()] });

6. 运行php artisan make:auth并php artisan migrate完成前端脚手架
7. 编辑 \resources\assets\js 文件夹中的 bootstrap.js 以包含注册新 ServiceWorker 的常用代码
8. 跑npm run dev

编译后的 precache-manifest 文件如下所示：

我将 Angular（自定义 Webpack 构建过程）与Workbox v.3.2.0和workbox-webpack-plugin v.3.2.0（InjectManifest 插件）一起用于预缓存目的，并且在修改style.css文件时遇到了困难由extract-text-webpack-plugin生成。

如果我更改了适当的 CSS 文件，Webpack 会生成更新的style.css文件，但它的修订版在预缓存清单中没有更改。

结果，我最终得到了服务工作者缓存中未更新的文件。

以下是 Webpack 配置的相关部分（完整配置太大）：

请注意，由于缓存以前版本中引用文件的过时版本（不再存在）new ExtractTextPlugin("[name].[contenthash].css") 的一些问题，我不能使用类似 的东西。index.html这就是我们使用反缓存 URL 参数而不是在文件名中嵌入修订的原因。

对于任何其他 Webpack 生成的文件，修订版更新没有任何问题（即使对于文件名中没有嵌入修订版的资产）

有人可以帮我吗？谢谢 ：）

我有一个使用 apollo 作为 grapql 客户端的反应应用程序。该应用程序现在需要对子集/子应用程序的离线支持。有一个服务工作者（感谢 workbox 和 webpack）对应用程序的资产进行预缓存并且运行良好。现在需要添加对数据的支持。该应用程序需要像在线一样在离线模式下工作。这意味着，用户应该能够看到所有数据并执行一些突变，当应用再次上线时需要同步回来。

我有以下方法作为可能的解决方案： * 使用服务工作者：添加一个按钮，触发一组查询以检索离线工作所需的所有数据。使用 service worker (workbox runtimeCaching) 缓存这些查询的所有响应。当应用程序离线时，服务工作者将“提供”查询的响应，因此应用程序将“像在线一样”工作，服务工作者作为“代理”正常执行查询。为突变和使用设置“乐观的 ui”方法workboxbackgroundSync 以同步更改（基本上在浏览器再次联机时将突变操作发送回端点）。* 使用一些 apollo 原生方法（如 apollo-cache-persist）将查询缓存存储在 localStorage 中。触发应用程序所需的所有查询，保留该缓存，如果应用程序不在线，则在进一步加载时从缓存中重新水化应用程序。

对于离线网络应用程序来说，什么是更好、更简单的方法=