blob: eb5156d4f8562ad4971224954be7170d0ef28a38 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
"use strict";
function handleRequest(request, response) {
let qs = new URLSearchParams(request.queryString);
let asset = qs.get("as");
let hinted = qs.get("hinted") === "1";
let httpCode = qs.get("code");
let uuid = qs.get("uuid");
let cached = qs.get("cached") === "1";
let url = `early_hint_asset.sjs?as=${asset}${uuid ? `&uuid=${uuid}` : ""}${
cached ? "&cached=1" : ""
}`;
// write to raw socket
response.seizePower();
let link = "";
if (hinted) {
response.write("HTTP/1.1 103 Early Hint\r\n");
if (asset === "fetch" || asset === "font") {
// fetch and font has to specify the crossorigin attribute
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as
link = `Link: <${url}>; rel=preload; as=${asset}; crossorigin=anonymous\r\n`;
response.write(link);
} else if (asset === "module") {
// module preloads are handled differently
link = `Link: <${url}>; rel=modulepreload\r\n`;
response.write(link);
} else {
link = `Link: <${url}>; rel=preload; as=${asset}\r\n`;
response.write(link);
}
response.write("\r\n");
}
let body = "";
if (asset === "image") {
body = `<!DOCTYPE html>
<html>
<body>
<img src="${url}" width="100px">
</body>
</html>`;
} else if (asset === "style") {
body = `<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${url}">
</head>
<body>
<h1>Test preload css<h1>
<div id="square" style="width:100px;height:100px;">
</body>
</html>
`;
} else if (asset === "script") {
body = `<!DOCTYPE html>
<html>
<head>
<script src="${url}"></script>
</head>
<body>
<h1>Test preload javascript<h1>
<div id="square" style="width:100px;height:100px;">
</body>
</html>
`;
} else if (asset === "module") {
// this code assumes that the .sjs for the module is in the same directory
var file_name = url.split("/");
file_name = file_name[file_name.length - 1];
body = `<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Test preload module<h1>
<div id="square" style="width:100px;height:100px;">
<script type="module">
import { draw } from "./${file_name}";
draw();
</script>
</body>
</html>
`;
} else if (asset === "fetch") {
body = `<!DOCTYPE html>
<html>
<body onload="onLoad()">
<script>
function onLoad() {
fetch("${url}")
.then(r => r.text())
.then(r => document.getElementsByTagName("h2")[0].textContent = r);
}
</script>
<h1>Test preload fetch</h1>
<h2>Fetching...</h2>
</body>
</html>
`;
} else if (asset === "font") {
body = `<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "preloadFont";
src: url("${url}");
}
body {
font-family: "preloadFont";
}
</style>
</head>
<body>
<h1>Test preload font<h1>
</body>
</html>
`;
}
if (!httpCode) {
response.write(`HTTP/1.1 200 OK\r\n`);
} else {
response.write(`HTTP/1.1 ${httpCode} Error\r\n`);
}
response.write(link);
response.write("Content-Type: text/html;charset=utf-8\r\n");
response.write("Cache-Control: no-cache\r\n");
response.write(`Content-Length: ${body.length}\r\n`);
response.write("\r\n");
response.write(body);
response.finish();
}
|
