@dimensional-innovations/electron-asset-loader

electron-asset-loader allows you download assets to the local file system and then access them through a custom scheme. This can help improve the performance of applications that have multiple or large files that need to be downloaded since they can be downloaded on startup and then be served from the local filesystem.

Getting Started

Install

Make sure you have @dimensional-innovations private package repository access, more info here: https://gitlab.com/dimensional-innovations/di-handbook/-/blob/master/gitlab-packages/gitlab-packages-setup.md Add the package using yarn or npm:

yarn add @dimensional-innovations/electron-asset-loader

or

npm install --save @dimensional-innovations/electron-asset-loader

Setup & Usage

In background.js or whichever file is used for main, call initAssetLoader to setup the custom scheme and handlers.

import { initAssetLoader } from '@dimensional-innovations/electron-asset-loader/dist/main';
import { app } from 'electron';

app.whenReady()
  .then(() => {
    initAssetLoader();
  });

Then in the render process call preloadAssets to download the asset and get the new url to use.

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { preloadAssets } from '@dimensional-innovations/electron-asset-loader';

export default defineComponent({
  setup() {
    const videoUrl = ref<string>();

    onMounted(async () => {
      videoUrl.value = await preloadAssets('http://localhost:3000/static/video.mp4');
    });

    return {
      videoUrl
    };
  }
})
</script>

<template>
  <video v-if="videoUrl" :src="videoUrl" autoplay loop />
</template>

You can also call preloadAssets with with multiple urls.

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { preloadAssets } from '@dimensional-innovations/electron-asset-loader';

export default defineComponent({
  setup() {
    const videos = ref<Array<string>>([]);

    onMounted(async () => {
      videos.value = await preloadAssets([
        'http://localhost:3000/static/video1.mp4',
        'http://localhost:3000/static/video2.mp4',
      ]);
    });

    return {
      videos
    };
  }
})
</script>

<template>
  <template v-for="url in videos">
    <video :src="url" autoplay loop />
  </template>
</template>

@dimensional-innovations/electron-background

If you are using the init script from @dimensional-innovations/electron-background, you can add the following in your main file to setup this package:

import { initAssetLoader } from '@dimensional-innovations/electron-asset-loader/dist/main';
import { init } from '@dimensional-innovations/electron-background';

init({
  ...
  plugins: [
    ...
    { afterReady: async (context) => initAssetLoader({ log: context.log }) },
    ...
  ]
})

Api Reference

initAssetLoader

The following options can be passed to initAssetLoader

scheme

The custom scheme to use to serve the assets. This defaults to "assets". Note that if this provided, the new scheme needs to passed to preloadAssets as well. For example:

initAssetLoader({ scheme: 'videos' });

preloadAsset({ key: 'testVideo', url: 'http://localhost:3000/static/video.mp4' }, 'videos');

assetDir

The path to the directory to save the downloaded assets in. This defaults to an "assets" folder in the userData directory.

preloadAsset

The following options can be passed to preloadAssets, either as a single object or as an array to load multiple files. When a string is passed to preloadAssets, the string is treated as the url and a unique key is generated automatically.

key

The unique key used to identify the asset.

url

The url to download the file from.

overwrite

Indicates if the local file should be replaced. If true this will cause the file to be downloaded again, even if it already exists. Defaults to false.

scheme

The scheme used to serve the asset. This is only required if a custom scheme was used when initializing the asset loader.

onProgress

As an asset is downloaded, a progress event is raised to share how much of the asset of the has been downloaded. onProgress can be called to register a callback for this event.

clearAssets

Removes all assets that are not currently loaded through preloadAsset.

scheme

The scheme used to serve the assets. This is only required if a custom scheme was used when initializing the asset loader.