Skip to main content

Worker Strategy

This strategy will allow you to load the script within a worker using partytown library. For more examples and how this is used, please refer to the documentation: https://partytown.builder.io/ https://partytown.builder.io/trade-offs

The fastest way to bootstrap and make use of party town is adding the partytown snippet in HeadManager or directly in document.head Because partytown strictly depends on service worker, the SW should also be enabled in the project. The forward prop allows us to make the connection with partytown worker box and will be filled with the props that you would have accessed otherwise for a loaded script via window object.

For example if instagram script was accessed usually with window.instgrm then forward will contain ['instgrm'] More about forwarding event in partytown can be found here: https://partytown.builder.io/forwarding-events

Party town makes use of several libraries that will be copied in dist at build time In order for the libraries to be available for use, those need to be exposed on the route on server side, similar to the service-worker.js file

import { partytownSnippet } from '@builder.io/partytown/integration';

function HeadManager() {
    return (
        <Head>
            <script dangerouslySetInnerHTML={{ __html: partytownSnippet({ debug: false, forward: ['instgrm'] }) }} />
        </Head>
    )
}

// or in App.tsx
function App() {
    return (
        <>
            <script dangerouslySetInnerHTML={{ __html: partytownSnippet({ debug: false, forward: ['instgrm', 'cookieconsent.initialise'] }) }} />
        </>
    )
}

Example of usage in component

function HomePage() {
    useScript({
        id: 'INSTAGRAM-01',
        strategy: ScriptStrategy.WORKER,
        src: 'https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js'
    });

    return <HomePageTemplate/>;
}
  // in order to test the cookieconsent, paste the following in debug console:
  cookieconsent.initialise({
    container: document.getElementById("content"),
    palette:{
     popup: {background: "#fff"},
     button: {background: "#aa0000"},
    },
    revokable:true,
    onStatusChange: function(status) {
     console.log(this.hasConsented() ?
      'enable cookies' : 'disable cookies');
    },
    law: {
     regionalLaw: false,
    },
    location: true,
   });