Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: sw fallback + client key #23

Merged
merged 11 commits into from
Nov 2, 2023
Merged

feat: sw fallback + client key #23

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7ddd2d5
feat: update sw to use fallback
AmeanAsad Oct 25, 2023
3e45d0f
update js client version
AmeanAsad Oct 25, 2023
52bbc31
update urls
AmeanAsad Oct 25, 2023
0aee96a
update js client
AmeanAsad Oct 26, 2023
1675378
feat: add client key to sw
AmeanAsad Nov 2, 2023
5d5da34
Merge branch 'main' into feat/update-client
AmeanAsad Nov 2, 2023
253f49c
remove fallback for now
AmeanAsad Nov 2, 2023
4be4156
Update src/widget/widget.js
AmeanAsad Nov 2, 2023
25484e8
fixes
AmeanAsad Nov 2, 2023
75796f8
fixes
AmeanAsad Nov 2, 2023
bc3e890
fixes
AmeanAsad Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,173 changes: 1,781 additions & 392 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"@filecoin-saturn/js-client": "^0.3.0",
"@filecoin-saturn/js-client": "^0.3.1",
"@sentry/browser": "^7.69.0",
"browser-readablestream-to-it": "^1.0.3",
"debug": "^4.3.3",
Expand Down
2 changes: 2 additions & 0 deletions placeholders/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8"/>
<script async src="https://saturn.test/widget.js#target=test-key"></script>
<style>
:root {
--cell-width: 400px;
Expand Down Expand Up @@ -32,6 +33,7 @@
<img src="https://ipfs.io/ipfs/bafybeihfy4opphtnkbzihf5mfziioxitlqyuctnezauydnycaashti6asi/fail-mascot.gif">
<img src="https://ipfs.io/ipfs/bafybeicr7yeoegk5kcxn2er52gkbnp6dethflk475xlo2k3jramk6r5sfy/starry_night_full.jpg">
<img src="https://bafybeihebgozm5jsp4r7m5uic7ixa66lezcu57gsrm3c2gl6cn6kgkhv2e.ipfs.dweb.link/Mona_Lisa.png">
<img src="https://djib.io/ipfs/QmeXKfBnypgzpnEW2YkXZhbWxN5zB38saW6rvdxiS2k88f">
<!-- <video controls muted src="https://bafybeiar7i5hcwnv2bulqcdknt4vawurmsr5xd3r7ssa7mrjqvm4av4pbu.ipfs.dweb.link/bigbuckbunny.mp4"></video>
<video controls muted src="https://ipfs.io/ipfs/bafybeide6bhqso5anq4d5yu6h5xo57qv6ewsy4ddfs4ufouy55jtprgbwy/elephants-dream.webm"></video>
<video controls muted src="https://ipfs.io/ipfs/bafybeiam3scjzorx4k5fi3jq6w6juh7whfagzk7rct56ohntxli5q7vpwi/vacations.mp4"></video>
Expand Down
17 changes: 15 additions & 2 deletions src/sw/controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,17 @@ export class Controller {

constructor () {
this.clientId = getRetrievalClientId()
this.clientKey = getClientKey()
this.saturn = new Saturn({
clientKey: 'abc123',
storage: indexedDbStorage()
clientKey: this.clientKey,
storage: indexedDbStorage(),
authURL: 'https://fz3dyeyxmebszwhuiky7vggmsu0rlkoy.lambda-url.us-west-2.on.aws',
orchURL: 'https://orchestrator.strn.pl/nodes',
cdnURL: 'https://l1s.saturn.ms',
originURL: 'djib.io',
guanzo marked this conversation as resolved.
Show resolved Hide resolved
experimental: true
})

}

start () {
Expand Down Expand Up @@ -65,6 +72,12 @@ function getRetrievalClientId () {
return clientId
}

function getClientKey() {
const urlObj = new URL(self.location.href)
const clientKey = urlObj.searchParams.get('clientKey')
return clientKey
}

async function fetchCID (cid, saturn, clientId, event) {
let response = null
const { request } = event
Expand Down
55 changes: 55 additions & 0 deletions src/widget/widget-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@

// Retrieves widget config based on the script tag url.

export const WIDGET_BASE_URL = `${process.env.WIDGET_ORIGIN}/widget.js`
// The ".js" extension is omitted so the HTTP request can bypass
// the wordpress web server.
export const REVERSE_PROXY_WIDGET_PATH = '/arc-widget'

export function isWidgetUrl (url) {
const { href } = new URL(url)
return href.startsWith(WIDGET_BASE_URL)
}

function getConf (urlObj, conf = {}) {
const [_, queryStr] = urlObj.href.split(/#|[?]/)
const searchParams = new URLSearchParams(queryStr)
conf.clientKey = searchParams.get('target')
AmeanAsad marked this conversation as resolved.
Show resolved Hide resolved
return conf
}


function urlToInheritedProtocolUrl (url) {
const { host, pathname } = new URL(url)
const inheritedProtocolUrl = `//${host}${pathname}`
return inheritedProtocolUrl
}

export function findWidgetScriptTag () {
const $widgetScript = document.querySelector(`
script[src^="${WIDGET_BASE_URL}"],
script[src^="${urlToInheritedProtocolUrl(WIDGET_BASE_URL)}"]
`)

return $widgetScript
}

export function widgetConfigFromScriptTag () {
const $widgetScript = findWidgetScriptTag()

// widgetConfigFromUrl expects an absolute url, so any relative
// urls need to be converted.
let src = $widgetScript.getAttribute('src')
if (src.startsWith('//')) {
src = window.location.protocol + src
} else if (src.startsWith('/')) {
src = window.location.origin + src
}

return widgetConfigFromUrl(src)
}

export function widgetConfigFromUrl (url) {
const urlObj = new URL(url)
return getConf(urlObj, {})
}
15 changes: 11 additions & 4 deletions src/widget/widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import { v4 as uuidv4 } from 'uuid'

import { SW_PATH } from '@src/constants.js'
import { SW_PATH } from '@/constants.js'
AmeanAsad marked this conversation as resolved.
Show resolved Hide resolved
import { widgetConfigFromScriptTag } from './widget-config.js'

const cl = console.log

const MDN_SW_DOCS_URL = 'https://developer.mozilla.org/en-US/docs/Web' +
'/API/Service_Worker_API/Using_Service_Workers' +
'#Why_is_my_service_worker_failing_to_register'

async function installSw (clientId) {
async function installSw (conf) {
const { clientId, clientKey } = conf
try {
const path = `${SW_PATH}?clientId=${clientId}`
const path = `${SW_PATH}?clientId=${clientId}&clientKey=${clientKey}`
await navigator.serviceWorker.register(path)
} catch (err) {
console.warn(
Expand Down Expand Up @@ -52,6 +54,10 @@ function initWidget () {
return
}


const config = widgetConfigFromScriptTag()
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@guanzo to add some handling for when the DOM is not loaded yet, would widgetConfigFromScriptTag() return an error? That way can just add a try catch.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sgtm

const clientKey = config.clientKey
console.log('CONFIG', config)
AmeanAsad marked this conversation as resolved.
Show resolved Hide resolved
addHeadElement('link', {
href: process.env.UNTRUSTED_L1_ORIGIN,
crossOrigin: '',
Expand All @@ -60,7 +66,8 @@ function initWidget () {
})

const clientId = getRetrievalClientId()
installSw(clientId)
const conf = { clientId, clientKey}
installSw(conf)
}

initWidget()
12 changes: 9 additions & 3 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,13 @@ export default (env, { mode }) => {
// Switch to .env files once this gets unwieldy
const e = process.env
const STATIC_ORIGIN = e.STATIC_ORIGIN ?? 'http://localhost:8030'
const L1_ORIGIN = e.L1_ORIGIN ?? 'http://localhost:8031'
const TRUSTED_L1_ORIGIN = e.TRUSTED_L1_ORIGIN ?? 'http://localhost:8031'
const UNTRUSTED_L1_ORIGIN = e.UNTRUSTED_L1_ORIGIN ?? 'https://localhost'
const L1_ORIGIN = e.L1_ORIGIN ?? 'https://l1s.saturn-test.ms'
const TRUSTED_L1_ORIGIN = e.TRUSTED_L1_ORIGIN ?? 'https://l1s.saturn-test.ms'
const UNTRUSTED_L1_ORIGIN = e.UNTRUSTED_L1_ORIGIN ?? 'https://saturn-test.ms'
const LOG_INGESTOR_URL = e.LOG_INGESTOR_URL ?? 'https://p6wofrb2zgwrf26mcxjpprivie0lshfx.lambda-url.us-west-2.on.aws'
const JWT_AUTH_URL = e.JWT_AUTH_URL ?? 'https://fz3dyeyxmebszwhuiky7vggmsu0rlkoy.lambda-url.us-west-2.on.aws'
const ORCHESTRATOR_URL = e.ORCHESTRATOR_URL ?? 'https://orchestrator.strn-test.pl/nodes'
const WIDGET_ORIGIN = e.WIDGET_ORIGIN ?? 'https://saturn.test'


return {
Expand Down Expand Up @@ -59,6 +62,9 @@ export default (env, { mode }) => {
TRUSTED_L1_ORIGIN,
UNTRUSTED_L1_ORIGIN,
LOG_INGESTOR_URL,
JWT_AUTH_URL,
ORCHESTRATOR_URL,
WIDGET_ORIGIN
}),
new ESLintPlugin({
emitError: false,
Expand Down
Loading