Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

Electron

Useful links

Electron information

Main vs renderer process

There are two .js files in an Electron app: by default a main.js and a renderer.js.
The main process in the main.js file can display a GUI by creating web pages. Main process creates web pages in Electron.
The renderer process in the renderer.js file is a process runned by each web page in Electron.
So there is one main process and many renderer processes.

In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages allowing lower level operating system interactions.

To access dependencies of the main process in the renderer process you have to use remote:


const { remote } = require('electron');
const updater = remote.require('electron-simple-updater');

Tools for building, updating and publishing

Publishing an app outside the MAS (darwin)

Only team agents belonging to either the Apple Developer Program or the Apple Developer Enterprise Program are allowed to create Developer ID certificates and sign apps or installer packages using them.

Using the electron-builder

Useful links:

Steps:

  1. Generate certificates on the website:
    https://developer.apple.com/account/mac/certificate/distribution.

    "For distribution outside the Mac App Store, you will need the following:

    • The first is a Production > Developer ID > Developer ID Application certificate.
    • The second is a Production > Developer ID > Developer ID Installer certificate."
    (source)
  2. Generate an app bundle ID:
    https://developer.apple.com/account/mac/identifier/bundle/
    and properly update package.json according to the created bundle ID.
  3. Build signed app by disabling the asar property of the electron-builder for a Mac build and by running commands:
    
    sudo spctl --master-disable #disables Mac GateKeeper, after build you can enable it
    npm run build:mac
        
  4. To check signature:
    
    codesign -dv "PATH/NAME.app"
    codesign -vv "PATH/NAME.app"
        
    or:
    
    codesign --verify -vvvv "PATH/NAME.app"
    spctl -a -vvvv "PATH/NAME.app"
        

Using the electron-packager

Only the 3rd step is different. You have to use commands:


sudo spctl --master-disable #disables Mac GateKeeper, after build you can enable it

# EITHER pack your app and sign it both at once
electron-packager . "My App" --platform=darwin --arch=x64 --version=0.35.6 --app-bundle-id="com.mysite.myapp" --app-version="1.0.0" --build-version="1.0.100" --osx-sign

# OR pack your app first then manually sign it
electron-packager . "My App" --platform=darwin --arch=x64 --version=0.35.6 --app-bundle-id="com.mysite.myapp" --app-version="1.0.0" --build-version="1.0.100"
# Code-sign app bundle
electron-osx-sign "My App-darwin-x64/My App.app"

# OPTIONAL: Create installer package for shipping
electron-osx-flat "My App-darwin-x64/My App.app"