logo-blackPartyTown

HTML

Minimal Example

The smallest possible setup is a static page served next to the Partytown library files, with no build tool at all:

mkdir -p demo/~partytown && cd demo/~partytown
curl -O -L https://unpkg.com/@qwik.dev/partytown@latest/lib/partytown.js
curl -O -L https://unpkg.com/@qwik.dev/partytown@latest/lib/partytown-sw.js
cd .. && python3 -m http.server 8080
<!-- demo/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="/~partytown/partytown.js"></script>
  </head>
  <body>
    <script type="text/partytown">
      console.log('Hello from a web worker!');
    </script>
  </body>
</html>

Open http://localhost:8080/ and the message is logged from the web worker. The one requirement is that the /~partytown/ directory is served from your own origin.

At the lowest level, Partytown is not tied to one specific framework or build tool. Because of this, Partytown can be used in any webpage as long as the HTML is updated, and the library scripts are hosted from the origin.

While the partytown.js file could be an external request, it's recommended to inline the script instead. How the Partytown snippet is inlined into the page depends on each site's setup and an integration may already exist for your framework.

<head>
  <script>
    /* Inlined Partytown Snippet */
  </script>
  <script type="text/partytown" src="https://example.com/analytics.js"></script>
</head>

One option to load the snippet is from the partytownSnippet() function, exported from the @qwik.dev/partytown/integration submodule.

import { partytownSnippet } from "@qwik.dev/partytown/integration";
 
const snippetText = partytownSnippet();

Configure

The configuration should be added to window using the partytown global object.

Below is an HTML example of setting up the forwarding for Google Tag Manager. Note that the config is before the inlined partytown script.

<head>
  <script>
    partytown = {
      forward: ["dataLayer.push"],
    };
  </script>
  <script>
    /* Inlined Partytown Snippet */
  </script>
</head>

Partytown Script

Add the type="text/partytown" attribute for each script that should run from a web worker.

<script type="text/partytown">
  /* Inlined Third-Party Script */
</script>

Copy Library Files

How the files are copied or served from your site is up to each site's setup. A partytown copylib CLI copy task has been provided for convenience which helps copy the Partytown library files to the public directory.