Mental model of Polypane's browser contexts

Polypane is a browser that shows your web page in multiple panes simultaneously. Because of that, your site can behave differently compared to when it's shown in a single tab in a regular browser. On this page we will describe the impact this can have on your web pages.

There are two contexts that are important to remember:

• The session is shared across all panes.
• Request headers and emulation settings are unique per pane.

All panes share a session

The shared session means that all panes have access to the same browser storage data like cookies, localStorage and sessionStorage.

This means things like login status and other application state is automatically shared between all panes and you don't have to log into each pane separately.

To inspect this state, you can use the Storage panel.

Each pane requests its own resources and has its own emulation settings

Panes can run with many different emulation settings. This means one pane can pretend to be an iPhone while another can be Firefox on Linux and yet another can be IE6 on Windows (😱).

This information is part of the request headers, and server can (and do) send back different resources depending on these headers. To make sure that each pane behaves as closely as possible to whatever they're emulating, we need to let each pane requests it's own resources so they use these different resources.

All resources can still be cached, but it's good to remember that each pane requests new resources and each counts as a "page load".

Where things can go wrong

A shared session but separate resources and emulation can cause explainable but unexpected behavior when you move from one context (the page itself) to the other (the shared session state).

An example

Suppose your site has a dark/light mode toggle that uses a value in localStorage but if that's missing uses prefers-color-scheme and then stores that data for the next page load.

When the panes load, localStorage will be empty and each pane will get prefers-color-scheme read out and stored in localStorage.

Now suppose we have two panes: one emulating light mode and one emulating dark mode. The light mode pane loads, has nothing in localstorage so reads out prefers-color-scheme and stores "light" in localStorage. At the same time, but slightly slower because of network unpredictabilities, the dark mode pane loads. The light mode pane hasn't stored things in localStorage yet when the dark mode pane checks it, so it too reads out prefers-color-scheme and stores "dark" in localStorage (inadvertedly overwriting the "light" value from the other pane).

Now when you re-load the panes, both will read out "dark" from localStorage and use the dark mode theme, because localStorage is shared between all panes and the site uses that before checking prefers-color-scheme.

Using the mental model

When you keep the difference between the page context and the session context in mind, things that may seems weird at first start to make a lot of sense.

Code that is written under the assumption that your page is only ever shown in a single tab is more quickly "exposed", though the same issues would appear with your site being shown in two tabs in any regular browser.

By using the Storage panel and configuring which interactions to sync you can still check differences between panes even if your site tries to consolidate them in your session.

To learn more about the effects this can have on your website, read our docs on website issues you could encounter.