tracker

8.0 KB

1. // The framework's SERVICE WORKER (COMPONENTS §10, D38) — the offline shell. It exists
2. // only for an app that declares `offline = [ … ]`: hl:web compiles this file like
3. // client.hl, serves it at /__hl/web/worker.js, and registers the entry script
4. // /__hl/sw.js, which imports it and constructs it ONCE with the table below.
5. //
6. // WHAT IS KEPT IS THE APP'S DECISION (D38). `precache` holds the shared shell —
7. // the runtime, the client half, the stylesheet, every page module, the web app
8. // manifest and its icons — plus the DOCUMENT of each param-free route whose
9. // component the allow-list names. `routes` is the client's route table with
10. // `keep` on the rows the allow-list names, so a param-bearing page (`/notes/:id`)
11. // is kept when it is VISITED, and only then. Every other page is unavailable
12. // offline, and says so.
13. //
14. // THREE RULES, the ones the old hl:web ran (mission 101):
15. // · a NAVIGATION is network-first. The network is the truth while it answers,
16. // and a fresh document for a kept page replaces the cached one on the way past;
17. // the cache is what an outage falls back to.
18. // · a precached asset is cache-first. Its url carries the build's hash, so a hit
19. // cannot be stale.
20. // · everything else goes to the network untouched: the emit channel, a function
21. // route, an app's own file. The socket never reaches a worker at all.
22. //
23. // WHY THE ENTRY SCRIPT IS NOT THIS FILE. A worker must add its listeners while its
24. // script is first evaluated, and a `fetch` listener must hand `respondWith` its
25. // promise before the listener returns. Every call in this language is awaited, so
26. // neither can be written here; /__hl/sw.js does exactly those two things and calls
27. // the methods below for everything else (WebFramework.hl, `workerEntry`).
28. import HlwRouter from './router.hl'
30. cfgText = '' // the table, as JSON text (the one construction argument)
31. cfg = JSON.parse(cfgText)
32. router = new HlwRouter(routes = cfg.routes)
34. // INSTALL: the shell into this build's cache, one url at a time — a single failed
35. // url must not throw the whole install away and leave the app with no shell
36. install() {
37. let cache = globalThis.caches.open(cfg.cache)
38. for (url of cfg.precache) {
39. // a data-free page is fetched as nobody: its document carries no user's state (#120)
40. let creds = cfg.dataFree.includes(url) ? 'omit' : 'same-origin'
41. let r = globalThis.__hlAttempt(() => { return fetch(url, { cache = 'reload' credentials = creds }) })
42. if (r.ok && r.value.ok) { cache.put(url, r.value) }
43. }
44. globalThis.skipWaiting()
45. return null
46. }
48. // ACTIVATE: the cache name carries the build's hash, so every other hl cache is an
49. // older deploy's. This worker then controls the pages that are already open.
50. activate() {
51. for (name of globalThis.caches.keys()) {
52. if (name != cfg.cache && name.startsWith('hl-shell-')) { globalThis.caches.delete(name) }
53. }
54. globalThis.clients.claim()
55. return null
56. }
58. // FETCH: what answers this request. Never null — the entry script hands the answer to
59. // `respondWith` unread.
60. answer(req) {
61. if (req.method != 'GET') { return fetch(req) }
62. let url = new URL(req.url)
63. if (url.origin != globalThis.location.origin) { return fetch(req) }
64. if (req.mode == 'navigate') { return navigation(req, url) }
65. if (cfg.precache.includes(url.pathname + url.search)) { return cacheFirst(req, url.pathname + url.search) }
66. return fetch(req)
67. }
69. // may the document at this path be kept? Only if the route that answers it is a page
70. // the allow-list names — the whole of D38 in one predicate
71. kept(path) {
72. let m = router.match(path)
73. return m != null && m.route.keep == true
74. }
76. navigation(req, url) {
77. let r = globalThis.__hlAttempt(() => { return fetch(req) })
78. if (r.ok) {
79. // a data-free page's copy is the anonymous one made at install, never the live render
80. if (r.value.ok && kept(url.pathname) && !cfg.dataFree.includes(url.pathname)) { keep(url.pathname + url.search, r.value.clone()) }
81. return r.value
82. }
83. let hit = globalThis.caches.match(url.pathname + url.search, { cacheName = cfg.cache })
84. if (hit != null) { return hit }
85. // A PAGE OF A KEPT COMPONENT THAT WAS NEVER LOADED AS A DOCUMENT (#124): any kept document
86. // of the same component stands in — the page boots it with this url's parameters
87. let like = standIn(url.pathname)
88. if (like != null) { return like }
89. // THE APP'S OWN FALLBACK (#120): a data-free page, kept once, instead of the bare notice
90. if (cfg.fallback != null) {
91. let fb = globalThis.caches.match(cfg.fallback, { cacheName = cfg.cache })
92. if (fb != null) { return fb }
93. }
94. return unavailable(url.pathname)
95. }
97. // a kept document of the route's own component: this route's first, else another route's
98. standIn(path) {
99. let m = router.match(path)
100. if (m == null || m.route.keep != true) { return null }
101. let cache = globalThis.caches.open(cfg.cache)
102. let other = null
103. for (req of cache.keys()) {
104. let o = router.match(new URL(req.url).pathname)
105. if (o != null && o.route.keep == true && o.route.page == m.route.page) {
106. if (o.index == m.index) { return cache.match(req) }
107. if (other == null) { other = req }
108. }
109. }
110. return other != null ? cache.match(other) : null
111. }
113. keep(key, res) {
114. let cache = globalThis.caches.open(cfg.cache)
115. cache.put(key, res)
116. return null
117. }
119. // CACHE-FIRST for the shell. A miss still asks the network, so a worker installed
120. // before an asset existed is not a permanent failure.
121. cacheFirst(req, key) {
122. let hit = globalThis.caches.match(key, { cacheName = cfg.cache })
123. if (hit != null) { return hit }
124. let r = globalThis.__hlAttempt(() => { return fetch(req) })
125. if (r.ok) {
126. if (r.value.ok) { keep(key, r.value.clone()) }
127. return r.value
128. }
129. let R = globalThis.Response
130. return new R('', { status = 503 statusText = 'Offline' })
131. }
133. // A MESSAGE FROM A PAGE. `keep`: a page the browser reached by a client-side
134. // navigation was never a document request, so the client asks for it to be kept —
135. // fetched here as the document it would be, if it is a page the allow-list names.
136. message(data) {
137. if (data != null && data.t == 'forget') { return forget(data.path) }
138. if (data == null || data.t != 'keep' || !kept(data.path) || cfg.dataFree.includes(data.path)) { return null }
139. let r = globalThis.__hlAttempt(() => { return fetch(data.path, { credentials = 'same-origin' headers = { 'Accept' = 'text/html' } }) })
140. if (r.ok && r.value.ok) { keep(data.path, r.value) }
141. return null
142. }
144. // THE USER CHANGED (#125): every kept document is another user's, so they all go; the
145. // page that stands is fetched again as the new session sees it
146. forget(path) {
147. let cache = globalThis.caches.open(cfg.cache)
148. for (req of cache.keys()) {
149. let u = new URL(req.url)
150. if (kept(u.pathname) && !cfg.dataFree.includes(u.pathname)) { cache.delete(req) }
151. }
152. if (path != null && kept(path) && !cfg.dataFree.includes(path)) {
153. let r = globalThis.__hlAttempt(() => { return fetch(path, { credentials = 'same-origin' headers = { 'Accept' = 'text/html' } }) })
154. if (r.ok && r.value.ok) { keep(path, r.value) }
155. }
156. return null
157. }
159. // A NOTIFICATION WAS CLICKED: the app's open window is focused, or one is opened at
160. // the path the notification carries
161. clicked(n) {
162. n.close()
163. let path = n.data != null && n.data.path != null ? n.data.path : '/'
164. for (c of globalThis.clients.matchAll({ type = 'window' includeUncontrolled = true })) {
165. if (c.focus != null) { return c.focus() }
166. }
167. return globalThis.clients.openWindow(path)
168. }
170. // A page this app does not carry offline. A DOCUMENT, so the tab shows something and
171. // no navigation fails inside the browser; 503, so a probe can tell it from a page.
172. unavailable(path) {
173. let esc = path.replaceAll('&', '&amp;').replaceAll('<', '&lt;')
174. let body = '<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Offline</title><link rel="stylesheet" href="' + cfg.css + '"></head><body><main data-hl-offline="1"><h1>Unavailable offline</h1><p><code>' + esc + '</code> is not one of the pages this app carries offline.</p><p><a href="/">Back to the start</a></p></main></body></html>'
175. let R = globalThis.Response
176. return new R(body, { status = 503 headers = { 'Content-Type' = 'text/html; charset=utf-8' } })
177. }