Skip to content

Commit 807e8ad

Browse files
committed
fixes #5: localize and fix network-idle-callback deps
1 parent 4c03801 commit 807e8ad

2 files changed

Lines changed: 108 additions & 2 deletions

File tree

demos/network-idle.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@
2222
</head>
2323

2424
<body>
25-
<p>This demo uses [network-idle-callback](https://github.com/pastelsky/network-idle-callback) to only prefetch when network activity goes idle in the current tab.</p>
25+
<p>This demo uses <a href="https://github.com/pastelsky/network-idle-callback">network-idle-callback</a> to only prefetch when network activity goes idle in the current tab.</p>
2626
<a href="../test/1.html">Link 1</a>
2727
<a href="../test/2.html">Link 2</a>
2828
<a href="../test/3.html">Link 3</a>
2929
<section id="stuff">
3030
<a href="../test/main.css">CSS</a>
3131
</section>
3232
<a href="../test/4.html" style="position:absolute;margin-top:900px;">Link 4</a>
33-
<script src="https://unpkg.com/network-idle-callback@1.0.1/lib/index.js"></script>
33+
<script src="network-idle.js"></script>
3434
<script type="module">
3535
import quicklink from "../dist/quicklink.mjs";
3636
quicklink({timeoutFn: networkIdleCallback});

demos/network-idle.js

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// This script is a localized version of the upstream
2+
// https://github.com/pastelsky/network-idle-callback
3+
// which fixes isssues with browser importing of the
4+
// above dependency. It is hopefully temporary.
5+
6+
const DOMContentLoad = new Promise(resolve => {
7+
document.addEventListener('DOMContentLoaded', resolve);
8+
});
9+
10+
navigator.serviceWorker.getRegistration()
11+
.then(registration => {
12+
if (!registration) {
13+
console.warn('`networkIdleCallback` was called before a service worker was registered.');
14+
console.warn('`networkIdleCallback` is ineffective without a working service worker');
15+
}
16+
});
17+
18+
/**
19+
* networkIdleCallback works similar to requestIdleCallback,
20+
* detecting and notifying you when network activity goes idle
21+
* in your current tab.
22+
* @param {*} fn - A valid function
23+
* @param {*} options - An options object
24+
*/
25+
function networkIdleCallback(fn, options = {timeout: 0}) {
26+
// Call the function immediately if required features are absent
27+
if (
28+
!'MessageChannel' in window ||
29+
!'serviceWorker' in navigator ||
30+
!navigator.serviceWorker.controller
31+
) {
32+
DOMContentLoad.then(() => fn({didTimeout: false}));
33+
return;
34+
}
35+
36+
const messageChannel = new MessageChannel();
37+
navigator.serviceWorker.controller
38+
.postMessage(
39+
'NETWORK_IDLE_ENQUIRY',
40+
[messageChannel.port2],
41+
);
42+
43+
const timeoutId = setTimeout(() => {
44+
const cbToPop = networkIdleCallback.__callbacks__
45+
.find(cb => cb.id === timeoutId);
46+
47+
networkIdleCallback.__popCallback__(cbToPop, true);
48+
}, options.timeout);
49+
50+
networkIdleCallback.__callbacks__.push({
51+
id: timeoutId,
52+
fn,
53+
timeout: options.timeout,
54+
});
55+
56+
messageChannel.port1.addEventListener('message', handleMessage);
57+
messageChannel.port1.start();
58+
}
59+
60+
/*
61+
function cancelNetworkIdleCallback(callbackId) {
62+
clearTimeout(callbackId);
63+
64+
networkIdleCallback.__callbacks__ = networkIdleCallback.__callbacks__
65+
.find(cb => cb.id === callbackId);
66+
}
67+
*/
68+
69+
networkIdleCallback.__popCallback__ = (callback, didTimeout) => {
70+
DOMContentLoad.then(() => {
71+
const cbToPop = networkIdleCallback.__callbacks__
72+
.find(cb => cb.id === callback.id);
73+
74+
if (cbToPop) {
75+
cbToPop.fn({didTimeout});
76+
clearTimeout(cbToPop.id);
77+
networkIdleCallback.__callbacks__ = networkIdleCallback.__callbacks__.filter(
78+
cb => cb.id !== callback.id);
79+
}
80+
});
81+
};
82+
83+
networkIdleCallback.__callbacks__ = [];
84+
85+
if ('serviceWorker' in navigator) {
86+
navigator.serviceWorker.addEventListener('message', handleMessage);
87+
}
88+
89+
/**
90+
* Handle message passing
91+
* @param {*} event - A valid event
92+
*/
93+
function handleMessage(event) {
94+
if (!event.data) {
95+
return;
96+
}
97+
98+
switch (event.data) {
99+
case 'NETWORK_IDLE_ENQUIRY_RESULT_IDLE':
100+
case 'NETWORK_IDLE_CALLBACK':
101+
networkIdleCallback.__callbacks__.forEach(callback => {
102+
networkIdleCallback.__popCallback__(callback, false);
103+
});
104+
break;
105+
}
106+
}

0 commit comments

Comments
 (0)