Datenschutz & externe Anfragen

Blockly, die Engine unter Morphic Blocks, braucht einige Bilder und Sounds: den Papierkorb, die Zoom-Steuerung, die Cursor beim Ziehen und die Klick- und Lösch-Sounds. Für sich allein lädt Blockly sie von Googles Server (blockly-demo.appspot.com), sodass jeder Browser, der die Seite aufruft, ihn kontaktiert.

Morphic Blocks lädt sie stattdessen von deiner eigenen Seite: aus blockly-media/ neben der Seite. Überall, wo eine Datenschutzerklärung gilt, etwa an einer Hochschule oder Schule, kontaktiert so kein Browser deiner Besucher einen anderen Server.

Die Medien kopieren

Blocklys Medien kommen mit dem Paket. Ein Bundler-Plugin kopiert sie nach public/blockly-media/, sobald dev oder build startet, ohne Skriptzeile:

vite.config.ts

import blocklyMedia from "morphic-blocks/vite";

export default { plugins: [blocklyMedia()] };

Dasselbe Plugin gibt es für webpack, Rspack, Rollup und esbuild: morphic-blocks/webpack, /rspack, /rollup und /esbuild. Für einen anderen Ordner gib ihn an: blocklyMedia({ folder: "static/blockly-media" }), relativ zu dem Ort, an dem der Bundler läuft.

Mit Parcel, Turbopack (Next.js) oder ohne Bundler macht der Befehl morphic-blocks dasselbe; führe ihn vor dev und build aus:

{
  "scripts": {
    "dev": "morphic-blocks copy-media public/blockly-media && vite",
    "build": "morphic-blocks copy-media public/blockly-media && vite build"
  }
}

Beide kopieren nur, wenn der Ordner neu ist oder Blockly aktualisiert wurde; sie jedes Mal auszuführen kostet also nichts. Die Kopie wird erzeugt, deshalb gehört public/blockly-media/ in deine .gitignore.

public/ ist der Ordner, den Vite unverändert ausliefert; Next.js nutzt ebenfalls public/. Mit einem anderen Bundler kopierst du in den Ordner, den er unverändert ausliefert. Der relative Pfad blockly-media/ funktioniert auch, wenn deine App unter einem Unterpfad läuft.

Ohne die Kopie fehlen die Icons und die Sounds bleiben stumm; sonst geht nichts kaputt, und die Browser-Konsole zeigt eine Warnung, die sagt, was zu tun ist. Die Toolbox-Kacheln nutzen dieselben Medien und laden nie Sounds.

Medien von woanders

blockly.media verweist Blockly auf einen anderen Ordner oder Server:

await engine.mount({
  workspaceContainer: document.getElementById("workspace")!,
  blockly: { media: "assets/blockly/" },
});

Um Googles Kopie zu nutzen, wie Blockly es allein tut, setze media: "https://blockly-demo.appspot.com/static/media/". Die Browser deiner Besucher kontaktieren dann Googles Server.

Ohne Sounds

Um die Sounds ganz wegzulassen, schalte sie aus:

blockly: { sounds: false }

Prüfen

Öffne deine App, dann die Entwicklerwerkzeuge deines Browsers, und wechsle zum Tab Netzwerk. Filtere nach appspot, ziehe, lege ab und lösche einen Block und nutze die Zoom-Steuerung. Die Liste bleibt leer.