问题标签 [vue-pwa]

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

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

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

我目前的配置是：

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

我在一个 vue-cli 创建的项目中。

我的 public/index.html 文件中有一个图标参考，适用于 Android 手机。

但是在应用程序构建之后，输出是：

如何防止 vue-cli 或 vue-pwa-plugin 在我的输出中添加任何“if IE”标签？

对于一个大学项目，我和我的团队使用 Vue.js (Vue-Cli) 开发了一个 Web 应用程序。为了翻译应用程序，我们集成了 vue-i18n。

最近我们将该应用程序升级为使用服务工作者，包括后端触发的推送通知。

我现在想知道如何在服务人员中处理不同的语言。至少在使用 vue-cli-pwa 插件进行服务工作者集成时，无法直接访问其他模块/组件，因此我无法访问翻译模块。

有没有办法做到这一点？或者，在服务人员内部处理推送通知的翻译方法通常是完全错误的？我似乎找不到关于推送通知和 i18n 的任何信息。

谢谢！

我正在使用 workbox 和 vuejs，我想在public/offline.html没有互联网连接时提供页面。

我编辑 pwa 部分以vue.config.js自己处理服务人员：

我在以下代码中添加了支持离线服务页面的代码service-worker.js：

因此，当我访问www.myapp.com/en或www.myapp.com/en/about获得离线页面时。

但问题是当我访问时www.myapp.com- 工作箱是从缓存中提供 index.html 文件。

我可以从缓存中删除 index.html，但是当我在线时，我确实想从缓存中提供索引。

所以我在这里进退两难，怎么办？

我曾经像这样通过 vanilla javascript 编写 pwa

但是当我尝试在 vuejs 应用程序中编写自己的应用程序时，我通过vue add pwa它为我创建了一个名为registerServiceWorker.js我不理解的文件安装了 pwa，因为我不习惯使用它

该文件包含以下内容

我不知道如何在这里编写自己的 pwa 代码或在哪里可以这样做？另外我不知道它是否可以在本地主机上工作，因为据我所知，它可以在生产环境中工作

所以我的问题是，我如何像以前在 vue 应用程序中使用 vanilla js 那样编写 PWA？为了完成我的完整自定义 PWA，我应该执行哪些步骤？

我可以在不使用工作箱的情况下做到这一点吗？

如果有人可以帮助我，我将不胜感激。

提前致谢。

我希望有人能告诉我我是不是找错树了。我已经使用 Vue CLI 构建了一个基本的 Web 应用程序，并包含了 PWA 支持。一切似乎都很好，我得到了安装提示等。

我想要做的是缓存用户以前没有访问过的各种页面（路由），以便他们在离线时可以访问。

这里的原因是我打算为一家航空公司构建一个应用程序，该应用程序的一部分将充当飞行杂志，允许用户阅读各种文章，但是飞机没有wifi，所以用户需要下载登机区的应用程序，我的目标是预先缓存前 10 篇文章，以便他们在飞行期间阅读它们。

这可能吗？PWA 缓存是正​​确的方法吗？以前有人做过这种事情吗？

提前致谢

我正在尝试提高我的灯塔分数，尽管该网站感觉它在空缓存的情况下加载速度非常快，但该分数在 30 时非常差。

我相信这是因为带有 Workbox 的 Vue 应用程序的默认 PWA 设置是预先缓存 src/ 文件夹中的所有内容，因此在首次加载时会在后台下载大量资产：

您会注意到最大的时间段是空闲时间，我相信它正在下载所有服务工作者预缓存文件。我觉得灯塔将这视为对我不利的加载时间，尽管该网站在发生这种情况时仍然可用。

包含所有网站图片是否正常？理想情况下，我想排除除 src/assets/images/cached/ 文件夹内的所有图像之外的所有图像，但是在 Vue 构建期间，这些图像都被放入单个 dist/img 文件夹中，因此我无法根据目录 url 排除.

我有以下 vue.config.js （仅显示相关部分）

我希望排除所有./src/assets/images/*图像，除非它们位于以下目录中：

./src/assets/images/cached/*

这是此正则表达式工作的示例：https ://regex101.com/r/vANn​​rn/1/

但是 webpack/workbox 仍然包含我的所有图像，这些图像可能包含在 precache-manifest 文件中的组件中。

我怀疑该exclude选项适用于内部资产的文件夹结构，/dist而不是/src? 如果是这种情况，这将不起作用，因为 webpack 将所有图像放入一个平面/dist/img文件夹中。

我正在尝试将我的 vue pwa 项目转换为带有电容器的 android 项目。

这是我遵循的步骤。

首先将 pwa 添加到我的 vue 项目并构建它

此时，该应用程序作为 pwa 工作，具有 serviceworker 和离线支持。然后我添加了电容器并转换为android项目

但是当我运行android项目时，出现以下错误

这是 我需要正常工作的控制台日志

编辑：当我点击http://localhost/js/app.15b911b2.js我发现没有找到。但是，如果我将端口添加到链接中- http://localhost:8081/js/app.15b911b2.js我可以获取文件。所以我猜测是否可以让我的项目使用带有端口的链接问题将得到解决。

我将 Vue.js 用于我的一个站点，当我构建站点时，服务工作者的预缓存清单与文件夹importScripts中的两个不同。dist例如，precache-manifest.0933a0358a370c8b40e7cbc458f7c9e0.js并且precache-manifest.0e6f804c2e2176694870b3eab65d85b9.js在dist文件夹中，但服务人员指定precache-manifest.d9356e6d41d3366f8829dce3dcc327a0.js. 我使用 Vue.js CLI 服务作为基础，并且我将 PWA 插件配置为InjectManifest使用我的服务工作者。

然后，此文件名差异会导致以下两个错误：Failed to register/update a ServiceWorker for scope ‘https://example.com’: Bad Content-Type of ‘text/html’ received for script ‘/precache-manifest.d9356e6d41d3366f8829dce3dcc327a0.js’. Must be a JavaScript MIME type.和Error during service worker registration: TypeError: ServiceWorker script at https://example.com/service-worker.js for scope https://example.com threw an exception during script evaluation.

我的文件的相关部分vue.config.js如下：

我的服务人员（在 Workbox 注入之前importScripts）：

我还使用了现代构建命令 ( vue-cli-service build --modern)，它创建了两个版本的 JS 文件，遗留文件和模块文件。

提前致谢！