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.
You can install this library from npm by running:
npm install --save-dev page-lifecycle
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.
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:
Name | Type | Description |
---|---|---|
state |
string |
Returns the current Page Lifecycle state. |
pageWasDiscarded |
boolean |
Returns the value of document.wasDiscarded (or false if not present).
|
Name | Description |
---|---|
addEventListener |
Parameters:
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:
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:
Adds an item to an internal pending-changes stack. Calling this method adds a generic The argument passed should be unique to this state, as it can only be removed by passing the same argument to |
removeEventListener |
Parameters:
Removes an item matching the passed argument from an internal pending-changes stack. If the stack is empty, the generic |
Name | Description |
---|---|
statechange |
Properties:
The |
![]() โ |
![]() โ |
![]() โ |
![]() โ |
![]() 9+ |
![]() โ |
PageLifecycle.js has been tested and known to work in the above browsers.