Note that the application menu is hidden by default for a minimal UI. You can press the alt keyboard key to access it. How it works. A template app with the appropriate plumbing is included in the./app folder. When nativefier is run, this template is parameterized, and packaged using Electron Packager. May 29, 2019 Metaphorically, Flotato uses the Mac’s native WebKit engine, so, in theory, it should be much less onerous on your processor and RAM than Electron apps or, in some cases, Chrome tabs. Mac developers are reporting that apps made using Electron (which is a framework that allows companies to ship web apps in a native app wrapper) are now being rejected by the automated Mac App Store review process. From a report:The apps in question are getting flagged because of their usage of private API calls. Download the Figma desktop app for macOS or Windows as well as the font installer and device preview apps. Design Prototyping Collaboration Design Systems Plugins What’s New. Enterprise Pricing Customers. UI Design UX Design Prototyping Graphic Design.
1- Create a Bundle ID for your app
Sep 19, 2016 Electron, the technology that powers Avocode among many other apps, allows you to get a cross-platform desktop application up and running very quickly.If you don’t pay attention you will quickly end up in the uncanny valley of apps, though. Apps that don’t feel quite in place among your other apps. This is a transcript of presentation I gave in May 2016 at the Electron Meetup in Amsterdam.
The very first step to be able to send a mac app to the appStore is to create a unique Bundle ID for it:
2- Create your developer certificates
You need two types of certificate as a developer to submit an app to the mac appStore:
In addition to the Mac App Distribution certificate, one also need a Mac Installer Distribution certificate. You need to perform the same steps as previously and select Mac Installer Distribution on step 5.
All your certificates should be ready now. 3- Package your Electron app
It is now time to prepare your app for the submission. You first need to install electron-packager. This module will be helpful to create the .app and package everything we need. To install :
And then run:
Change ELECTRON_VERSION to the correct version of Electron installed in your machine (run “electron -v” if you are not sure).
This will create your appName.app in a new folder named mas-build. This is usually enough if you want to distribute your app. However, a few more steps are required to submit it properly to the appStore. As you can see, you also need the .icns file with the requested icon format. You can check here to see how to prepare the perfect .icns. 4- Sign your app
You need then to sign your app, so everybody knows it’s coming from a trustworthy developer 😉
The codesign command already exists by default on mac, you will use it to sign your app. Run the following command by properly adding the name of your certificate and the correct path to your appName.app. 5-Prepare additional files5.a- Update the Info.plist
Your app is now signed. The next step is to find your appName.app, right-click and select Show Package Contents.
Go to the Contents folder and open the Info.plist file with a text editor (not Xcode). Add the following code
Just before
Here you need to replace TEAM_ID with your teamID, you can find it on your Apple developer account (click Membership then you’ll see a row named Team ID).
5.b- Add child.plist and parent.plist
Create the two following files with the corresponding content:
Replace TEAM_ID by your Team ID and your.bundle.id by the unique Bundle ID of your app (we previoudly used com.domain.appname).
6- Create a .pkg of your app
Create a new file and name it packageAppStore.sh with the following content.
You need to do some changes on this file on the first lines:
Finally, run the following command to generate your appName.pkg :
7- Launch Application Loader and load the .pkg
If you already installed Xcode, you should also have an application called Application Loader. Launch Application Loader and login with your account. You might need to get an app specific password, for this connect to appleid.apple.com and click Generate Passwords… on the APP-SPECIFIC-PASSWORDS section. Enter a Label (for example Application Loader) and copy paste the code to the Application Loader app.
Click Choose and select the freshly generate appName.pkg. This should automatically identify your app based on the Bundle ID. Finish the whole process of uploading your app. 8- Complete your app information
You app build should be available on your iTunesConnect account soon. In the meantime, you need to complete the information about your app. Once done, you can select the build that you want to upload to the appStore and click Submit.
9- Some potential issues
If you submitted the .pkg file but it does not appear on itunesConnect, check your email. If you received something like:
Invalid Signature – The executable at path appName.app/Contents/Resources/app/node_modules/robotjs/build/Release/robotjs.node has following signing error(s): code object is not signed at all In architecture: x86_64 . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.
You need to sign the different modules mentioned in this email. For that, just do as follow for each module:
Voilà 🙂 You can now enjoy some coffee while waiting for the review. Congratulations!
Source: https://electron.atom.io/docs/tutorial/mac-app-store-submission-guide/
We can work together
Share this post on social media:
Electron was first open-sourced in 2014, and gained immediate popularity as a way to build desktop apps using web technologies (HTML+CSS+JS). At the core of its design is the idea of bundling a predictable environment:
These choices offered a lot of value five years ago, but in late 2019 you might choose differently. And these choices are also key to why Electron has a reputation for being unusually resource-hungry. A default blank Electron 8.0.0 application is 164MB to download (66MB compressed), and runs as 4 separate processes consuming 150MB RAM in total.
It’s completely possible that these numbers look fine to you and are satisfactory for your scenario. If that’s the case, good for you! This post is not an attempt to bash Electron, which is a well-run project that people are clearly using successfully. In this post, I simply want to consider what other options we might have.
How light could it get?Mac Ui For Electron App For Pc
What if…
Various Electron-lite alternative projects have already sprung up [1]. Of course, there are also PWAs, but that’s not what this post is about, since PWAs don’t have native access to the underlying OS.
Blazor on Electron
We’ve had a lot of interest in using Blazor to build cross-platform desktop apps. It’s not surprising: combining the performance and productivity of C#/.NET with the familiarity of HTML/CSS UI rendering is powerful and appealing.
So, we published a sample and an experimental package for hosting Blazor on Electron. The key innovation here is that it’s not running on WebAssembly, but rather uses the normal cross-platform .NET Core runtime to achieve full native .NET performance and enable full access to the host OS without any browser sandbox limitations.
You can try this out today. Just note that it’s only an “asplabs” project, as we haven’t yet made any commitment to ship and support this technology.
Blazor on pure webviewMac Ui For Electron App For Iphone
It’s not hard to imagine how a Blazor hybrid desktop app could be slimmed down dramatically further. We could swap out Electron for a pure OS-native web view, reasoning that in 2019, there’s virtually always a good enough one available on your target machine. Plus we don’t really need Node as a cross-platform programming environment, since .NET Core already plays that role for us.
To verify this, I built an experiment called BlazorDesktop. This is very similar to BlazorElectron, and in fact most of the code is a copy-paste from it. Again, it runs on native .NET Core (so not on WebAssembly), but now it’s running on a much smaller rendering stack, without any bundled Chromium or Node.js.
It’s a fully-functional Blazor application into which you can add any native .NET Core-based functionality, and runs as an extremely lightweight desktop app - see below for numbers. Unlike a PWA, it’s not limited to the browser sandbox.
![]()
If you’re interested in trying this out, please note that it’s purely a quick proof-of-concept, and currently is Windows only. Expanding it to be cross-platform wouldn’t be too hard (I’d use something like webview to add Mac+Linux support) but is not something I’m actively doing right now. Send a PR if you’re interested.
The stats
Not surprisingly, this minimal Blazor + webview application is significantly smaller and less memory-hungry than one built on the whole Chromium + Node stack:
One of the neat things about .NET Core apps is that, with a simple switch, you can control whether the publish output bundles its own copy of the .NET Core runtime (a.k.a. standalone), or whether it assumes the runtime will already be installed on the target OS (a.k.a. framework-dependent). This is captured in the first graph above, and you can see it makes a huge difference to the output size, since the Blazor libraries themselves are very compact.
In corporate environments where you know that certain software is already installed, you can safely distribute tiny < 1MB framework-dependent apps, where the same binaries run on any supported OS. But for public distribution, you’d most likely publish a standalone app - generating different binaries for each of Windows, Mac, and Linux users.
Note that about 200KB of the compressed Blazor webview app above consists of Bootstrap styling, so you could drop that if you’re using something else.
What would have to be built to make this viable
As I’ve said, Blazor Desktop is currently just a quick proof-of-concept, built entirely during the waking part of my return journey from NDC Sydney. It would have a long way to go to turn into a viable product.
It would need:
Feedback requested
My reason for writing this is mainly to learn more about how the developer community feels about these technologies. Do you have scenarios for building hybrid desktop apps with .NET+HTML+CSS? Would you be happy to use Blazor with Electron, or do you feel it’s necessary to have something more bare-metal?
Footnote: existing Electron alternatives
Many people have thought about building lighter alternatives to Electron over the years. Various open-source projects now exist, though it’s not clear that any really have the critical momentum for mass adoption. Some of them, like Chromely, eliminate Node and only bundle Chromium. Others, like Neutralino, eliminate Chromium and only bundle a Node-based programming model combined with the host OS’s browser technology. At the ultra-minimal end, webview is simply an abstraction over the idea of a webview: it shows your HTML/CSS in whatever browser technology is built into the host OS, and doesn’t provide any cross-platform programming model of its own.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2020
Categories |