Source code
Revision control
Copy as Markdown
Other Tools
const STORE_URL = '/speculation-rules/prerender/resources/key-value-store.py';
// Starts prerendering for `url`.
//
// `rule_extras` provides additional parameters for the speculation rule used
// to trigger prerendering.
function startPrerendering(url, rule_extras = {}) {
// Adds <script type="speculationrules"> and specifies a prerender candidate
// for the given URL.
// start prerendering for some reason (e.g., resource limit). Implement a
// WebDriver API to force prerendering.
const script = document.createElement('script');
script.type = 'speculationrules';
script.text = JSON.stringify(
{prerender: [{source: 'list', urls: [url], ...rule_extras}]});
document.head.appendChild(script);
return script;
}
class PrerenderChannel extends EventTarget {
#ids = new Set();
#url;
#active = true;
constructor(name, uid = new URLSearchParams(location.search).get('uid')) {
super();
this.#url = `/speculation-rules/prerender/resources/deprecated-broadcast-channel.py?name=${name}&uid=${uid}`;
(async() => {
while (this.#active) {
// Add the "keepalive" option to avoid fetch() results in unhandled
// rejection with fetch abortion due to window.close().
// TODO(crbug.com/1356128): After this migration, "keepalive" will not
// be able to extend the lifetime of a Document, such that it cannot be
// used here to guarantee the promise resolution.
const messages = await (await fetch(this.#url, {keepalive: true})).json();
for (const {data, id} of messages) {
if (!this.#ids.has(id))
this.dispatchEvent(new MessageEvent('message', {data}));
this.#ids.add(id);
}
}
})();
}
close() {
this.#active = false;
}
set onmessage(m) {
this.addEventListener('message', m)
}
async postMessage(data) {
const id = new Date().valueOf();
this.#ids.add(id);
// Add the "keepalive" option to prevent messages from being lost due to
// window.close().
await fetch(this.#url, {method: 'POST', body: JSON.stringify({data, id}), keepalive: true});
}
}
// Reads the value specified by `key` from the key-value store on the server.
async function readValueFromServer(key) {
const serverUrl = `${STORE_URL}?key=${key}`;
const response = await fetch(serverUrl);
if (!response.ok)
throw new Error('An error happened in the server');
const value = await response.text();
// The value is not stored in the server.
if (value === "")
return { status: false };
return { status: true, value: value };
}
// Convenience wrapper around the above getter that will wait until a value is
// available on the server.
async function nextValueFromServer(key) {
let retry = 0;
while (true) {
// Fetches the test result from the server.
let success = true;
const { status, value } = await readValueFromServer(key).catch(e => {
if (retry++ >= 5) {
throw new Error('readValueFromServer failed');
}
success = false;
});
if (!success || !status) {
// The test result has not been stored yet. Retry after a while.
await new Promise(resolve => setTimeout(resolve, 100));
continue;
}
return value;
}
}
// Writes `value` for `key` in the key-value store on the server.
async function writeValueToServer(key, value) {
const serverUrl = `${STORE_URL}?key=${key}&value=${value}`;
await fetch(serverUrl);
}
// Loads the initiator page, and navigates to the prerendered page after it
// receives the 'readyToActivate' message.
//
// `rule_extras` provides additional parameters for the speculation rule used
// to trigger prerendering.
function loadInitiatorPage(rule_extras = {}) {
// Used to communicate with the prerendering page.
const prerenderChannel = new PrerenderChannel('prerender-channel');
window.addEventListener('pagehide', () => {
prerenderChannel.close();
});
// We need to wait for the 'readyToActivate' message before navigation
// since the prerendering implementation in Chromium can only activate if the
// response for the prerendering navigation has already been received and the
// prerendering document was created.
const readyToActivate = new Promise((resolve, reject) => {
prerenderChannel.addEventListener('message', e => {
if (e.data != 'readyToActivate')
reject(`The initiator page receives an unsupported message: ${e.data}`);
resolve(e.data);
});
});
const url = new URL(document.URL);
url.searchParams.append('prerendering', '');
// Prerender a page that notifies the initiator page of the page's ready to be
// activated via the 'readyToActivate'.
startPrerendering(url.toString(), rule_extras);
// Navigate to the prerendered page after being informed.
readyToActivate.then(() => {
if (rule_extras['target_hint'] === '_blank') {
window.open(url.toString(), '_blank', 'noopener');
} else {
window.location = url.toString();
}
}).catch(e => {
const testChannel = new PrerenderChannel('test-channel');
testChannel.postMessage(
`Failed to navigate the prerendered page: ${e.toString()}`);
testChannel.close();
window.close();
});
}
// Returns messages received from the given PrerenderChannel
// so that callers do not need to add their own event listeners.
// nextMessage() returns a promise which resolves with the next message.
//
// Usage:
// const channel = new PrerenderChannel('channel-name');
// const messageQueue = new BroadcastMessageQueue(channel);
// const message1 = await messageQueue.nextMessage();
// const message2 = await messageQueue.nextMessage();
// message1 and message2 are the messages received.
class BroadcastMessageQueue {
constructor(c) {
this.messages = [];
this.resolveFunctions = [];
this.channel = c;
this.channel.addEventListener('message', e => {
if (this.resolveFunctions.length > 0) {
const fn = this.resolveFunctions.shift();
fn(e.data);
} else {
this.messages.push(e.data);
}
});
}
// Returns a promise that resolves with the next message from this queue.
nextMessage() {
return new Promise(resolve => {
if (this.messages.length > 0)
resolve(this.messages.shift())
else
this.resolveFunctions.push(resolve);
});
}
}
// Returns <iframe> element upon load.
function createFrame(url) {
return new Promise(resolve => {
const frame = document.createElement('iframe');
frame.src = url;
frame.onload = () => resolve(frame);
document.body.appendChild(frame);
});
}
/**
* Creates a prerendered page.
* @param {Object} params - Additional query params for navigations.
* @param {URLSearchParams} [params.initiator] - For the page that triggers
* prerendering.
* @param {URLSearchParams} [params.prerendering] - For prerendering navigation.
* @param {URLSearchParams} [params.activating] - For activating navigation.
* @param {Object} opt - Controls creation of prerendered pages.
* @param {boolean} [opt.prefetch] - When this is true, prefetch is also
* triggered before prerendering.
* @param {Object} rule_extras - Additional params for the speculation rule used
* to trigger prerendering.
*/
async function create_prerendered_page(t, params = {}, opt = {}, rule_extras = {}) {
const baseUrl = '/speculation-rules/prerender/resources/exec.py';
const init_uuid = token();
const prerender_uuid = token();
const discard_uuid = token();
const init_remote = new RemoteContext(init_uuid);
const prerender_remote = new RemoteContext(prerender_uuid);
const discard_remote = new RemoteContext(discard_uuid);
const init_params = new URLSearchParams();
init_params.set('uuid', init_uuid);
if ('initiator' in params) {
for (const [key, value] of params.initiator.entries()) {
init_params.set(key, value);
}
}
window.open(`${baseUrl}?${init_params.toString()}&init`, '_blank', 'noopener');
// Construct a URL for prerendering.
const prerendering_params = new URLSearchParams();
prerendering_params.set('uuid', prerender_uuid);
prerendering_params.set('discard_uuid', discard_uuid);
if ('prerendering' in params) {
for (const [key, value] of params.prerendering.entries()) {
prerendering_params.set(key, value);
}
}
const prerendering_url = `${baseUrl}?${prerendering_params.toString()}`;
// Construct a URL for activation. If `params.activating` is provided, the
// URL is constructed with the params. Otherwise, the URL is the same as
// `prerendering_url`.
const activating_url = (() => {
if ('activating' in params) {
const activating_params = new URLSearchParams();
activating_params.set('uuid', prerender_uuid);
activating_params.set('discard_uuid', discard_uuid);
for (const [key, value] of params.activating.entries()) {
activating_params.set(key, value);
}
return `${baseUrl}?${activating_params.toString()}`;
} else {
return prerendering_url;
}
})();
if (opt.prefetch) {
await init_remote.execute_script((prerendering_url, rule_extras) => {
const a = document.createElement('a');
a.href = prerendering_url;
a.innerText = 'Activate (prefetch)';
document.body.appendChild(a);
const rules = document.createElement('script');
rules.type = "speculationrules";
rules.text = JSON.stringify(
{prefetch: [{source: 'list', urls: [prerendering_url], ...rule_extras}]});
document.head.appendChild(rules);
}, [prerendering_url, rule_extras]);
// Wait for the completion of the prefetch.
await new Promise(resolve => t.step_timeout(resolve, 3000));
}
await init_remote.execute_script((prerendering_url, rule_extras) => {
const a = document.createElement('a');
a.href = prerendering_url;
a.innerText = 'Activate';
document.body.appendChild(a);
const rules = document.createElement('script');
rules.type = "speculationrules";
rules.text = JSON.stringify({prerender: [{source: 'list', urls: [prerendering_url], ...rule_extras}]});
document.head.appendChild(rules);
}, [prerendering_url, rule_extras]);
await Promise.any([
prerender_remote.execute_script(() => {
window.import_script_to_prerendered_page = src => {
const script = document.createElement('script');
script.src = src;
document.head.appendChild(script);
return new Promise(resolve => script.addEventListener('load', resolve));
}
}), new Promise(r => t.step_timeout(r, 3000))
]);
t.add_cleanup(() => {
init_remote.execute_script(() => window.close());
discard_remote.execute_script(() => window.close());
prerender_remote.execute_script(() => window.close());
});
async function tryToActivate() {
const prerendering = prerender_remote.execute_script(() => new Promise(resolve => {
if (!document.prerendering)
resolve('activated');
else document.addEventListener('prerenderingchange', () => resolve('activated'));
}));
const discarded = discard_remote.execute_script(() => Promise.resolve('discarded'));
init_remote.execute_script((activating_url, target_hint) => {
if (target_hint === '_blank') {
window.open(activating_url, '_blank', 'noopener');
} else {
window.location = activating_url;
}
}, [activating_url, rule_extras['target_hint']]);
return Promise.any([prerendering, discarded]);
}
async function activate() {
const prerendering = await tryToActivate();
if (prerendering !== 'activated')
throw new Error('Should not be prerendering at this point')
}
// Get the number of network requests for exec.py. This doesn't care about
// differences in search params.
async function getNetworkRequestCount() {
return await (await fetch(prerendering_url + '&get-fetch-count')).text();
}
return {
exec: (fn, args) => prerender_remote.execute_script(fn, args),
activate,
tryToActivate,
getNetworkRequestCount,
prerenderingURL: (new URL(prerendering_url, document.baseURI)).href,
activatingURL: (new URL(activating_url, document.baseURI)).href
};
}
function test_prerender_restricted(fn, expected, label) {
promise_test(async t => {
const {exec} = await create_prerendered_page(t);
let result = null;
try {
await exec(fn);
result = "OK";
} catch (e) {
result = e.name;
}
assert_equals(result, expected);
}, label);
}
function test_prerender_defer(fn, label) {
promise_test(async t => {
const {exec, activate} = await create_prerendered_page(t);
let activated = false;
const deferred = exec(fn);
const post = new Promise(resolve =>
deferred.then(result => {
assert_true(activated, "Deferred operation should occur only after activation");
resolve(result);
}));
await activate();
activated = true;
await post;
}, label);
}
/**
* Starts prerendering a page from the given referrer `RemoteContextWrapper`,
* using `<script type="speculationrules">`.
*
* See
* /html/browsers/browsing-the-web/remote-context-helper/resources/remote-context-helper.js
* for more details on the `RemoteContextWrapper` framework, and supported fields for extraConfig.
*
* The returned `RemoteContextWrapper` for the prerendered remote
* context will have an extra `url` property, which is used by
* @see activatePrerenderRC. (Most `RemoteContextWrapper` uses should not care
* about the URL, but prerendering is unique in that you need to navigate to
* a prerendered page after creating it.)
*
* @param {RemoteContextWrapper} referrerRemoteContext
* @param {RemoteContextConfig|object} extraConfig
* @returns {Promise<RemoteContextWrapper>}
*/
function addPrerenderRC(referrerRemoteContext, extraConfig) {
return referrerRemoteContext.helper.createContext({
executorCreator(url) {
return referrerRemoteContext.executeScript(url => {
const script = document.createElement("script");
script.type = "speculationrules";
script.textContent = JSON.stringify({
prerender: [
{
source: "list",
urls: [url]
}
]
});
document.head.append(script);
}, [url]);
}, extraConfig
});
}
/**
* Activates a prerendered RemoteContextWrapper `prerenderedRC` by navigating
* the referrer RemoteContextWrapper `referrerRC` to it. If the navigation does
* not result in a prerender activation, the returned
* promise will be rejected with a testharness.js AssertionError.
*
* See
* /html/browsers/browsing-the-web/remote-context-helper/resources/remote-context-helper.js
* for more on the RemoteContext helper framework.
*
* @param {RemoteContextWrapper} referrerRC - The referrer
* `RemoteContextWrapper` in which the prerendering was triggered,
* probably via `addPrerenderRC()`.
* @param {RemoteContextWrapper} prerenderedRC - The `RemoteContextWrapper`
* pointing to the prerendered content. This is monitored to ensure the
* navigation results in a prerendering activation.
* @param {(string) => Promise<undefined>} [navigateFn] - An optional function
* to customize the navigation. It will be passed the URL of the prerendered
* content, and will run as a script in `referrerRC` (see
* `RemoteContextWrapper.prototype.executeScript`). If not given, navigation
* will be done via the `location.href` setter (see
* `RemoteContextWrapper.prototype.navigateTo`).
* @returns {Promise<undefined>}
*/
async function activatePrerenderRC(referrerRC, prerenderedRC, navigateFn) {
// Store a promise that will fulfill when the prerenderingchange event fires.
await prerenderedRC.executeScript(() => {
window.activatedPromise = new Promise(resolve => {
document.addEventListener("prerenderingchange", () => resolve("activated"));
});
});
if (navigateFn === undefined) {
referrerRC.navigateTo(prerenderedRC.url);
} else {
referrerRC.navigate(navigateFn, [prerenderedRC.url]);
}
// Wait until that event fires. If the activation fails and a normal
// navigation happens instead, then prerenderedRC will start pointing to that
// other page, where window.activatedPromise is undefined. In that case this
// assert will fail since undefined !== "activated".
assert_equals(
await prerenderedRC.executeScript(() => window.activatedPromise),
"activated",
"The prerendered page must be activated; instead a normal navigation happened."
);
}
async function getActivationStart(prerenderedRC) {
return await prerenderedRC.executeScript(() => {
const entry = performance.getEntriesByType("navigation")[0];
return entry.activationStart;
});;
}
// Used by the opened window, to tell the main test runner to terminate a
// failed test.
function failTest(reason, uid) {
const bc = new PrerenderChannel('test-channel', uid);
bc.postMessage({result: 'FAILED', reason});
bc.close();
}
// Retrieves a target hint from URLSearchParams of the current window and
// returns it. Throw an Error if it doesn't have the valid target hint param.
function getTargetHint() {
const params = new URLSearchParams(window.location.search);
const target_hint = params.get('target_hint');
if (target_hint === null)
throw new Error('window.location does not have a target hint param');
if (target_hint !== '_self' && target_hint !== '_blank')
throw new Error('window.location does not have a valid target hint param');
return target_hint;
}