PageLifecycle.js

- Overview
- Installation
- Usage
- API
- Properties
- Methods
- Events
- Browser Support

Overview

PageLifecycle.js is a tiny JavaScript library (<1K gzipped) that allows developers to easily observe Page Lifecycle API state changes and implement Page Lifecycle best practices consistently across all browsers.

▶️ View demo: page-lifecycle.glitch.me 👀

Installation

You can install this library from npm by running:

``sh npm install --save-dev page-lifecycle`

`Usage`

Releases of this library include three minified, production-ready versions:

1. ES5: dist/lifecycle.es5.js (UMD) ⭐

Use this version for maximum compatibility with legacy browsers (that can't run ES2015+ code).

As a UMD bundle, it can be required in CommonJS or AMD environments, or it can be loaded with a script tag as the browser global lifecycle.

`html`

2. ES2015: dist/lifecycle.mjs (ESM) 🔥

Use this version if you only support ES module-capable browsers or if you're using
`

3. ES2015 (native):dist/lifecycle.native.mjs (ESM w/o EventTarget and Event shims) ⚠️

Use this version if you're only targeting browsers that support extending EventTarget and Event constructors.

Note: this version is the smallest but will only work in some browsers. The implementation instructions are the same as the ES2015 version above.

`API`

The PageLifecycle.js library exports a lifecycle object, which is a singleton instance of the Lifecycle class. The Lifecycle` class has the following properties, methods, and events:

$3

Name	Type	Description
`state`	`string`	Returns the current Page Lifecycle state.
`pageWasDiscarded`	`boolean`	Returns the value of `document.wasDiscarded` (or `false` if not present).

$3

Name	Description
`addEventListener`	Parameters: type: `string` listener: `function(Event)` Adds a callback function to be invoked whenever the passed event type is detected. (Note: at the moment only the "statechange" event type is supported.)
`removeEventListener`	Parameters: type: `string` listener: `function(Event)` Removes a function from the current list of listeners for the passed event type. (Note: at the moment only the "statechange" event type is supported.)
`addUnsavedChanges`	Parameters: id: `Object\|Symbol` Adds an item to an internal pending-changes stack. Calling this method adds a generic `beforeunload` listener to the window (if one isn't already added). The argument passed should be unique to this state, as it can only be removed by passing the same argument to `removeUnsavedChanges()`.
`removeUnsavedChanges`	Parameters: id: `Object\|Symbol` Removes an item matching the passed argument from an internal pending-changes stack. If the stack is empty, the generic `beforeunload` listener is removed from the window.

$3

Name Description

Name	Description
`statechange`	Properties: newState: `string` The current lifecycle state the page just transitioned to. oldState: `string` The previous lifecycle state the page just transitioned from. originalEvent: `Event` the DOM event that triggered the state change. The `statechange` event is fired whenever the page's lifecycle state changes.

statechange

Properties:

newState: string The current lifecycle state the page just transitioned to.

oldState: string The previous lifecycle state the page just transitioned from.

originalEvent: Event the DOM event that triggered the state change.

The statechange event is fired whenever the page's lifecycle state changes.

Browser Support

✔

✔

✔

✔

✔

PageLifecycle.js has been tested and known to work in the above browsers.