CrossOrigin Images

If your GWT Application uses images, any image elements created in code must have the crossOrigin attribute set to anonymous. Doing this allows fetching images from another domain through the use of CORS.

This is done by setting image.setAttribute("crossOrigin", "anonymous"); on your ImageElement instance before setting the source.

Use the correct URLs

GWT includes a few different methods of getting the URL of the application. The two most common are GWT.getHostPageBaseURL and GWT.getModuleBaseURL. When hosting an application's resources at a different domain to the website, the distinction between these two method calls is crucial.

When referencing assets or files that are inside the GWT application, the module base URL is the one to use. When referencing the page that the user uses the application from, the host page base URL is the one to use. Using the wrong URL here will mean the application will fail to find files.

Usage with LibGDX

If you want to use this with LibGDX, I've already contributed changes to a GWT LibGDX backend to support this. Click here to check it out.

Cleaning up after the application

While the above will work, it does not correctly clean up after the application. As different applications will create different HTML tags, this exact process will differ per application. However, there are a few items that should almost always need cleaning up.

Most GWT applications create an iframe to run the application inside. If you do not clean this up, the application will keep running after navigating away. The <moduleName>.nocache.js file also adds another file, following a <hash>.cache.js pattern.

To also clean this up, I've created a second hook.

const useGWTScript = (url, badScriptPattern, moduleName) => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = false;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);

      const iframe = document.querySelector(`iframe#${moduleName}`);
      if (iframe) {
        document.body.removeChild(iframe);
      }

      const badScripts = [];

      for (let i = 0; i < document.scripts.length; i++) {
        const scriptElement = document.scripts.item(i);
        if (scriptElement && badScriptPattern.test(scriptElement.src)) {
          badScripts.push(scriptElement);
        }
      }

      badScripts.forEach((scriptElem) =>
        scriptElem.parentNode?.removeChild?.(scriptElem)
      );
    };
  }, [url]);
};

This hook is used instead of the previous useScript hook and is called like this.

useGWTScript(
  'https://cdn.website.com/SomeApp/html/html.nocache.js',
  /https\:\/\/cdn.website.com\/SomeApp\/html\/(.*).cache.js/,
  'html'
);

Preventing keyboard navigation

If you're trying to embed an application that makes use of the keyboard, it may be a good idea to prevent keyboard interaction with the main web page. I've created the following hook to do this,

const useKeyJail = () => {
  useEffect(() => {
    const listener = (event) => {
      console.log(event.keyCode);
      if ([32, 33, 34, 35, 36, 37, 38, 39, 40].includes(event.keyCode)) {
        event.preventDefault();
        return false;
      }
    };

    document.addEventListener('keydown', listener);

    return () => {
      document.removeEventListener('keydown', listener);
    };
  }, []);
};

This hook prevents the primary page navigation keys from working. This list includes the space bar, page up and down keys, end, home, and arrow keys. You may need to tweak this for your application.