javascript - iOS WKWebView JS 在后台应用时不更新属性修改

Question

嘿，我有一个带有 Watch Extension 的 iOS 应用程序。当启动 Apple Watch 应用程序时，它会启动 iPhone 应用程序并通过每隔几秒发送一次 sendMessage 调用来保持它的事件。 iPhone 应用程序然后导航到 WKWebView 中的网站，每隔几秒检查一次其内容，然后将一些数据发送到 Apple Watch 以便在那里显示。

在 Apple Watch 上显示不断更新的内容非常好，我在 iPhone 上这样获取数据:

self.webView.evaluateJavaScript("document.documentElement.outerHTML.toString()",
                                   completionHandler: { (html: Any?, error: Error?) 

. . . //splitting html content into TFHppleElements

self.contentArray.add((element.search(withXPathQuery: "//div[contains(@class, 'article-title')]")[0] as AnyObject).content)

我每 5 秒运行一次。一旦 article-title 中的文本发生变化，这些变化就会在我的 watch 上可见。有效。

所有元素都包含类似 style="z-index: 206; height: ... 的内容，我通过获取属性然后将其子字符串化成功地解析了它。

let styleContainer = element.attributes["style"] as! String
var firstHalf = styleContainer.components(separatedBy: "; height:")
...

我使用 z-index 值对 Apple Watch 上的表格行进行排序，但在 1-3 次更新后，所有元素的 z-index 停止更新。内容(如文章标题)仍在更新，因此数据流肯定有效，但我想知道为什么 z-index 保持不变。起初我认为这是我的排序或传输到 Apple Watch 的过程中的问题，但我无法确定这个问题 - 当我在 iPhone 上运行该应用程序时，它总是有正确的索引，但当我运行通过在 watch 上启动应用程序，出现了上述问题。

在数天搞乱数据结构(仍然认为错误在我这边)之后，我终于明白了:当应用程序在后台启动时，页面本身的 z-index 没有得到更新。我通过在我的 Watch 上启动应用程序并像往常一样得到错误的 z-index' 来检查这一点，但随后我保持 Watch 应用程序打开并在 iPhone 上启动应用程序 - 我看到 WKWebView 根据更新元素的顺序到他们的 z-index ，突然我得到了每个元素的正确 z-index ，即使在按下主页按钮之后。这解释了很多，但仍然不能真正帮助我解决问题。

如何在后台运行时欺骗WKWebView让JS更新所有元素的z-index？奇怪的是打开iPhone后没有出现这个问题应用程序的一小段时间，但我不能要求我的用户每次想要访问 Watch 应用程序时都打开并“最小化”该应用程序，因为 Watch 应用程序的目的是将手机放在口袋里。

通过 sendMessage 激活 iPhone 应用程序也会调用 viewDidLoad，因此我可以指出在手机上手动启动应用程序与通过 Watch 启动应用程序之间没有真正的区别。 Javascript 本身也在后台工作，那么为什么除了 z-index 属性之外的所有内容都会更新？防止“图形”更新运行背景在保持电池生命周期方面是可以理解的，但文本不也是“图形”吗？如果手动启动 home 键 应用程序，为什么会有所不同？

已删除，因为下面只发生了一次，很奇怪。

编辑:好吧，实际上索引值发生了变化，但是每当一篇文章被推到顶部时，它就会达到与任何文章所具有的最高值相同的值，而不会更新其他文章的值。示例:

Before:
A1: 26
A2: 27
A3: 28
A4: 29
After pushing A1 to the top in the background:
A2: 27
A3: 28
A4: 29
A1: 29
After manually opening the app on the phone:
A2: 26
A3: 27
A4: 28
A1: 29

WebKit 好像有issues with the z-index所以让我们看看旅程会将我引向何方

Answer 1

您好，我不确定我对这个问题有明确的答案，但我确实有一些事情可以帮助您解决问题。

首先，您需要在 WKWebView 中查看 HTML/CSS，为此您可以打开 Safari 并在顶部栏中单击“开发”，第三项应该是您的计算机名称将打开可见 WebView 实例的列表。您可以单击当前正在运行的那个(当您将鼠标悬停在该选项上时，您应该会看到屏幕突出显示)。打开它，然后您可以查看源代码、样式并使用控制台。

从这里尝试确定 Z-Index 是否真的在 WebView 中更新。如果它们不像我怀疑的那样，这会让我相信这是一个缓存问题。根据我的经验，使 WKWebView 比传统 UIWebView 性能更高的一件事是它具有适当的缓存机制。它会尝试缓存所有可能的 CSS，因此您可能想尝试在加载之间清除缓存。

let dataTypes = NSSet(array: [WKWebsiteDataTypeDiskCache, WKWebsiteDataTypeMemoryCache, WKWebsiteDataTypeLocalStorage])
let epoch = NSDate(timeIntervalSince1970: 0)
WKWebsiteDataStore.default().removeData(ofTypes:dataTypes as! Set<String>, modifiedSince:epoch as Date, completionHandler:{})

请注意，WKWebViews 的所有实例都共享相同的数据存储，因此您实际上并没有清除 WebView 实例上的数据，而是清除了 WKWebSiteDataStore 上的数据。

我也会使用 javascript 重新加载页面:

webView.evaluateJavaScript("location.reload();", completionHandler: nil)

如果这些解决方案没有帮助，我会尝试重新组织列表，而不是使用名称或 ID 标签的 ZIndex，这些可能没有与 CSS 相同的缓存问题。希望这会有所帮助，但如果不深入研究，就很难确定问题出在哪里。