googlechromelabs / page-lifecycle Goto Github PK

Unrelated to this library, @wardpeet (via Twitter) reported that their team researched page lifecycle events and found them to be unreliable on older Android browser.

We should test to ensure this is not the case (or at least doesn't affect this library) and add android browser to the test suite.

addUnsavedChanges() was intended to avoid saving the same id multiple times (the comment says "Don't add duplicate state"), but it still does. This means that multiple calls to addUnsavedChanges() with a given id followed by one call to removeUnsavedChanges() with that same id will leave other copies of the id in the array, and the beforeunload listener will still be active.

The issue is that the condition here is always true.

Instead of !indexOf(id) > -1 it should be !(indexOf(id) > -1), I believe.

Description

I had some trouble using this library with preactjs/wmr, specifically when I tried to prerender the project.

At first, I didn't understand what went wrong as I had a check for typeof(document) in place before trying to do anything with the imported lifecycle library.

Then I had a look at the source code and realized page-lifecycle's export is a new Lifecycle() instance. In other words, just importing the library causes it execute code and hit a document.visibilityState statement, causing the error in environments that don't have a document object - like preactjs/wmr's prerender step.

Reproduce:

In a preactjs/wmr project, create a component and statically import the page-lifecycle library, then try to build with wmr --prerender

(Disclaimer: untested/pseudo code)

import lifecycle from 'page-lifecycle';

export default function Component() {
  if ( typeof(document) !== 'undefined) ) console.log( lifecycle.state );
  return <div />;
}

npx wmr build --prerender

Throws an error (sorry for the minified code):

ReferenceError: document is not defined
> 1 | …(((e,n,t)=>(e[n]=t,e)),{}))),yn=()=>document.visibilityState===un?un:docu…

Workaround:

Import src/Lifecycle.mjs directly and instantiate the exported class manually:

import Lifecycle from 'page-lifecycle/src/Lifecycle.mjs';

export default function Component() {
  if ( typeof(document) !== 'undefined) ) {
    const lifecycle = new Lifecycle();
    console.log( lifecycle.state );
  }
  return <div />;
}

npx wmr build --prerender

On desktop Safari, when closing a tab by clicking the (X) on the tab UI itself, no visibilitychange or pagehide event is dispatched, so the page becomes terminated but the reported state never transitions away from active.

• https://bugs.webkit.org/show_bug.cgi?id=151234
• https://bugs.webkit.org/show_bug.cgi?id=151610

In order to at least provide a guarantee of hidden, we should listen for the beforeunload event and report a change to hidden if no event handlers set a returnValue or call preventDefault().

The following code achieves this:

addEventListener('beforeunload', (evt) => {
  setTimeout(() => {
    if (!(evt.defaultPrevented || evt.returnValue)) {
      // The state is now going to either FROZEN or TERMINATED.
    }
  }, 0);
});

But since adding an unconditional beforeunloaded handler will break the page navigation cache in Firefox, we should only add this logic in Safari.

The convention for package.json fields is

• main: code with CommonJS exports which is otherwise compatible with target platforms
• module: code with ES6/harmony exports which is otherwise compatible with target platforms

This package breaks that convention by making the module field point directly to source code which is not compatible with the target platforms. Specifically, even though the readme sais that this package supports IE, in a typical webpack setup (where node_modules is not transpiled with babel), it results in a syntax error on IE (because of e.g. the arrow functions).

So I think either:

• the module field should be removed, or renamed to esnext or some such thing (not sure if there is an accepted standard for code that should be transpiled by the user)
• the module field should point not to the original source but to a built version of it which contains ES6/harmony exports, but is otherwise fully transpiled such that it works on all supported browsers.

Hello,

Thank you very much for the library. It's great.

Would it be possible for you to add typescript definitions for the library?

Have a great week.

I am trying to display the "Are you sure you want to leave" prompt using the beforeunload event. However, it does not work in iOS, neither in Safari nor in Chrome. I am using the addUnsavedChanges method. Am I missing something?

I write a demo. codesandbox

question:

When I focus in parent page, and then focus out parent page. The console will log the statechange event.

But When I focus in iframe page's input, and then focus out input. There is no statechage event.

The README doesn't mention what values we can expect for the oldState and newState arguments from the statechange event. I can check the code and/or experiment with the demo to find out but it would be nice if this was documented.