问题标签 [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.
webpack - Webpack 工作箱在您的 SW 源代码中找不到 self.__WB_MANIFEST
我从 webpack-workbox-plugin 的 v4 迁移到 v5,但是当我尝试构建时,出现错误:
是否__WB_MANIFEST
会在 precach-manifest 文件中创建并像 v4 一样自动导入?
网络包配置:
我的 sw.js:
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
(构建后)就可以满足我的需要..但这很乏味并且必须是不必要的?
reactjs - 通过 react-app-rewired 将 workbox-webpack-plugin 配置添加到 webpack 配置中而不弹出以添加 workbox injectionManifest 插件
通过 config-overrides.js 将工作箱中的 injectManifest 插件添加到 webpack 配置中,因为我不想注入我的项目
警告:我对此很陌生。
我正在寻找战争来添加一些配置以将 injectManifest 插件插入到我的 webpack 配置中而不弹出 webpack 设置,最后我发现插件名称是react-app-rewired 并且这个插件给了我一个添加一些配置的方法但我知道如何添加我的配置我尝试了一种简单的方法,但是当我尝试朗姆酒npm start时出现错误。
但我在控制台中遇到这样的错误:
service-worker - workbox v5 - 如何版本服务工作者?
在 v4 中,我们可以使用precacheManifestFilename
workbox webpack 插件在我们的清单名称中放置一个版本,该版本被导入到 SW 中,从而对其进行版本化。既然清单已内联并删除了该选项,那么版本 SW 的新方法是什么?我可以想到一些可以在缩小后幸存下来的方法,但它们看起来很老套。我们应该对缓存名称进行版本控制吗?
workbox - 如何缓存 webpack 的资产并排除 index.html?
我想优化我的 SPA 以缓存所有 webpack 的资产,以便它们在下次重新加载时加载得更快。
我不需要离线功能,我希望用户在重新加载页面后始终能够获得新版本,没有“新内容可用;请刷新”。信息。
据我了解,Webpack 在每个文件的名称中都包含哈希,因此文件名从一个版本到另一个版本是“唯一的”。所以我的策略是缓存除index.html
. 因此,当用户点击重新加载时,他总是index.html
从服务器获取,然后服务工作人员为已加载的文件提供缓存。
简而言之,我希望复制一个简单的缓存,如标头 Cache-Control。
我应该使用workbox-webpack-plugin
andGenerateSW(config)
方法吗?如何将其配置为仅从index.html
缓存中排除并包含其他所有内容?
workbox - 如何将更多文件添加到 precach 清单列表?
我的应用程序是使用创建的create-react-app
,我正在使用react-app-rewired
将其更改navigationFallback: "index.html"
为navigationFallback: "offline.html"
.
我使用 将copy-web-plugin
文件复制offline.html
到 dist 文件夹中。但是,在文件中找不到这个precach-manifest
文件。
谢谢
reactjs - 如何在使用反应应用程序中的工作箱安装服务工作者时预缓存散列文件(/build/static)
我创建了一个反应应用程序。我需要使该应用程序可供用户离线使用。为此,我使用 Workbox 将其制成 PWA。
我能够预缓存图像,但我还想在安装服务工作者时预缓存 /build/static/js、/build/static/CSS 和整个构建文件夹中的所有散列文件。目前 Workbox 正在缓存服务工作者注册时的所有图像,但其他 js 文件仅在我访问特定页面时才被缓存。这意味着只有用户在他在线时访问的应用程序部分在他离线时才可用。
如何在 Service Worker 安装时缓存所有散列文件和图像。请建议我如何实现这一点。
javascript - 如何在 vuejs 中生成每个版本的新版本?
我正在使用带有 pwa(工作箱)的 vue cli。
每次我构建项目时,vue 都会为我创建文件:precache-manifest.882c44d211b70f8989278935.js
.
里面我有条目:revision
,url
:
如果我不更改文件,它会得到相同的revision
.
revision
我的问题是每次构建项目时如何强制不同?
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)中的所有文件包含在预缓存文件列表中?