- Electron Mac App
- How To Run Electron App
- Top Electron Apps
- Electron Mac Store
- Electron Web App
- Electron Mac App Store
Electron is excellent.
There's a long history of ways to package HTML and Javascript into an installed desktop app. The result usually feels like a web app detached from the rest of the OS.
6 hours ago Mac users couldn’t launch apps this afternoon after Apple verification server issue. Apps have been loading slow for some people. By Jay Peters @jaypeters Nov 12, 2020, 6:32pm EST. On a Mac, at least, the desktop app is an absolute catastrophe. Has been for at least a year. Cache has to be manually cleared every week or two or it's completely unusable. Even then, it's buggy and slow. Just starting up takes ages on a 2017 iMac. Search takes ages using a 280mbps fibre connection. # for use in npm scripts npm install electron-packager -save-dev # for use from cli npm install electron-packager -g And package or deploy using: electron-packager -platform=win32 -arch=x8664 If you would like to keep it with the Electron Installation, see Application Distribution. Update: Above command might throw an. In fact, the most popular Electron apps (Atom, Slack, Visual Studio Code, etc) display primarily local content (or trusted, secure remote content without Node integration) – if your application executes code from an online source, it is your responsibility to ensure that the code is not malicious.
Electron makes it easy to do better.
Electron exposes lots of deep OS integrations thru simple Javascript APIs, so you can have a single clean codebase instead of having to code against three different C++ and Objective C libraries for Windows, Linux, and Mac.
Using npm and electron-prebuilt, you can also keep your build simple and clean. No node-gyp, no native compilation at all. Things that are a pain in most environments, like installers and automatic updates for multiple platforms, are easy here.
Feross and I used Electron to make WebTorrent Desktop recently. We were surprised by Electron's quality and attention to detail.
Here's a list of things you can do to make your Electron app feel native and pro.
(If you're new to Electron, check out the Quick Start. First things first! This post is for people who already know Electron, but want to make their apps even better.)
- Dock and tray integration
- Notifications
- Menus
- Shortcuts
- Drag and drop
- Crash reporting
- Signed installers for all three platforms
- Automatic updaters for Mac and Windows
- Fast startup
- One-step build
WebTorrent Desktop implements 10 / 10.
How does your app score?
On Windows and Linux, you can minimize to tray.
(You can do it on Mac too, but you probably don't need to since Mac has the dock.)
This is great for running in the background or running automatically on system startup.
If you're making a decentralized app, you probably want to do this to keep your network healthy.
On a Mac, integrate with the dock.
Show a progress bar when the user might be waiting for something to finish.
Show a badge when work finishes while your app is in the background.
Caveat: only some Linux distros support the tray correctly. Check that you're on one of them--otherwise, your users will have no way to quit your program if you hide the window and your tray icon doesn't show up. See checkElectronTraySupport for a workaround.Desktop notifications work on all three platforms. They're really easy to use.
Stay concise. Don't go over 256 characters, or your message will be truncated on Mac OS.
Here's an example with custom sounds: a satisfying 'ding!' whenever a file finishes downloading.
Play sounds using the normal web audio API. You'll want to preload them. Here's a nice way to do that.
Electron gives you nice declarative menus on all three platforms.
You can use them in lots of places: context menus, dock icon menus, tray menus. Most are optional but the one you'll always want to implement is the window menu.
Follow each platform's conventions for what goes where. For example, if you have Preferences, Mac users will expect to click YourApp > Preferences while Windows users expect Window > Preferences and Linux users expect File > Preferences.
If you have a button for something, give it a menu item anyway. Two advantages: it makes your keyboard shortcuts discoverable, and it makes actions searchable under Help > Search on a Mac.
See it in action here: menu.js.
Electron supports two kinds of shortcuts: menu shortcuts and global shortcuts.
Menu shortcuts are great. New users can click around and learn what's available. Power users can use your app very efficiently.
Follow each platform's keyboard shortcut conventions. Electron makes this easy: for example, you can specify 'CmdOrCtrl+O' as the accelerator for Open, and it'll be Cmd+O on Mac and Ctrl+O on Windows and Linux.Global shortcuts work even when your app is not focused. For example, if you're running WebTorrent Desktop in the background, playing an audiobook, while using Chrome in the foreground, you can still use the play/pause button on your keyboard (F8 on Mac) to control WebTorrent.
If you want to let users drag files into your app, you'll need to handle three separate cases.
When someone drags files onto the window of your running app, you'll get the regular HTML5 drag-and-drop events.
When someone drags files onto the icon while your app is running, you'll get a special Electron on-file event.
When someone drags files onto the icon while your app is not running, the OS will run your main process with special command-line arguments. You'll have to handle those.
Electron has built-in Crashpad support so that you can get a report when a process crashes.
You might also want to be notified of uncaught Javascript exceptions. You can do this:
- In the main process with process.on('uncaughtException')
- In the renderer process using window.onerror
Your server will need an API endpoint to save the crash reports. Check out the WebTorrent website code for an example of how to make one.
You must sign your installers. Otherwise, you'll get a scary full-page red warning on Windows that says your app is 'untrusted', and modern Macs in their stock configuration will refuse to run your app altogether.
Here's a build script that does this for Mac and for Windows.
Getting certs:
To get a Mac signing certificate, sign up for an Apple Developer account. It costs $100 a year.
To get a Windows signing certificate, we recommend Digicert. The documentation for Windows app signing is surprisingly bad. If you go with the wrong vendor, they'll ask you to mail them notarized paperwork. That makes it a slow and annoying process to get the cert. Digicert is easier: they just send you a password via Certified Mail, you go to the post office, show your ID to pick it up, and bam, you get your signing certificate.
You do not have to go thru the Mac App Store, unless you want to. If you do, your app will be sandboxed and you may have to change the UX slightly to accommodate the extra restrictions and permission prompts.
You definitely don't need the Windows App Certification Kit. WACK is wack, and also kind of obsolete.
Consider starting an organization to own your project's domain and certs. It looks a lot more legit if a user downloads your app and sees 'Do you want to run this file? .. Publisher: Webtorrent LLC', than if they see 'Publisher: Jim Bob'. There are other advantages as well. In California, starting an LLC costs just a few hundred dollars and a few hours of time.
Keep your signing certificates safe. At a very minimum, they must never be sent via email or checked into a Github repo, even a private one. In fact, certs should never ever be online at all. Store them offline, passphrase-protected. Back them up onto a thumb drive, preferably an encrypted thumb drive, and keep it safe.
Once you get your first million users, your auto updater is basically a botnet with a million nodes. With great power comes great responsibility.
Your app is getting better every week. Remember Flash back in the day, nagging you to Please Upgrade To The Latest Version? Don't be that guy.
Ever since Chrome popularized autoupdaters eight years ago, users have come to expect software to just continuously get better and fix bugs automatically.
Writing your own reliable auto updater is hard. Fortunately, Electron has already integrated with Squirrel, which makes it easy.
Squirrel only works on Windows and Mac.
For Linux, I recommend checking for updates as you would on the other two platforms, and simply popping up a notification if a new version is available:
Here's a bit of code that checks for updates on all three platforms: updater.js
Your server will need an API endpoint to tell the app which version is the latest. This can be really lightweight. You can offload the heavier work of hosting binaries to Github Releases.
Here's our server code for the updater API.
16 years ago, a smart guy named Joel Spolsky invented the Joel Test for whether a software project has its act together.
#2 on his list: Can You Make A Build In One Step?
Yes, you can! Electron makes it pretty easy to automate your build. And you can do it without any fancy tools like Grunt or Bower.
Check out WebTorrent Desktop's build script. With one command, npm run package, we can:
- Run the linter and tests
- Package the app for all three platforms
- Create signed installers for Mac and Windows*
- Create binary deltas for the auto updater
* (Almost. Right now we still need to do the Windows code signing on a separate Windows machine, but there's a bug that should be fixed in the next few weeks that will allow us to build an entire release in a single command on a Mac.)
You want your app to start quickly and smoothly. If it doesn't, it won't feel native.
Check out Spotify, for example. After clicking the dock icon, the window takes a long time to appear. Once it does, it first flashes grey, then some DOM elements appear, then the style changes, then more elements appear. Each time, it reflows, so the elements bounce around.
It feels like a web page loading over slow internet, not like a native app. (Spotify's UI is built with HTML and Javascript, but it doesn't use Electron.)
Make your app load quickly.
Step 1. Measure
Right at the start of our main process index.js, we call console.time('init')
Then, once the window (renderer process) has started and sends us an IPC message saying it's ready, we call console.timeEnd('init')
That gives us a bottom-line number to get as low as possible: the total startup time.
Step 2. Get your DOM right the first time
If you use functional reactive programming, this i easy. What you see is a function of your state object. The state object should be correct and ready to go the first time you render your DOM---otherwise, the DOM might have to change immediately and your app first renders, and the elements will jank around.
In our case, WebTorrent Desktop loads a JSON config file before the first render. This only adds a few milliseconds to our couple-hundred-millisecond startup time.
Electron Mac App
Step 3. Defer loading of big modules
We bisected using console.time() calls to find out which requires() were taking the longest, and cut our startup time almost in half by loading those lazily. They are loaded either the first time we need them or five seconds after app startup, whichever comes first.
Mac app store won't open. Step 4. Colors and CSS
Make sure your window background color, which electron sends down to the OS, matches your CSS background color. Otherwise, you'll see flashes of white when the app is starting and again when you resize the window quickly.
---
Now we're already doing a lot better than a lot of apps. The window shows up quickly and with the correct background color, then a fraction of a second later the UI shows up.
One last improvement: by adding a CSS fade-in, the window shows up and the UI smoothly but quickly fades in, instead of popping up suddenly. Try it both ways---we think this feels better:
1. Make It Native
When on Mac, your app should look and feel like a Mac app. When on Windows, it should feel like a Windows app.
2. Make It Fast
Measure your startup speed. Keep it well under a second.
3. Keep It Simple
Your users don't care if you're using Flux and Redux and React and Bower and Grunt and Less and Coffeescript. Plain npm, plain Javascript, and plain CSS go a long way. Electron supports require() natively, so you don't need Browserify.
WebTorrent Desktop uses no preprocessors at all and no build system except npm. Spend your energy on things that give your users pleasure!
Bruce Lee said it best--
The height of cultivation always runs to simplicity.
Art is the expression of the self. The more complicated and restricted the method, the less the opportunity for expression of one's original sense of freedom.To me a lot of this fancy stuff is not functional.
Happy Hacking!
macOS and Windows code signing is supported. Windows is dual code-signed (SHA1 & SHA256 hashing algorithms).
On a macOS development machine, a valid and appropriate identity from your keychain will be automatically used.
Tip
See article Notarizing your Electron application.
Env Name | Description |
---|---|
CSC_LINK | The HTTPS link (or base64-encoded data, or file:// link, or local path) to certificate (*.p12 or *.pfx file). Shorthand ~/ is supported (home directory). |
CSC_KEY_PASSWORD | The password to decrypt the certificate given in CSC_LINK . |
CSC_NAME | macOS-only Name of certificate (to retrieve from login.keychain). Useful on a development machine (not on CI) if you have several identities (otherwise don’t specify it). |
CSC_IDENTITY_AUTO_DISCOVERY | true or false . Defaults to true — on a macOS development machine valid and appropriate identity from your keychain will be automatically used. |
CSC_KEYCHAIN | The keychain name. Used if CSC_LINK is not specified. Defaults to system default keychain. |
Tip
If you are building Windows on macOS and need to set a different certificate and password (than the ones set in
CSC_*
env vars) you can use WIN_CSC_LINK
and WIN_CSC_KEY_PASSWORD
.Windows¶
To sign an app on Windows, there are two types of certificates:
- EV Code Signing Certificate
- Code Signing Certificate
Both certificates work with auto-update. The regular (and often cheaper) Code Signing Certificate shows a warning during installation that goes away once enough users installed your application and you’ve built up trust. The EV Certificate has more trust and thus works immediately without any warnings. However, it is not possible to export the EV Certificate as it is bound to a physical USB dongle. Thus, you can’t export the certificate for signing code on a CI, such as AppVeyor.
If you are using an EV Certificate, you need to provide win.certificateSubjectName in your electron-builder configuration.
If you use Windows 7, please ensure that PowerShell is updated to version 3.0.
If you are on Linux or Mac and you want sign a Windows app using EV Code Signing Certificate, please use the guide for Unix systems.
Travis, AppVeyor and other CI Servers¶
https://pkyqegi.weebly.com/blog/buy-ipad-apps-on-mac. To sign app on build server you need to set
CSC_LINK
, CSC_KEY_PASSWORD
:- Export certificate. Consider to not use special characters (for bash[1]) in the password because “values are not escaped when your builds are executed”.
- Encode file to base64 (macOS:
base64 -i yourFile.p12 -o envValue.txt
, Linux:base64 yourFile.p12 > envValue.txt
).
Or upload
*.p12
file (e.g. on Google Drive, use direct link generator to get correct download link).- Set
CSC_LINK
andCSC_KEY_PASSWORD
environment variables. See Travis or AppVeyor documentation. Recommended to set it in the CI Project Settings, not in the.travis.yml
/appveyor.yml
. If you use link to file (not base64 encoded data), make sure to escape special characters (for bash[1]) accordingly.
In case of AppVeyor, don’t forget to click on lock icon to “Toggle variable encryption”.
Keep in mind that Windows is not able to handle enviroment variable values longer than 8192 characters, thus if the base64 representation of your certificate exceeds that limit, try re-exporting the certificate without including all the certificates in the certification path (they are not necessary, but the Certificate Manager export wizard ticks the option by default), otherwise the encoded value will be truncated.
[1]
printf '%qn' '<url>'
How To Run Electron App
Where to Buy Code Signing Certificate¶
See Get a code signing certificate for Windows (platform: “Microsoft Authenticode”).Please note — Gatekeeper only recognises Apple digital certificates.
How to Export Certificate on macOS¶
Top Electron Apps
- Open Keychain.
- Select
login
keychain, andMy Certificates
category. - Select all required certificates (hint: use cmd-click to select several):
Developer ID Application:
to sign app for macOS.3rd Party Mac Developer Application:
and3rd Party Mac Developer Installer:
to sign app for MAS (Mac App Store).Developer ID Application:
andDeveloper ID Installer
to sign app and installer for distribution outside of the Mac App Store.Mac Developer:
to sign development builds for testing Mac App Store submissions (mas-dev
target). You also need a provisioning profile in the working directory that matches this certificate and the device being used for testing.
Electron Mac Store
Please note – you can select as many certificates as needed. No restrictions on electron-builder side. All selected certificates will be imported into temporary keychain on CI server.4. Open context menu and
Export
.How to Disable Code Signing During the Build Process on macOS¶
Electron Web App
To disable Code Signing when building for macOS leave all the above vars unset except for
CSC_IDENTITY_AUTO_DISCOVERY
which needs to be set to false
. This can be done by running export CSC_IDENTITY_AUTO_DISCOVERY=false
. Electron Mac App Store
Another way — set
mac.identity
to null
. You can pass aditional configuration using CLI as well: -c.mac.identity=null
.