Skip to content

Commit

Permalink
Patch wasm build for branding and GH pages operation
Browse files Browse the repository at this point in the history
  • Loading branch information
timangus committed Jun 26, 2024
1 parent b00cdf1 commit cd1ef1f
Show file tree
Hide file tree
Showing 4 changed files with 216 additions and 6 deletions.
12 changes: 6 additions & 6 deletions installers/wasm/build.sh
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ DEPLOY_DIR=${BUILD_DIR}/${PRODUCT_NAME}-${VERSION}

mkdir -p ${DEPLOY_DIR}

cp ${BUILD_DIR}/${PRODUCT_NAME}.html \
${BUILD_DIR}/${PRODUCT_NAME}.js \
${BUILD_DIR}/${PRODUCT_NAME}.wasm \
${BUILD_DIR}/${PRODUCT_NAME}.worker.js \
${BUILD_DIR}/qtloader.js \
${BUILD_DIR}/qtlogo.svg \
cp ${BUILD_DIR}/*.html \
${BUILD_DIR}/*.js \
${BUILD_DIR}/*.css \
${BUILD_DIR}/*.wasm \
${BUILD_DIR}/*.svg \
${BUILD_DIR}/*.ico \
${DEPLOY_DIR} || exit $?

tar cvfz ${DEPLOY_DIR}.tar.gz ${DEPLOY_DIR} || exit $?
146 changes: 146 additions & 0 deletions misc/wasm-extras/coi-serviceworker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
let coepCredentialless = false;
if (typeof window === 'undefined') {
self.addEventListener("install", () => self.skipWaiting());
self.addEventListener("activate", (event) => event.waitUntil(self.clients.claim()));

self.addEventListener("message", (ev) => {
if (!ev.data) {
return;
} else if (ev.data.type === "deregister") {
self.registration
.unregister()
.then(() => {
return self.clients.matchAll();
})
.then(clients => {
clients.forEach((client) => client.navigate(client.url));
});
} else if (ev.data.type === "coepCredentialless") {
coepCredentialless = ev.data.value;
}
});

self.addEventListener("fetch", function (event) {
const r = event.request;
if (r.cache === "only-if-cached" && r.mode !== "same-origin") {
return;
}

const request = (coepCredentialless && r.mode === "no-cors")
? new Request(r, {
credentials: "omit",
})
: r;
event.respondWith(
fetch(request)
.then((response) => {
if (response.status === 0) {
return response;
}

const newHeaders = new Headers(response.headers);
newHeaders.set("Cross-Origin-Embedder-Policy",
coepCredentialless ? "credentialless" : "require-corp"
);
if (!coepCredentialless) {
newHeaders.set("Cross-Origin-Resource-Policy", "cross-origin");
}
newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");

return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders,
});
})
.catch((e) => console.error(e))
);
});

} else {
(() => {
const reloadedBySelf = window.sessionStorage.getItem("coiReloadedBySelf");
window.sessionStorage.removeItem("coiReloadedBySelf");
const coepDegrading = (reloadedBySelf == "coepdegrade");

// You can customize the behavior of this script through a global `coi` variable.
const coi = {
shouldRegister: () => !reloadedBySelf,
shouldDeregister: () => false,
coepCredentialless: () => true,
coepDegrade: () => true,
doReload: () => window.location.reload(),
quiet: false,
...window.coi
};

const n = navigator;
const controlling = n.serviceWorker && n.serviceWorker.controller;

// Record the failure if the page is served by serviceWorker.
if (controlling && !window.crossOriginIsolated) {
window.sessionStorage.setItem("coiCoepHasFailed", "true");
}
const coepHasFailed = window.sessionStorage.getItem("coiCoepHasFailed");

if (controlling) {
// Reload only on the first failure.
const reloadToDegrade = coi.coepDegrade() && !(
coepDegrading || window.crossOriginIsolated
);
n.serviceWorker.controller.postMessage({
type: "coepCredentialless",
value: (reloadToDegrade || coepHasFailed && coi.coepDegrade())
? false
: coi.coepCredentialless(),
});
if (reloadToDegrade) {
!coi.quiet && console.log("Reloading page to degrade COEP.");
window.sessionStorage.setItem("coiReloadedBySelf", "coepdegrade");
coi.doReload("coepdegrade");
}

if (coi.shouldDeregister()) {
n.serviceWorker.controller.postMessage({ type: "deregister" });
}
}

// If we're already coi: do nothing. Perhaps it's due to this script doing its job, or COOP/COEP are
// already set from the origin server. Also if the browser has no notion of crossOriginIsolated, just give up here.
if (window.crossOriginIsolated !== false || !coi.shouldRegister()) return;

if (!window.isSecureContext) {
!coi.quiet && console.log("COOP/COEP Service Worker not registered, a secure context is required.");
return;
}

// In some environments (e.g. Firefox private mode) this won't be available
if (!n.serviceWorker) {
!coi.quiet && console.error("COOP/COEP Service Worker not registered, perhaps due to private mode.");
return;
}

n.serviceWorker.register(window.document.currentScript.src).then(
(registration) => {
!coi.quiet && console.log("COOP/COEP Service Worker registered", registration.scope);

registration.addEventListener("updatefound", () => {
!coi.quiet && console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
window.sessionStorage.setItem("coiReloadedBySelf", "updatefound");
coi.doReload();
});

// If the registration is active, but it's not controlling the page
if (registration.active && !n.serviceWorker.controller) {
!coi.quiet && console.log("Reloading page to make use of COOP/COEP Service Worker.");
window.sessionStorage.setItem("coiReloadedBySelf", "notcontrolling");
coi.doReload();
}
},
(err) => {
!coi.quiet && console.error("COOP/COEP Service Worker failed to register:", err);
}
);
})();
}
13 changes: 13 additions & 0 deletions misc/wasm-extras/loader.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: #000;
border-radius: 50%;
animation: rotation 1s linear infinite;
}

@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
51 changes: 51 additions & 0 deletions scripts/wasm-build.sh
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,54 @@ mkdir -p ${BUILD_DIR}
cmake --build . 2>&1 | tee compiler-${VERSION}.log
[[ "${PIPESTATUS[0]}" -eq 0 ]] || exit ${PIPESTATUS[0]}
)

# Apply branding changes -- this will almost certainly break in future
cp misc/wasm-extras/* ${BUILD_DIR}
mv ${BUILD_DIR}/${PRODUCT_NAME}.html ${BUILD_DIR}/index.html
cp source/app/icon/Icon.svg ${BUILD_DIR}/qtlogo.svg
cp source/app/icon/Icon-favicon.ico ${BUILD_DIR}/favicon.ico

(
cd ${BUILD_DIR}
patch -p0 <<'EOF'
--- index.html
+++ index.html
@@ -1,6 +1,8 @@
<!doctype html>
<html lang="en-us">
<head>
+ <script src="coi-serviceworker.js"></script>
+ <link rel="stylesheet" href="loader.css">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -20,7 +22,7 @@
<figure style="overflow:visible;" id="qtspinner">
<center style="margin-top:1.5em; line-height:150%">
<img src="qtlogo.svg" width="320" height="200" style="display:block"></img>
- <strong>Qt for WebAssembly: Graphia</strong>
+ <strong>Graphia for WebAssembly</strong>
<div id="qtstatus"></div>
<noscript>JavaScript is disabled. Please enable JavaScript to use this application.</noscript>
</center>
@@ -43,13 +45,17 @@
try {
showUi(spinner);
- status.innerHTML = 'Loading...';
+ status.classList.add('loader');
const instance = await qtLoad({
qt: {
onLoaded: () => showUi(screen),
onExit: exitData =>
{
+ if(status.classList.contains('loader')) {
+ status.classList.remove('loader');
+ }
+
status.innerHTML = 'Application exit';
status.innerHTML +=
exitData.code !== undefined ? ` with code ${exitData.code}` : '';
EOF
)

0 comments on commit cd1ef1f

Please sign in to comment.