- How To Package Mac Os Electron Apps For Windows 7
- How To Package Mac Os Electron Apps For Windows Xp
- How To Package Mac Os Electron Apps For Windows 8
- How To Package Mac Os Electron Apps For Windows 10
Auto updating apps for windows and OSX using electron: The Complete Guide
Runs on Windows XP or later, Mac OS X 10.5+, and Linux systems that use IA-32, ARM or MIPS processors. Compiles JavaScript into native machine codes. Recent technologies like Electron allow you to build a desktop app as you would build for a web browser, but there are very few people who are well versed with the upcoming technology. Sign a Windows app on macOS/Linux Any macOS Target The top-level mac key contains set of options instructing electron-builder on how it should build macOS targets. Run these commands in the terminal in the app folder: # for use in npm scripts npm install electron-packager -save-dev # for use from cli npm install electron-packager -g. Setting productname and electron version. Electron packager looks for a product name in package.json, so lets go ahead and add one.
Updated on November 6, 2017: electronic builder provides the electronic updater module. For details, please refer to quick and painless automatic updates in electron.
Since I have also investigated the knowledge of electron’s automatic update, I will add some remarks (such as some error information of the author and some personal knowledge) on the premise of retaining all the information in the original text.
With electron, you may be able to complete a good desktop app in the blink of an eye and distribute it to users. When you feel as relaxed as a lucky villain, you may realize that you have missed an important point: how do users get the next version? Even the new version adds some excellent features. Of course, they can remove and then re install the app, but isn’t that bad?
When you browse the electron document quickly, you will notice that the document contains the auto updater module, which is just the interface of another framework, squirrel. Squirrel will detect (or trigger) the new version behind the back, download the new version, and automatically update the app when you start or restart it.
But the sad thing is: the actual implementation is not as simple as the document says. Because automatic update works differently on OSX and windows (Linux is not supported at present), and the documents of both are scattered in multiple repositories. I’ve spent a lot of time implementing this feature. So I think it is worthwhile to summarize what I have learned into a tutorial. I hope it can save your time.
![Electron Electron](/uploads/1/3/4/1/134155353/308655179.jpg)
Although everything here should work on both windows and OSX, to reduce the objection, I would like to state that I did this on Mac OS X 10.11, except for building installation packages for Windows systems (on virtual machines). https://treedigital256.weebly.com/mac-app-stop-motion.html.
After transforming Windows 95 into an app back in 2018, Rieseberg decided to turn an entire 1991 Macintosh Quadra with Mac OS 8.1 into a single Electron app. It even includes a number of apps.
If you have any suggestions for improving or updating this tutorial, please contact me on twitter!
Application packaging
Before implementing automatic updates, there is an important step – packaging. I assume that most people already know how to do this with electronic packer, but two things are often overlooked.
package.json
be carefulpackage.jsonAdditional fields for—--productName、authoranddescriptionAlthough these fields are not required for packaging, they will be used in the squirrel installation package for windows.
Code signing is not a necessary step for automatic updates on MacOS. This is a requirement of
Squirrel.Mac
), but this is a very desirable operation. For OSX, you need an Apple Developer certification, and then in the script fieldpack:osx
Replace the following parameters:--sign='Developer ID Application: My Company Ltd (ABCDEFGH10)'
In OSX, you can use theKeychain Access > My CertificatesCheck (Application > Keychain > my certificate, if any).
I didn’t do code signing on windows, but you can take a look at the excellent tutorials on this topic.
For windows, it is recommended to pass all optional parameters of version string for electronic packer, such as company name, product name, etc. Once we generate the squirrel installation package for windows, the application can display the correct metadata in the windows start menu instead of atom’s default information.
Atom Shell is now called Electron。
So let’s get started!
OSX
In OSX, automatic update is done through Squirrel.Mac It is built into electron. This means you just package your app and run it as usual!
Well, not exactly.
Squirrel.Mac The way to work is to determine whether there is a new version by visiting an API “endpoint” provided by you. If there is no new version, the path should returnHTTP 204。 If there is a new version, it expects to receive oneHTTP 200 in JSON format, which contains aCan get the URL of the. Zip file。
PS: “path”, also known as “endpoint”, refers to the specific website address of the API.
After getting the URL, squirrel constructs aapplication/zipTo access the URL, download the file, and then trigger the final event (download complete) to let you know that the update package is about to be installed. For you, everything is automated.
If you’re not sure what the server program should look like, take a look at a super small one below Node.js/Express Service, assuming its directory structure is as follows:
Update service based on node package.json
A simple, for testing Squirrel.Mac Automatically updated express server
This will distribute files from the local file system, but this is not the ideal way to handle them. My suggestion: put these files on Amazon S3.
Amazon S3:Amazon Simple Storage Service
Then you can access the path through electron in the development environment: Open insecure apps mac os.
http://localhost:3000/updates/latest?v=1.0.1
?v=1.0.1Is the version of your current app.
Now that you have the server program and path, it’s very easy to handle the update operation in the application.
In the main process file of electron, the auto updater module is introduced, and then the version of the current system and application is obtained
Then configure the path, which will vary depending on the system (windows and MAC) (as for the reason, see the windows chapter)
Tell electron where to test the new version
autoUpdaterThe module provides events that you can trigger through the rendering process. For more information, see the auto updater documentation page. The decision to implement the relevant interaction depends on how you handle these events (such as errors) and notify the user. But the last thing you should do is:
After putting the above statement in the main process file, the application will restart in the form of the new version. fabulous!
Windows
As you can imagine, automatic update on windows is achieved by Squirrel.Windows 。 But it’s handled in a completely different way from OSX.
And Squirrel.Mac The differences are as follows: Squirrel.Windows You don’t need an API path to detect new versions, it needs a file server, so you can simply drag and drop files onto Amazon S3 bucket. In addition, the squirrel updater is not built into electron, it is a third-party dependency. This means that you need to generate an installer for your packaged windows app so that it contains the squirrel Updater.
Amazon S3 bucket: the data storage structure of S3 is very simple, which is a flat two-tier structure: one is bucket (also known as storage segment), the other is storage object (also known as data element). For details, please refer to Amazon S3 service introduction
The good news: Windows’s installation package and updater run smoothly. Because when you start Setup.exe You will find that installing and starting the app is quick. There is no boring installation wizard and always press “next” and finally “finish”, otherwise it is the same as most windows installers. Of course, it can also generate delta packages, which allows you to perform updates without downloading the entire application, which is really first-class.
Translator’s note: the windows installation package I generated through electronic builder is different from our common software installation interface. There is no installation wizard and click “next”. There is only a GIF animation during installation (the default GIF animation is shown in the figure below). Therefore, the user has no right to choose the installation path. Maybe the author is used to the MAC installation method (the second picture below), so he will find the installation package of windows more cumbersome.
Gif animation displayed by default during windows installation
For the common MAC installation mode, drag “application icon on the left” to “applications on the right” Investing.com app for mac windows 10.
If you want to generate common installation packages for Windows applications that need to click “next” (i.e. user-defined) installation packages, you can use the NSIS program. For details, see this tutorial [teaching] in 10 minutes, learn to use NSIS to package your desktop software – setup package. It’s completely free. 》。 Of course, the premise is still through the electronic packer package program.
NSIS (nullsoft scriptable install system) is an open source installation program under Windows system. It provides installation, uninstall, system settings, file decompression and other functions. As the name suggests, NSIS describes the behavior and logic of an installation program through its scripting language. NSIS’s scripting language has similar structure and syntax to common programming languages, but it is designed for applications such as installers.
The bad news (at least for Mac users): I can’t generate the installation package correctly on OSX, so I recommend that you download a Windows virtual machine (such as VirtualBox, parallels) and install it Node.js 。
How To Package Mac Os Electron Apps For Windows 7
Through electronic builder, I can directly (i.e. not through virtual machine) generate windows installation package in MacOS Setup.exe )。 See here for details.
Assuming that you have configured and set the correct update source, then on the basis of the code in the OSX section above, you need to handle some more Squirrel.Windows Events, which are different from those on OSX. You can see the case. However, there is a simpler way to install the electron squirrel startup NPM module:
Then add the following line at the top of electron’s main process file:
Squirrel.Windows The incident should be dealt with as soon as possible. Obviously, this is the way to go.
Finally, to generate the installation package, we will use atom’s grunt electron installer. Why is it a grunt plug-in rather than a simple command-line tool – I don’t know, but it’s the solution.
Update: the electron team has developed an independent installer packaging tool, electron winstall, which has the same API as grunt task
How To Package Mac Os Electron Apps For Windows Xp
Zip the Win32 folder generated by electron packer and copy it to the virtual machine. Outside this folder, you need to configure the grunt task, which will generate an installation package, so you should first install all dependencies:
Suppose the windows compiled package is placed in aMyApp-win32-ia32Under the folder. Here’s how gruntfile looks like:
It should be noted that if you want to code sign your files and installation packages, you also need to provide all parameters for the task configuration.
After running the grunt task, the./distA bunch of files are generated in the directory
How To Package Mac Os Electron Apps For Windows 8
What you expect to see is similar to the following:
At the next release, the installer will also automatically generate a delta package.
Now, the simplest step is to drag and drop these files to S3 bucket for uploading. The URL then points to the folder (containsRELEASESandnupkgDocument). When the application runs on a Windows system, it sets the URL toupdateFeedParameter (because we implemented it in the previous section of OSX).
Note: there is a problem with the node rcedit module of the installer, which will throw an error when you try to modify some meta information of the. EXE file and replace the default icon. You can check the issue here. Therefore, at present, if you want to modify the icon for the installer file or give it actual data, you may have to manually modify it through ResHacker.
Conclusion
I hope this article can be a good starting point to help and serve every friend who is implementing automatic update for electron application. If you find any missing points or any suggestions for improvement, please let me know on twitter! Also, remember that electron is a fast-growing framework, so make sure you’re reading your current version of the documentation. Electron’s API is also updated frequently.
In addition, bump lab developed an Excel data cleaning tool Xcel based on electron and Vue, and summarized a blog post “Xcel project summary – Performance Optimization of electron and Vue” according to this project. Interested students can click to check oh. Work productiity apps mac.
How To Package Mac Os Electron Apps For Windows 10
The top-level mac key contains set of options instructing electron-builder on how it should build macOS targets. These options applicable for any macOS target.
category
String - The application category type, as shown in the Finder via View -> Arrange by Application Category when viewing the Applications directory.For example,'category': 'public.app-category.developer-tools'
will set the application category to Developer Tools.Valid values are listed in Apple’s documentation.target
String | TargetConfiguration - The target package type: list ofdefault
,dmg
,mas
,mas-dev
,pkg
,7z
,zip
,tar.xz
,tar.lz
,tar.gz
,tar.bz2
,dir
. Defaults todefault
(dmg and zip for Squirrel.Mac).identity
String - The name of certificate to use when signing. Consider using environment variables CSC_LINK or CSC_NAME instead of specifying this option. MAS installer identity is specified in the mas.icon
=build/icon.icns
String - The path to application icon.entitlements
String - The path to entitlements file for signing the app.build/entitlements.mac.plist
will be used if exists (it is a recommended way to set). MAS entitlements is specified in the mas.entitlementsInherit
String - The path to child entitlements which inherit the security settings for signing frameworks and bundles of a distribution.build/entitlements.mac.inherit.plist
will be used if exists (it is a recommended way to set). Otherwise default.This option only applies when signing withentitlements
provided.provisioningProfile
String - The path to the provisioning profile to use when signing, absolute or relative to the app root.bundleVersion
String - TheCFBundleVersion
. Do not use it unless you need to.bundleShortVersion
String - TheCFBundleShortVersionString
. Do not use it unless you need to.darkModeSupport
=false
Boolean - Whether a dark mode is supported. If your app does have a dark mode, you can make your app follow the system-wide dark mode setting.helperBundleId
=${appBundleIdentifier}.helper
String - The bundle identifier to use in the application helper’s plist.type
=distribution
“distribution” | “development” - Whether to sign app for development or for distribution.extendInfo
any - The extra entries forInfo.plist
.binaries
Array<String> - Paths of any extra binaries that need to be signed.minimumSystemVersion
String - The minimum version of macOS required for the app to run. Corresponds toLSMinimumSystemVersion
.requirements
String - Path of requirements file used in signing. Not applicable for MAS.electronLanguages
Array<String> | String - The electron locales. By default Electron locales used as is.extraDistFiles
Array<String> | String - Extra files to put in archive. Not applicable fortar.*
.hardenedRuntime
=true
Boolean - Whether your app has to be signed with hardened runtime.gatekeeperAssess
=false
Boolean - Whether to let electron-osx-sign validate the signing or not.
And all common platform-specific options.