tracker

6.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. let r = globalThis.__hlAttempt(() => { return fetch(url, { cache = 'reload' credentials = 'same-origin' }) })
40. if (r.ok && r.value.ok) { cache.put(url, r.value) }
41. }
42. globalThis.skipWaiting()
43. return null
44. }
46. // ACTIVATE: the cache name carries the build's hash, so every other hl cache is an
47. // older deploy's. This worker then controls the pages that are already open.
48. activate() {
49. for (name of globalThis.caches.keys()) {
50. if (name != cfg.cache && name.startsWith('hl-shell-')) { globalThis.caches.delete(name) }
51. }
52. globalThis.clients.claim()
53. return null
54. }
56. // FETCH: what answers this request. Never null — the entry script hands the answer to
57. // `respondWith` unread.
58. answer(req) {
59. if (req.method != 'GET') { return fetch(req) }
60. let url = new URL(req.url)
61. if (url.origin != globalThis.location.origin) { return fetch(req) }
62. if (req.mode == 'navigate') { return navigation(req, url) }
63. if (cfg.precache.includes(url.pathname + url.search)) { return cacheFirst(req, url.pathname + url.search) }
64. return fetch(req)
65. }
67. // may the document at this path be kept? Only if the route that answers it is a page
68. // the allow-list names — the whole of D38 in one predicate
69. kept(path) {
70. let m = router.match(path)
71. return m != null && m.route.keep == true
72. }
74. navigation(req, url) {
75. let r = globalThis.__hlAttempt(() => { return fetch(req) })
76. if (r.ok) {
77. if (r.value.ok && kept(url.pathname)) { keep(url.pathname + url.search, r.value.clone()) }
78. return r.value
79. }
80. let hit = globalThis.caches.match(url.pathname + url.search, { cacheName = cfg.cache })
81. if (hit != null) { return hit }
82. return unavailable(url.pathname)
83. }
85. keep(key, res) {
86. let cache = globalThis.caches.open(cfg.cache)
87. cache.put(key, res)
88. return null
89. }
91. // CACHE-FIRST for the shell. A miss still asks the network, so a worker installed
92. // before an asset existed is not a permanent failure.
93. cacheFirst(req, key) {
94. let hit = globalThis.caches.match(key, { cacheName = cfg.cache })
95. if (hit != null) { return hit }
96. let r = globalThis.__hlAttempt(() => { return fetch(req) })
97. if (r.ok) {
98. if (r.value.ok) { keep(key, r.value.clone()) }
99. return r.value
100. }
101. let R = globalThis.Response
102. return new R('', { status = 503 statusText = 'Offline' })
103. }
105. // A MESSAGE FROM A PAGE. `keep`: a page the browser reached by a client-side
106. // navigation was never a document request, so the client asks for it to be kept —
107. // fetched here as the document it would be, if it is a page the allow-list names.
108. message(data) {
109. if (data == null || data.t != 'keep' || !kept(data.path)) { return null }
110. let r = globalThis.__hlAttempt(() => { return fetch(data.path, { credentials = 'same-origin' headers = { 'Accept' = 'text/html' } }) })
111. if (r.ok && r.value.ok) { keep(data.path, r.value) }
112. return null
113. }
115. // A NOTIFICATION WAS CLICKED: the app's open window is focused, or one is opened at
116. // the path the notification carries
117. clicked(n) {
118. n.close()
119. let path = n.data != null && n.data.path != null ? n.data.path : '/'
120. for (c of globalThis.clients.matchAll({ type = 'window' includeUncontrolled = true })) {
121. if (c.focus != null) { return c.focus() }
122. }
123. return globalThis.clients.openWindow(path)
124. }
126. // A page this app does not carry offline. A DOCUMENT, so the tab shows something and
127. // no navigation fails inside the browser; 503, so a probe can tell it from a page.
128. unavailable(path) {
129. let esc = path.replaceAll('&', '&amp;').replaceAll('<', '&lt;')
130. 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>'
131. let R = globalThis.Response
132. return new R(body, { status = 503 headers = { 'Content-Type' = 'text/html; charset=utf-8' } })
133. }