当应用程序安装为 PWA 时，在 iOS 17 上的 Safari 中不会触发 window.matchMedia("(prefers-color-scheme: dark)") 添加的事件监听器

问题描述 投票：0回答：1

是我一个人的问题，还是iOS 17上的Safari存在bug，导致window.matchMedia("(prefers-color-scheme: dark)")添加的事件监听器没有被触发？ iOS 16 上的 Safari 中不存在此类问题。仅当 Web 应用程序作为 PWA 安装在主屏幕上时才会出现此问题。在浏览器中，一切正常。

代码：

  useEffect(() => {
    function handleColorSchemeChange(event) {
      // this listener won't trigger when the web app is installed as PWA on the iPhone's home screen
      const newColorScheme = event.matches ? "dark" : "light";
      setCurrentDarkMode(newColorScheme);
    }

    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", handleColorSchemeChange);

    return () => {
      window
        .matchMedia("(prefers-color-scheme: dark)")
        .removeEventListener("change", handleColorSchemeChange);
    };
  }, []);

我尝试在 iPhone 上安装 PWA 应用程序（例如 timezones.digital）并切换系统的暗/亮模式

safari progressive-web-apps
1个回答
0
投票

调查结果

我偶然发现从 PWA 打开另一个窗口并关闭它，将强制重新评估配色方案。

我发现的另一个错误：通过滑动另一个窗口（也会关闭它）向后移动，重新评估配色方案，但将访问页面中的 

<meta name="theme-color" ... >
内容应用到您的 PWA（！）。这有时会让我的应用程序在凹口周围出现蓝色或红色区域。

解决方法

作为解决方法，我现在这样做：

window.open('/colorscheme-fix.html');

其中 

colorscheme-fix.html
立即自行关闭（根据您的意愿装饰它，以防它意外显示或由于某种原因未关闭）：

<html>
  <script>window.close();</script>
</html>

这会导致轻微的闪烁，但实际上几乎察觉不到。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.