Integrate Web Worker Offloading with Google Site Kit

[westonruter]

Important

This is a follow-up PR to #1685. Review and merge it first.

Fixes #1455

This is currently blocked by google/site-kit-wp#9726

Diff in page source when activating

--- wwo-disabled.html	2024-11-20 18:13:10.158395531 -0800
+++ wwo-enabled.html	2024-11-20 18:12:37.771394543 -0800
@@ -12,7 +12,7 @@

 	<meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
 	<!-- Google tag (gtag.js) Consent Mode dataLayer added by Site Kit -->
-	<script id="google_gtagjs-js-consent-mode-data-layer">
+	<script id="google_gtagjs-js-consent-mode-data-layer" type="text/partytown">
 		window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}
 		gtag('consent', 'default', {"ad_personalization":"denied","ad_storage":"denied","ad_user_data":"denied","analytics_storage":"denied","functionality_storage":"denied","security_storage":"denied","personalization_storage":"denied","region":["AT","BE","BG","CH","CY","CZ","DE","DK","EE","ES","FI","FR","GB","GR","HR","HU","IE","IS","IT","LI","LT","LU","LV","MT","NL","NO","PL","PT","RO","SE","SI","SK"],"wait_for_update":500});
 		window._googlesitekitConsentCategoryMap = {"statistics":["analytics_storage"],"marketing":["ad_storage","ad_user_data","ad_personalization"],"functional":["functionality_storage","security_storage"],"preferences":["personalization_storage"]};
@@ -198,11 +198,18 @@

 	</style>
 	<link rel='stylesheet' id='jetpack_css-css' href='https://example.com/wp-content/plugins/jetpack/css/jetpack.css?ver=13.8.1' media='all' />
+	<script id="web-worker-offloading-js-before">
+		window.partytown = {...(window.partytown || {}), ...{"lib":"\/wp-content\/plugins\/web-worker-offloading\/build\/","globalFns":["gtag"],"forward":["dataLayer.push"],"mainWindowAccessors":["_googlesitekitConsentCategoryMap","_googlesitekitConsents"]}};
+	</script>
+	<script id="web-worker-offloading-js-after">
+		/* Partytown 0.10.2-dev1727590485751 - MIT builder.io */
+		const t={preserveBehavior:!1},e=e=>{if("string"==typeof e)return[e,t];const[n,r=t]=e;return[n,{...t,...r}]},n=Object.freeze((()=>{const t=new Set;let e=[];do{Object.getOwnPropertyNames(e).forEach((n=>{"function"==typeof e[n]&&t.add(n)}))}while((e=Object.getPrototypeOf(e))!==Object.prototype);return Array.from(t)})());!function(t,r,o,i,a,s,c,d,l,p,u=t,f){function h(){f||(f=1,"/"==(c=(s.lib||"/~partytown/")+(s.debug?"debug/":""))[0]&&(l=r.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(d=setTimeout(v,999999999),r.addEventListener("pt0",w),a?y(1):o.serviceWorker?o.serviceWorker.register(c+(s.swPath||"partytown-sw.js"),{scope:c}).then((function(t){t.active?y():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&y()}))}),console.error):v())))}function y(e){p=r.createElement(e?"script":"iframe"),t._pttab=Date.now(),e||(p.style.display="block",p.style.width="0",p.style.height="0",p.style.border="0",p.style.visibility="hidden",p.setAttribute("aria-hidden",!0)),p.src=c+"partytown-"+(e?"atomics.js?v=0.10.2-dev1727590485751":"sandbox-sw.html?"+t._pttab),r.querySelector(s.sandboxParent||"body").appendChild(p)}function v(n,o){for(w(),i==t&&(s.forward||[]).map((function(n){const[r]=e(n);delete t[r.split(".")[0]]})),n=0;n<l.length;n++)(o=r.createElement("script")).innerHTML=l[n].innerHTML,o.nonce=s.nonce,r.head.appendChild(o);p&&p.parentNode.removeChild(p)}function w(){clearTimeout(d)}s=t.partytown||{},i==t&&(s.forward||[]).map((function(r){const[o,{preserveBehavior:i}]=e(r);u=t,o.split(".").map((function(e,r,o){var a;u=u[o[r]]=r+1<o.length?u[o[r]]||(a=o[r+1],n.includes(a)?[]:{}):(()=>{let e=null;if(i){const{methodOrProperty:n,thisObject:r}=((t,e)=>{let n=t;for(let t=0;t<e.length-1;t+=1)n=n[e[t]];return{thisObject:n,methodOrProperty:e.length>0?n[e[e.length-1]]:void 0}})(t,o);"function"==typeof n&&(e=(...t)=>n.apply(r,...t))}return function(){let n;return e&&(n=e(arguments)),(t._ptf=t._ptf||[]).push(o,arguments),n}})()}))})),"complete"==r.readyState?h():(t.addEventListener("DOMContentLoaded",h),t.addEventListener("load",h))}(window,document,navigator,top,window.crossOriginIsolated);
+	</script>
 	<script src="https://example.com/wp-content/themes/twentytwenty/assets/js/index.js?ver=2.7" id="twentytwenty-js-js" defer data-wp-strategy="defer"></script>

 	<!-- Google tag (gtag.js) snippet added by Site Kit -->
-	<script src="https://www.googletagmanager.com/gtag/js?id=GT-1234567" id="google_gtagjs-js" async></script>
-	<script id="google_gtagjs-js-after">
+	<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=GT-1234567" id="google_gtagjs-js" async></script>
+	<script id="google_gtagjs-js-after" type="text/partytown">
 		window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}
 		gtag("js", new Date());
 		gtag("set", "developer_id.dZTNiMT", true);
@@ -225,6 +232,7 @@
 	<meta name="apple-mobile-web-app-title" content="Weston Ruter">
 	<meta name="application-name" content="Weston Ruter">
 	<!-- Stream WordPress user activity plugin v4.0.2 -->
+	<meta name="generator" content="web-worker-offloading 0.1.1">
 	<meta name="generator" content="webp-uploads 2.2.0">
 	<script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script>
 	<meta name="generator" content="image-prioritizer 0.1.4">

[westonruter]

I don't know how the Consent Mode is supposed to work, especially as it relates to the WP Consent API plugin. On my test site I didn't get any consent banner even without WWO active, so I don't know what to look for to see if it is working as expected.