Auto refresh page at specific time of day or pop up a message to refresh

We have a production web app that I have built using React and NodeJS. It is used in a production setting on Ipads. When the workers complete a pallet, they will click "plus 1" for that order to tally up the pallets for a given order.

The problem is that when they first grab the ipad and start for the day, it will still have old orders showing on the lines from the previous shift until they refresh the page. So if they forget to refresh the page, they will "plus 1" on an order that is no longer open and it causes issues. So I'm trying to come up with a solution for this. My two thoughts are auto-refresh the page right before their shift starts, at a specific time every day. Or at least pop up a message, "you need to refresh the page".

What is a solution to this? What if the ipads are off when the signal is sent to refresh or pop up the message?

I have used websockets for various things in this app. So that is an option as well.

We have a similar need, and there is indeed some business decision involved (you would need server-to-client communication like websocket typically if you do not know in advance when the client needs to reset its state), but if you do know that in advance (in your description: between fixed work shifts), then a very simple solution consists in regularly checking the current time against that time limit, and reset state when past it (refresh, route to home page, display popup message, etc.).

For example in React:

import { useInterval } from "@reactuses/core";

const timeLimit = new Date(); // Computed locally or retrieved from server

function App() {
  useInterval(() => {
    if (new Date() >= timeLimit) {
      // Reset state / refresh / route to home page / etc.
      window.location.reload();
    }
  }, 10 * 60 * 1000); // Check every 10 minutes

  return null;
}

Note: avoid too long delays in browsers, as they are not totally reliable.

You could also check when the page becomes active again, typically with the "visibilitychange" event, or in React e.g. with reactuses useDocumentVisibility hook:

import { useDocumentVisibility } from "@reactuses/core";

const timeLimit = new Date(); // Computed locally or retrieved from server

function App() {
  const visibility = useDocumentVisibility("hidden");

  useEffect(() => {
    if (visibility === "visible" && new Date() >= timeLimit) {
      // Reset state / refresh / route to home page / etc.
      window.location.reload();
    }
  }, [visibility]);

  return null;
}