SMotaal · January 13, 2023 20:07 · bobjunga · Jan 12, 2023 · SMotaal · Jan 12, 2023
diff --git a/README.md b/README.md
diff --git a/create-protocol.js b/create-protocol.js
 const { mainModule } = process, { error } = console;

 function createProtocol(scheme, base, normalize = true) {

  const mimeTypeFor = require('./mime-types'),
    { app, protocol } = require('electron'),
    { URL } = require('url'),
    { readFileSync: read } = require('fs'),
    { _resolveFilename: resolve } = require('module');

  // Should only be called after app:ready fires
  if (!app.isReady())
    return app.on('ready', () => createProtocol(...arguments));

  // Normalize standard URLs to match file protocol format
  normalize = !normalize
    ? url => new URL(url).pathname
    : url => new URL(
      url.replace(/^.*?:[/]*/, `file:///`) // `${scheme}://./`
    ).pathname.replace(/[/]$/, '');

  protocol.registerBufferProtocol(
    scheme,
    (request, respond) => {
      let pathname, filename, data, mimeType;
      try {
        // Get normalized pathname from url
        pathname = normalize(request.url);

        // Resolve absolute filepath relative to mainModule
        filename = resolve(`.${pathname}`, mainModule);

        // Read contents into a buffer
        data = read(filename);

        // Resolve mimeType from extension
        mimeType = mimeTypeFor(filename);

        // Respond with mimeType & data
        respond({ mimeType, data });
      } catch (exception) {
        error(exception, { request, pathname, filename, data, mimeType });
      }
    },
    (exception) =>
      exception && error(`Failed to register ${scheme} protocol`, exception)
  );

 }

 module.exports = createProtocol;
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
  <!-- Needed if not loading page from app://./index.html -->
  <base href="app://./" />

  <script type="module" src="app:test-module.mjs"></script>
 </head>

 <body>
  Check the console!
 </body>

 </html>
diff --git a/main.js b/main.js
 const { app, protocol } = require('electron');

 // Base path used to resolve modules
 const base = app.getAppPath();

 // Protocol will be "app://./…"
 const scheme = 'app';

 { /* Protocol */
  // Registering must be done before app::ready fires
  // (Optional) Technically not a standard scheme but works as needed
  protocol.registerStandardSchemes([scheme], { secure: true });

  // Create protocol
  require('./create-protocol')(scheme, base);
 }

 { /* BrowserWindow */

  let browserWindow;

  const createWindow = () => {
    if (browserWindow) return;
    browserWindow = new BrowserWindow();
    
    // Option A — using the custom protocol
    // browserWindow.loadURL('app://./index.html');
    
    // Option B — directly from file
    browserWindow.loadFile('index.html');
  }

  app.isReady()
    ? createWindow()
    : app.on('ready', createWindow);
 }
diff --git a/mime-types.js b/mime-types.js
 const { extname } = require('path');

 const mime = filename =>
  mime[extname(`${filename || ''}`).toLowerCase()];

 mime[''] = 'text/plain',
  mime['.js'] =
  mime['.ts'] =
  mime['.mjs'] = 'text/javascript',
  mime['.html'] =
  mime['.htm'] = 'text/html',
  mime['.json'] = 'application/json',
  mime['.css'] = 'text/css',
  mime['.svg'] = 'application/svg+xml';

 module.exports = mime;
diff --git a/test-module.mjs b/test-module.mjs
 const message = 'Hello World!';
 console.trace(message);
 export default message;
	const { mainModule } = process, { error } = console;

	function createProtocol(scheme, base, normalize = true) {

	const mimeTypeFor = require('./mime-types'),
	{ app, protocol } = require('electron'),
	{ URL } = require('url'),
	{ readFileSync: read } = require('fs'),
	{ _resolveFilename: resolve } = require('module');

	// Should only be called after app:ready fires
	if (!app.isReady())
	return app.on('ready', () => createProtocol(...arguments));

	// Normalize standard URLs to match file protocol format
	normalize = !normalize
	? url => new URL(url).pathname
	: url => new URL(
	url.replace(/^.?:[/]/, `file:///`) // `${scheme}://./`
	).pathname.replace(/[/]$/, '');

	protocol.registerBufferProtocol(
	scheme,
	(request, respond) => {
	let pathname, filename, data, mimeType;
	try {
	// Get normalized pathname from url
	pathname = normalize(request.url);

	// Resolve absolute filepath relative to mainModule
	filename = resolve(`.${pathname}`, mainModule);

	// Read contents into a buffer
	data = read(filename);

	// Resolve mimeType from extension
	mimeType = mimeTypeFor(filename);

	// Respond with mimeType & data
	respond({ mimeType, data });
	} catch (exception) {
	error(exception, { request, pathname, filename, data, mimeType });
	}
	},
	(exception) =>
	exception && error(`Failed to register ${scheme} protocol`, exception)
	);

	}

	module.exports = createProtocol;
	<!DOCTYPE html>
	<html>

	<head>
	<!-- Needed if not loading page from app://./index.html -->
	<base href="app://./" />

	<script type="module" src="app:test-module.mjs"></script>
	</head>

	<body>
	Check the console!
	</body>

	</html>
	const { app, protocol } = require('electron');

	// Base path used to resolve modules
	const base = app.getAppPath();

	// Protocol will be "app://./…"
	const scheme = 'app';

	{ /* Protocol */
	// Registering must be done before app::ready fires
	// (Optional) Technically not a standard scheme but works as needed
	protocol.registerStandardSchemes([scheme], { secure: true });

	// Create protocol
	require('./create-protocol')(scheme, base);
	}

	{ /* BrowserWindow */

	let browserWindow;

	const createWindow = () => {
	if (browserWindow) return;
	browserWindow = new BrowserWindow();

	// Option A — using the custom protocol
	// browserWindow.loadURL('app://./index.html');

	// Option B — directly from file
	browserWindow.loadFile('index.html');
	}

	app.isReady()
	? createWindow()
	: app.on('ready', createWindow);
	}
	const { extname } = require('path');

	const mime = filename =>
	mime[extname(`${filename \|\| ''}`).toLowerCase()];

	mime[''] = 'text/plain',
	mime['.js'] =
	mime['.ts'] =
	mime['.mjs'] = 'text/javascript',
	mime['.html'] =
	mime['.htm'] = 'text/html',
	mime['.json'] = 'application/json',
	mime['.css'] = 'text/css',
	mime['.svg'] = 'application/svg+xml';

	module.exports = mime;
	const message = 'Hello World!';
	console.trace(message);
	export default message;