Does not work with SSR

I get a “ReferenceError: window is not defined” when I try to import PWAPrompt from 'react-ios-pwa-prompt';

I believe this an issue with SSR in next.js. Is it possible to execute deviceCheck() after the component has been mounted?

Thanks.

[chrisdancee]

Hi @shih-js,

Apologies for leaving this so long, managed to grab some time this weekend. This probably isn’t of any use to you anymore tbh, but in the latest version I’ve changed the Webpack target to Node. This doesn’t allow SSR per se, but will allow dynamic importing within NextJS to load the component on the client only.

Based on the repo you posted, I did the following:

import React from "react";
import dynamic from "next/dynamic";

const PWAPrompt = dynamic(() => import("react-ios-pwa-prompt"), {
  ssr: false
});

class HomePage extends React.Component {
  render() {
    return (
      <>
        <span>Hello from Canada</span>
        <PWAPrompt timesToShow={50} permanentlyHideOnDismiss={false} />
      </>
    );
  }
}

export default HomePage;

[kellenmace]

For anyone coming across this thread, I ended up using React.lazy in my Gatsby app to lazily load this library on the client-side only, so it wouldn’t affect SSR. Example:

import React, { Suspense } from "react"

const PWAPrompt = React.lazy(() => import("react-ios-pwa-prompt"))

function PWAInstallPrompt() {
  return (
    <Suspense fallback={null}>
      <PWAPrompt
        promptOnVisit={1}
        timesToShow={3}
        permanentlyHideOnDismiss={false}
      />
    </Suspense>
  )
}

export default PWAInstallPrompt

Then you can render the <PWAInstallPrompt /> component anywhere in your app.

Note that as of the date of the this comment, the React Suspense API is still ‘experimental’.