- Note: this is a continuation of How to embed HTML5 into a native Mac OSX app.This tutorial uses Xcode Version 4.0.1. So having gone through the first tutorial, you should now have a bare-bones native OSX application running your HTML5 program.
- React primitives render to native platform UI, meaning your app uses the same native platform APIs other apps do. Many platforms, one React. Create platform-specific versions of components so a single codebase can share code across platforms. With React Native, one team can maintain two platforms and share a common technology—React.
Facebook Supported, Community Driven
Facebook released React Native in 2015 and has been maintaining it ever since. https://yellownm419.weebly.com/blog/how-to-end-apps-on-mac.
In 2018, React Native had the 2nd highest number of contributors for any repository in GitHub. Today, React Native is supported by contributions from individuals and companies around the world including Callstack, Expo, Infinite Red, Microsoft and Software Mansion.
Our community is always shipping exciting new projects and exploring platforms beyond Android and iOS with repos like React Native Windows, React Native macOS and React Native Web.
https://yellownm419.weebly.com/blog/cold-turkey-mac-app. React Native is being used in thousands of apps, but it's likely you've already used it in one of these apps: How to stop syncservicesagent app on mac.
The app performs well on both platforms and I think most users would be unable to differentiate it from a 'proper' native app. I was able to reuse the vast majority of view-model code from the HTML5 app and managed a reasonable amount of view code-sharing between the two platforms. There are two areas you can help. If you code in C try to implement features that are only supported in one platform or two. We need all three major platforms to work (Mac, Linux and Windows). If you are professional in Javascript and Node.js then you can help us by implementing JS wrappers for C APIs.
and many more.
Our game Onslaught! Arena was only available on the Chrome Webstore when we first launched it. We recently announced that we had also launched the game on the Mac App Store, using the exact same source code. Isn't HTML5 awesome?
Many of you expressed interest in how to embed a WebView into a Mac app, and as promised, here's a detailed tutorial.
- Download Xcode onto your Mac. I was able to download it from Apple but it's also in the Mac App Store for $4.99, so your mileage may vary.
- Run Xcode. Mine is located in
/Developer/Applications/Xcode.app
. - Make a new project. This can be done by using the menubar: choose
File / New Project.. / Mac OS X / Application / Cocoa Application / Choose ..
then select the folder to save your project into. I'll use WebViewExample as the project name in this tutorial (but you can use whatever you want). - In your Xcode window, under
Overview / Groups & Files
, expandWebViewExample / Frameworks
by clicking the arrow icon. - Right-click Other Frameworks and select
Add / Existing Frameworks.. / Webkit.framework / Add
. - On the same level as Frameworks, expand Resources by clicking the arrow icon.
- In a Finder window, locate your HTML5 folder (the folder containing your
.html
files, etc.) and drag it into this Resources folder in Xcode. Make sure to choose Create Folder References for any added folders. - On the same level as Resources, expand Classes by clicking the arrow icon.
- Select WebViewExampleAppDelegate.h which will open it for editing in the right column.
- Edit the file to look like this:
- Now select WebViewExampleAppDelegate.m for editing. Edit the file to look like this: Note: in the line
NSString *htmlPath = [resourcesPath stringByAppendingString:@'/htdocs/index.html'];
, change the string '/htdocs/index.html' to your game's.html
file. - Under Groups & Files, select WebViewExample. Then, in the list to the right under 'File Name', double-click MainMenu.xib (English). This will open Interface Builder (which should be located in
/Developer/Applications/Interface Builder.app
). - In Interface Builder, find the Library window and select the Objects tab.
- Scroll down to find a row labeled 'Web View - A Coca WebView' (hint: you can type 'webview' into the text box at the bottom of this window to filter the results) and drag it into the WebViewExample window. (another hint: you can resize it and its containing window to whatever sizes you want. More info on this in future tutorials.)
- Find the 'MainMenu.xib - English' window and double-click Web View Example App Delegate.
- Find the tools window (the one with six icons at the very top, it should be labeled 'Web View Example App Delegate Identity'). Switch to the 'Connections' tab (by pressing the second icon from the right -- it's a blue circle with a white arrow inside). Look under 'Outlets'. There should be only one row labeled 'window'. You'll come back to this in a moment.
- Go back to Xcode and press the Build and Run button (or press command+return on your keyboard).
- Go back to Interface Builder. In the 'Outlets' section from before, you should now see a row labeled 'webView' with an empty circle to the right of it. Press and hold your mouse down inside this empty circle. A blue line should begin to follow your mouse. Drag this blue line into the WebView object that you dropped into the WebViewExample window earlier. (When you hover over it, it should highlight in blue.) Release the mouse button and a connection should be established (this enables communication with your WebView).
- Save the file (
File / Save
or command+s). - Return to Xode and Build and Run. You should see your app running inside the window that opens.
Native Mac App Html5 Tutorial
This example project is available on our GitHub page (I've included my old game Spacius! as an example). You can also download the generated WebViewExample app directly.
I'll post another tutorial soon on how to make a more complete app (EDIT : now available here!), including adding icons, enabling
localStorage
and building a bridge from JavaScript to Objective-C. Follow us on Twitter to get notified when we publish that tutorial.Web App Html5
Could you get it to work? Any steps I could change to make things easier to understand? Please let me know in the comments.