如何在布局渲染之前检查Gatsby网站是否已作为PWA启动？

问题描述

在gatsby-browser和gatsby-ssr中，我通过wrapRootElement连接了一个全局上下文提供程序，该提供程序提供了该站点是否已作为PWA启动的状态。

在我的Layout组件中使用此状态，有条件地在屏幕底部为PWA渲染应用程序选项卡栏，否则在屏幕顶部呈现导航栏。我正在wrapPageElement中使用gatsby-browser将Layout装载到所有页面。

//interfaceContext.js

export const InterfaceContext = React.createContext()

const Provider = ({ children }) => {
  const [appInterface,setAppInterface] = useState(true)

  useEffect(() => {
      if (
        !(
          navigator.standalone ||
          window.matchMedia("(display-mode: standalone)").matches
        )
      ) {
        setAppInterface(false)
      }
  },[])

export default ({ element }) => <Provider>{element}</Provider>

//gatsby-ssr.js & gatsby-browser.js

export const wrapRootElement = Provider

export const wrapPageElement = ({ element }) => <Layout>{element}</Layout>

//layout.js

const Layout = ({ children }) => {
  const context = useContext(InterfaceContext)
  return (
    <>
      {context.appInterface ? <AppBar /> : <DesktopNav />}
      ...

目前这可行，但我认为在构建服务器端渲染时以及在初始加载或重新加载时，将使用默认状态，在我的上下文提供程序更新它之前，我的网站会闪烁默认导航位置。如何在布局呈现到屏幕之前更新此状态以防止闪烁？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）