问题标签 [sw-precache]

我有一个简单的 Angular 应用程序，我正在尝试在 Service Worker 的帮助下使其具有离线功能。我已按照本教程了解如何设置服务人员：

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

当我在自己的开发机器上运行 SW 和应用程序本身时，它运行良好，但我想将其部署在 Github 项目页面上：https ://zyxon.github.io/AngTodo/

上传dist文件夹的内容后（与我在开发服务器上所做的一样），服务工作者由于在assets文件夹的内容上获得 404 而无法注册。它在/assets/....

我最好的猜测是它可以在我的开发服务器上运行，因为该应用程序托管在 Web 服务器 ROOT 中，但对于 Github 页面，它托管在 .../AngTodo 目录中。

所以我的问题如下：如何指定 sw-precache 以输出带有附加前缀（/AngTodo/assets/...在我的情况下）的这个 SW？

我sw-precache-config.js的如下：

我从 Create-React-App 库创建了一个示例应用程序。cache-first当我运行 build 命令时，它会使用策略自行生成一个 service-worker 。但是我需要更多的功能，比如缓存一些 API 响应。我不知道如何修改在自动生成的 service-worker 中包含我自己的代码的脚本。我为我的案例找到了一些帮助热线，但这些还不足以全面了解它。

默认情况下，生成的 service worker 文件不会拦截或缓存任何跨域流量，例如 HTTP API 请求、图像或从不同域加载的嵌入。如果您想对这些请求使用运行时缓存策略，您可以弹出，然后在 webpack.config.prod.js 的 SWPrecacheWebpackPlugin 部分中配置 runtimeCaching 选项。

以上段落来自官方文档

提前致谢！

我正在使用 sw-precache 并且我知道为了编辑 service-worker.js 文件，我需要这样做（如 service-worker.js 文件中所述）

// 此文件应作为构建过程的一部分被覆盖。// 如果您需要扩展生成的 service worker 的行为，最好的方法是编写 // 附加代码并使用 importScripts 选项包含它： // https://github.com/GoogleChrome/sw-precache#importscripts -数组字符串

但我不知道在哪里添加 importscripts() 代码。它是否在 service-worker.js 文件中？当然，这在每个项目构建中都会被覆盖。

我正在使用sw-precacheviacreate-react-app启用我的应用程序以供离线使用。我有一个通过 加载的视频webpack，但我注意到它不包含在生成serviceWorker的precacheConfig数组中。

如何强制webpack/sw-precache将（散列）视频包含在要预取的 URL 列表中？

workboxSW.precache默认是cacheFirst，有没有办法改变它的策略？

或者有没有办法在预缓存项上定义缓存名称，因此可以通过指定路由来覆盖预缓存项？

描述：

我们正在使用 sw precache 预先缓存脚本，因此要更新我们提供重新加载选项的脚本，因为我们正在监听 worker 消息以跳过等待新安装的 service worker 的未知原因，我们没有得到正确

导入脚本

软件注册

网络包配置

我曾经sw-toolbox用于管理我的服务人员 - 小、简单、有效。现在谷歌已经发布Workbox SW（它取代了 sw-toolbox 和 sw-precache）我需要迁移，但我正在努力寻找：

a) Workbox 的单个 .js 依赖项，我可以将其包含在我的项目中
b) 用于构建单个 .js 依赖项的自定义构建工具
c) 在我的项目构建中包含 Workbox 构建的方法

我会以错误的方式解决这个问题吗？

我正在使用 sw precache 来管理我的服务人员。假设我的网站是 abc.com 并且服务工作者正在这个网站上运行并通过 url abc.com/service-worker.js 加载

所有的 css 和 js 都是从不同的 url 加载的，以进行优化让我们说 xyz.com

现在在我提供时在运行时缓存中

这仅从 url abc.com/style/style.css 缓存 css 而不是 xyz.com/style/test.css

我努力了

但一切都是徒劳的。如果有人遇到过同样的问题，我们将不胜感激任何正确方向的帮助。

我想使用sw-precache生成“service-worker.js”

从命令行（cmd.exe）我运行这个命令，输出是：

35 个资源的总预缓存大小约为 145 kB。service-worker.js 已使用 service worker 内容生成。

当我从 C# output is empty运行此命令时，这是我的代码：

如果我在 Arguments = @"/c dir" 中运行类似 "dir" 的命令，输出包含来自 dir 命令的消息，

我做错了什么？

编辑：在控制台应用程序中，输出正常返回，但在 Web 应用程序中不返回

在我将使用构建的 PWA（测试应用程序）保存到主屏幕并在android上使用 chrome 和iOS使用 safari以模式Create React App启动应用程序之后。然后在应用程序中，我启动 Firebase 方法，设备会询问我是否要使用或安装在设备上的其他浏览器打开操作，即. 如果我选择打开弹出窗口并选择正确的 Google 帐户。standalonesignInWithPopup(GoogleProvider)Test AppchromefirefoxTest App

错误：在 google 帐户选择后，弹出窗口关闭，而没有重定向回我的Test App.

如果我改为signInWithPopup(GoogleProvider)使用chrome浏览器打开 Firebase 方法而不是我的弹出窗口以选择 google 帐户，并且在我选择 google 帐户后弹出窗口关闭并立即Test App重定向回Test App

错误： 返回到chrome选项卡，在显示加载指示器时要求选择谷歌帐户，然后就挂在那里。

没有出现控制台错误或警告。

注意1：如果我将应用程序添加到使用并作为独立窗口启动的Windows 10 x64机器上的主屏幕上，也会出现弹出窗口未关闭并停留在加载中的错误。Version 64.0.3259.0 (Official Build) canary (64-bit)

注意 2：如果我从主屏幕卸载应用程序并纯粹在浏览器中启动，则该错误也会发生，signInWithPopup(Facebookprovider)并且OAuth 流程的签名工作正常。signInWithPopup(Twitterprovider)

注意 3：经过进一步的故障排除后，当 OAuth 弹出窗口中需要用户输入时，似乎更具体地发生了错误。即，例如，如果用户之前已Test App通过 Facebook 授予权限，则流程工作正常并且弹出窗口关闭。此外，如果仅检测到一个google帐户并且之前已授予应用 OAuth 权限，则弹出窗口将正常工作。但是如果设备上存在多个 google 帐户，则用户必须输入选择通过哪个帐户登录 -->这会再次导致前面提到的错误。并且使用 Twitter OAuth 每次都会发生错误，因为 twitter 弹出窗口要求用户Authorize App每次都选择。

更新：我相信这可能与 google chrome 最近从 Webview 对 OAuth 的更改有关。

Windows 机器上的错误GIf：注意 twitter auth 的弹出窗口永远不会关闭，即使在授权应用程序之后，google 和 facebook OAuth 也会发生同样的事情。