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:

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.

<script defer src="/path/to/lifecycle.es5.js"></script>
<script defer>
lifecycle.addEventListener('statechange', function(event) {
  console.log(event.oldState, event.newState);
});
</script>

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

Use this version if you only support ES module-capable browsers or if you're using <script type="module"> and the nomodule fallback to conditionally target modern browsers.

<script type="module">
import lifecycle from '/path/to/page-lifecycle.mjs';

lifecycle.addEventListener('statechange', function(event) {
  console.log(event.oldState, event.newState);
});
</script>

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:

Properties

Methods

Events

Browser Support

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