javascript - 如何在布局呈现之前检查 Gatsby 网站是否已作为 PWA 启动？

Question

我已经附加了一个全局上下文提供程序，通过gatsby-browser它提供了该站点是否已作为 PWA 启动的状态。gatsby-ssrwrapRootElement

此状态在我的Layout组件中用于有条件地在屏幕底部为 PWA 呈现应用程序标签栏，或者在屏幕顶部呈现导航栏。我正在使用wrapPageElementingatsby-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 />}
      ...

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

标签： javascriptreactjsgatsbyprogressive-web-appsserver-side-rendering