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更改中的文本,我的手表上就会显示更改.作品.

这些元素都包含类似的内容,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上运行应用程序时,它总是得到正确的索引,但是当我跑该应用程序通过在手表上启动它,出现上述问题.

经过几天的数据结构混乱(仍然认为错误在我身边)它终于打动了我:当应用程序在后台启动时,页面上的z-index本身没有得到更新.我通过在我的手表上启动应用程序并像往常一样得到错误的z-index来检查这一点但是我保持Watch应用程序打开并在iPhone上启动应用程序 - 我看到WKWebView根据他们的z更新元素的顺序-index然后我突然得到了每个元素的正确z-index,即使在按下主页按钮之后也是如此.这解释了很多,但仍然无法帮助我解决问题.

我如何欺骗WKWebView让JS在后台运行时更新所有元素z-index？我觉得奇怪的是,在短时间内打开iPhone应用程序后不会出现此问题,但我不能要求我的用户每次想要访问Watch应用程序时打开并"最小化"应用程序Watch应用程序的目的是将手机放在口袋里.

通过sendMessage调用viewDidLoad 激活iPhone应用程序,因此我可以指出在手动启动应用程序和通过Watch执行此操作之间的真正区别.Javascript本身也可以在后台运行,那么除了z-index属性之外,为什么一切都会更新？防止运行背景的"图形"更新在保持电池寿命方面是可以理解的,但也不是文本"图形"吗？如果它是手动启动的话,为什么家用按钮应用会有所不同呢？

删除因为下面只发生一次,很奇怪.

编辑:好的,所以实际上索引值会发生变化,但每当一篇文章被推到顶部时,它会转到与任何文章的最高值相同的值而不更新其他文章的值.例:

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存在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 相同的缓存问题。希望这会有所帮助，但是如果不进行更深入的研究，就很难确定问题出在哪里。