add service workers

3 years ago · 7eb1068807
5 changed files with 77 additions and 15 deletions
--- a/app/client.imba
+++ b/app/client.imba
@ -1,6 +1,7 @@
 let p = console.log

 import { sortBy } from 'lodash'
+import { version } from '../package.json'
 import fzy from './utils/fzy'
 import download_json_file from './utils/download'
 import upload_json_file from './utils/upload'
@ -13,7 +14,7 @@ db.open!
 global css body
 	d:flex fld:column jc:center ai:center
 	m:0 w:100% h:100% bg:#20222f
-	ff:Open Sans
+	ff:sans-serif

 tag app

@ -89,7 +90,7 @@ tag app
 			css button, label
 				d:flex fld:column jc:center ai:center
 				bg:none c:purple4 bd:none cursor:pointer fl:1
-				fs:14px font-weight:bold ff:Open Sans
+				fs:14px ff:sans-serif

 			css $input
 				bd:1px solid purple4
@ -97,6 +98,7 @@ tag app
 				bc:purple4 outline:none c:blue3 caret-color:blue3 px:20px
 				transition:background 0.5s
 				@focus bg:purple4/10
+				@placeholder fs:10px c:blue3

 			css .links
 				d:flex fld:column jc:flex-start
@ -119,6 +121,7 @@ tag app
 			<input$input
 				@hotkey('mod+k').capture=$input..focus
 				bind=state.query
+				placeholder="v{version}"
 				@hotkey('return').capture=handle_return
 				@hotkey('shift+return').capture=handle_shift_return
 				@hotkey('esc').capture=$input..blur
--- a/app/index.html
+++ b/app/index.html
@ -1,12 +1,18 @@
 <html lang="en">
-		<head>
-				<title>fuzzyhome</title>
-				<meta charset="UTF-8">
-				<meta name="viewport" content="width=device-width, initial-scale=1">
-				<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet"> 
-				<style src='*'></style>
-		</head>
-		<body>
-				<script type="module" src="./client.imba"></script>
-		</body>
+	<head>
+		<title>fuzzyhome</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style src='*'></style>
+	</head>
+	<body>
+		<script type="module">
+			if ('serviceWorker' in navigator) {
+				navigator.serviceWorker.register('./sw.js').then(function(reg){
+					reg.update()
+				})
+			}
+		</script>
+		<script type="module" src="./client.imba"></script>
+	</body>
 </html>
--- a/app/utils/idb_wrapper.imba
+++ b/app/utils/idb_wrapper.imba
@ -83,7 +83,6 @@ class idb_wrapper
 				resolve no

 	def #get_store permission="readwrite"
-		p permission
 		let db = openRequest.result
 		let transaction = db.transaction(table_name, permission)
 		transaction.objectStore(table_name)
--- a/package.json
+++ b/package.json
@ -1,10 +1,14 @@
 {
 	"name": "fuzzyhome",
+	"version": "0.0.5",
 	"scripts": {
-		"start": "imba run --baseurl . -w server.imba",
-		"build": "imba build --baseurl . server.imba",
+		"start": "imba run -SMH --baseurl . -w server.imba",
+		"build-app": "imba build -SMH --baseurl . server.imba",
+		"build-sw": "imbac sw.imba -o dist/public",
+		"build": "npm run build-app && npm run build-sw",
 		"nojekyll": "npx touch dist/public/.nojekyll",
 		"pages": "npx gh-pages --no-history --dotfiles --dist dist/public",
+		"static": "cd dist/public && echo http://localhost:8000 && python3 -m http.server &>/dev/null",
 		"deploy": "npm run build && npm run nojekyll && npm run pages"
 	},
 	"dependencies": {
--- a/sw.imba
+++ b/sw.imba
@ -0,0 +1,50 @@
+let p = console.log
+
+const app_prefix = "fuzzyhome_cache"
+const version = "0.0.5"
+
+const cache_name = "{app_prefix}-{version}"
+
+let urls = [
+	'./',
+	'./__assets__/all.css'
+	'./__assets__/app/client.js'
+	'./__assets__/app/client.css'
+]
+
+self.addEventListener('fetch', &) do |e|
+
+	def intercept request
+		if request
+			p `{cache_name} responding with cache : {e.request.url}`
+			request
+		else
+			p `{cache_name} not cached, fetching : {e.request.url}`
+			fetch e.request
+
+	e.respondWith(caches.match(e.request.url).then(intercept))
+
+self.addEventListener('install', &) do |e|
+	p `{cache_name} install`
+
+	def add_urls_to_cache cache
+		p `{cache_name} installing cache : {cache_name}`
+		cache.addAll urls
+		skipWaiting! # [TODO]: Export this and import to settings component and have manual update button
+
+	e.waitUntil(caches.open(cache_name).then(add_urls_to_cache))
+
+
+self.addEventListener('activate', &) do |e|
+	p `{cache_name} activate`
+
+	def delete_cached keys
+
+		let temp = keys.map(&) do |key, i|
+			if key !== cache_name
+				p `{cache_name} deleting cache : {keys[i]}`
+				caches.delete keys[i]
+
+		Promise.all(temp)
+
+	e.waitUntil(caches.keys().then(delete_cached))