> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nanoforge.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Loading page

> The page that downloads, caches and starts your game in the browser

## What it does

The loading page (`@nanoforge-dev/loader-website`) is what players see while the game loads. The
[client loader](https://docs.nanoforge.eu/docs/loader/client.md) serves it at `/`. It downloads the game files into a cache in the
browser, so the next visit downloads only what changed, then starts the game.

## Loading steps

The text under the logo shows the current step:

1. **Fetching manifest**: it asks `/manifest` for the list of files, with their hash and size.
2. **Cleaning cache game files**: on the first visit (or after you clear the site's data), it
   empties the cache.
3. **Verifying application integrity**: it compares each file with the cached copy. Files no
   longer in the list are removed from the cache.
4. **Download n / total: \[file]**: it downloads only the new or changed files, with a progress
   bar.
5. It imports `main.js` from the cache and fetches `/env`.
6. **Starting game**: it calls the `main` function of `main.js`, then fades the loading screen
   out.

If a step fails, or the game throws an error later, the loading screen comes back with the error
message and a **Back home** link that reloads the page.

## What your client's main receives

The loading page calls the `main` export of the client's `main.js` with one object:

| Field | Type | Description |
| - | - | - |
| `files` | `Map<string, string>` | Each game file (`/player.png`) mapped to a URL of its cached copy. |
| `env` | `Record<string, string \| undefined>` | The client's environment variables, from `/env`. |
| `container` | `HTMLDivElement` | The element the game renders into. |

The `main.ts` that `nf new` generates passes this object to `app.init`, so you rarely read it
yourself.

## Secure context

The cache uses the browser's
[Origin Private File System](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system),
which only works in a
[secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts):

* `http://localhost:3000` works;
* `http://192.168.1.20:3000` or `http://my-server:3000` does not;
* any `https://` address works.

Outside a secure context, the page stops at once with:

```text theme={null}
Storage issue: The game must be hosted with SSL (HTTPS) to enable local storage and load properly.
```

Serve the game over HTTPS to open it from another machine: see
[HTTPS with nf start](https://docs.nanoforge.eu/docs/cli/commands/start.md#https).

## Cache

The cache belongs to the site's address (the origin). Two games served on the same address and
port share it: the second one replaces the files of the first.

To empty it, clear the site's data in the browser (storage and cache). The next load downloads
every file again.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.