Meteor Desktop Splash Screen

Travis AppVeyor CircleCI

A nice splash screen for you Meteor app on desktop! (and an update screen too!)

Usage

In your .desktop/settings.json add this package to your plugins list:

{
    "plugins": {
       "meteor-desktop-splash-screen": {
            "version": "0.5.0"
        }
    }
}

Now place your logo in .desktop/assets/splashScreen.png. It should be a png with transparency. On Linux this does not look so nice because transparency is not supported in Electron out of the box.

Settings

You can pass custom settings to the plugin, for example:

{
    "plugins": {
       "meteor-desktop-splash-screen": {
            "version": "0.5.0",
            "style": { 
                "box-sizing": "border-box",
                "border": "5px solid black",
                "border-radius": "5px"
            },
            "imagePath": "mySplashLogo.png",
            "windowSettings": { "width": 640, "height": 480 },
            "clickThrough": true,
            "updateScreen": true,
            "updateScreenSettings": {
                "imagePath": "updating.gif",
                "windowSettings": {
                    "width": 400,
                    "height": 300
                },
                "clickThrough": false,
                "style": {
                    "append": true,
                    "background-size": "auto"
                }
            }            
        }
    }
}

Note that imagePath should be relative to assets directory in your .desktop.

Here is a definition of what can be set:

/**
 * @typedef {Object} PluginSettings
 * @property {boolean} enabled                  - is splash screen enabled
 * @property {string}  windowTitle              - title of the window that shows splash screen -
 *                                                it defaults to the `name` from settings.json
 * @property {string}  imagePath                - path to the image relative to the .desktop dir
 * @property {Object}  style                    - style of the html body that displays the image
 * @property {Object}  windowSettings           - settings passed to BrowserWindow
 * @property {boolean} clickThrough             - enables window click-through [true by default]
 * @property {boolean} updateScreenOnDesktopHCP - true by default, shows update screen after app
 *                                                restart triggered by desktop HCP update, otherwise
 *                                                normal splash screen will be used
 * @property {boolean} updateScreen             - false by default, enables hot code push update
 *                                                screen
 * @property {boolean} updateScreenProdOnly     - true by default, shows the update screen only in
 *                                                production build
 * @property {Object}  updateScreenSettings     - object in which you can override `windowTitle`,
 *                                                `imagePath`, `style`, `windowSettings`,
 *                                                `clickThrough` for `style` and `windowSettings`
 *                                                you can set `append` fields to true if you want
 *                                                to merge the settings and append/override them
 * @property {boolean} debug                    - enables devTools, makes the window remain open,
 *                                                sets `resizable` and `alwaysOnTop` to false
 */

debug can also be set at runtime by setting METEOR_DESKTOP_DEBUG environmental variable.

If you have an icon set for the window in your settings.json it will be automatically used for splash screen's window - no need to set it here.

If you want to disable the splash screen temporarily for any reason you can use the METEOR_DESKTOP_NO_SPLASH_SCREEN env var.

Hot code push update screen

Place your update screen in .desktop/assets/updateScreen.png and tweak necessary settings. The update screen receives all the settings from the splash screen but you can override them in updateScreenSettings. Also for style and windowSettings you can set append field to true if you want to merge those instead of overriding.

• desktopHCP - the same update screen is shown when the app is restarted after desktopHCP, you can however turn it off and show the splash screen instead by setting updateScreenOnDesktopHCP to false

Contribution

PRs are always welcome. Be sure to update the tests.

For smooth developing process you need to open two terminals. In the first one type npm run build-watch and in the second npm run test-watch.

Tests are run by AVA.

Changelog

• v0.5.0
  • update screen is now disabled by default while developing, to override use updateScreenProdOnly: false
• v0.4.3
  • reverted workaround as it seems the window size issue is fixed in electron 2.0.2
• v0.4.2
  • fix for the workaround messing with fullscreen: true
• v0.4.1
  • workaround for meteor-desktop#173
  • the plugin is now transpiled in babel7
• v0.4.0
  • update screen functionality added
• v0.3.0
  • debug mode added - debug field added to PluginSettings
  • fixed splash screen not being shown when building and installing with NSIS and 32bit arch
• v0.2.1
  • fixed incorrectly released 0.2.0 (not all changes were included)
• v0.2.0
  • clickThrough field added to PluginSettings - allows to disable splash screen window click-through which was enabled by default so far
  • the resultant generated splash.html is now saved to userData instead of application directory (fixes permission problems when installing for all users with NSIS)
• v0.1.0
  • window is now click-through enabled
  • fixed #3
• v0.0.31 - fixed white background blinking before splash screen image load

Roadmap

• [ ] support different settings for different platforms