I am building React Native application with integrated AppCenter SDKs (analytics, crash reporting, CodePush for in-app updates). This application is only a 'wrapper' for our online web presentation. The requirement is to make it offline-first with possibility to update the wrapper or web presentation.
My idea was to attach web presentation files to React Native project and WebView with local HTML source. BUT - it works only in emulator. React Native packager (or bundler) is possible to render full HTML file with all it's internal dependencies (JS, fonts, CSS, other assets). Like this:
import htmlSource from './presentation/index.html'
<WebView
source={htmlSource}
style={styles.webview}
/>
This works fine on emulator, but when I create a production build, JS bundle does not contain any HTML dependencies so presentation is only raw HTML without styles and any other assets. So I am not able to render full presentation with WebView. Creating CodePush release (for in-app update) is the same - without assets.
Do you have any ideas how to make this working? I need to be able to render presentation when device is offline but when is connected, be able to update it.
We do not want to make a full deploy process to App Store, because of its long review/verify process.
Why it works on emulator but in production build it does not work? Is it possible to make a bundle different way to attach all HTMl file dependencies? Or is it possible to offline-cache the WebView content if I point to URL address?
Thanks for any ideas.
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/index.ios.jsbundle --assets-dest release_ios/
then drag your local css、assets... to assets
Related
I have been reading a book on React Native that builds a simple React Native App for IOS in the first few chapters. When compiling and running the project in Xcode, a packager runs in the background and I can also see my app trying to connect to local host.
My understanding is that React Native converts JSX elements to platform specific views. So my question is why does the App need to connect to a server and what is the purpose of the packager running in the background?
Also, how is running the app on an Xcode simulator different from deploying it on the app store?
I have tried to look online for answers, but no one has addressed them. It seems everyone is taking it for granted that all this is obvious.
After looking for an answer, I stumbled upon the following guide from Facebook that answers a different question but also addresses mine indirectly.
So apparently, the localhost is a development server used to link your javascript code to the app, which you use if you are testing on a physical device or a simulator. So the question that comes to one mind after reading this is why not bundle that javascript code with the compiled IOS files? Well, it is best to keep them separate because it enables you to simply change your javascript code from your computer and have it automatically sync with your IOS app.
Now, when it comes to deploying to the app store, you will need to bundle the javascript code and remove the implementation part where it connects to a localhost, which, again, is used for debugging purposes.
You answered your own question it appears! In development mode, the JavaScript bundle is served from the react-native packager server on your machine.
When making a release for the App Store and Google Play, the JavaScript is minified and bundled into the app file (.ipa/.app for iOS, .apk for Android).
Running the app in release mode is possible from Xcode. Depending on how your project is set up, release mode could be a different target, a different scheme within one target, or a build configuration within a target's scheme. For more on iOS targets/schemes, see: Xcode: What is a target and scheme in plain language?
The Electron framework from GitHub has a feature that lets you automatically update your app by using some server utility called Squirrel. What I am wondering is whether an Electron app can simply just update itself without depending on any server utility. Since an Electron app is basically a web-based app using HTML and Javascript, couldn't you just create an "empty" app that has no UI or code other than some bootup Javascript code that downloads the entire UI and other scripts to run the app?
I am creating a new html application using kendo ui. It is calling the web services to get the data and the ui is rendered using Kendo UI. I want this app to be published as ios app.
Is it possible to publish this app directly as a ipad / iphone app ?
Thanks,
Sachin
I thought this information can be useful to someone who is trying to achieve the same thing.
Phonegap Build is the online tool , that allows you to publish html apps as ios , android or windows applications.
All you need is js , css and html pages of your applications with a valid and well formatted config.xml file. You can upload the zip file with all these files and this portal will build the apps for all 3 platforms and will allow you to download the .ipa, .apk and .xap files.
Thanks.
I'm coming behind another developer who built a PhoneGap/Cordova HTML 5 application, currently only targeting IOS. Admittedly, I have zero experience with Cordova and hybrid mobile apps.
I can open up the XCode IDE and run the application and I can see the web page (application) load up in the iPad emulator, so long as I have his Node.js application running.
I guess I'm confused about the context in which the actual index.html that makes up the HTML 5 application runs. Does it run on the iPad under a mini web server (http://local or http://localhost) or does the index.html run on a file system path (something like file://path-to-file/index.html)?
I've used Icenium (Telerik AppBuilder) and created an empty project for which I copied all the HTML 5 code into and ran it. Upon inspecting/debugging the page in the emulator, I see that the page is being served up with a base URL of http://local.
Lastly, I simply tried opening the index.html by double-clicking it and running it in the browser (file:///...builds/ios/www/index.html), and the application didn't work
In summary, as long as I run the website in an emulator, the application loads and runs file, but it won't run loading it from the file system.
My assumption is the scripts are expecting an http base URL and the file:/// url is throwing it off. Does this sounds like a reasonable explanation?
Do Cordova apps run the HTML 5 apps under HTTP?
Thank you.
they run on a file system path (something like file://path-to-file/index.html)
if you are using something from the phonegap API it won't work on a desktop browser
I'm building an app for iOS and android using sencha touch 2.3.1 (using sencha architect 3 as my IDE if that's useful to know) and I want to be able to play video inline, as opposed to an embedded video that opens up the native video player after the user taps on it. A perfect example of the functionality I'm after would be the Vine app (at least for iOS, I haven't looked at it on android), videos simply play right there on the page without the native iOS video player taking over.
I'm aware of the allowsInlineMediaPlayback property of UIWebView, but I have no clue how to set that, or even whether I can, since I'm not building a native app in xcode (in fact I have no experience doing so, this is my first attempt at building any sort of mobile application).
How do you plan to package your application to run on a mobile device? The html/js/css what you are creating needs to be packaged on some way to have a mobile app. You can use sencha cmd for that but phonegap is sort of more popular for that. If you will use phonegap then you can set this in the config.xml. See http://docs.phonegap.com/en/2.2.0/guide_project-settings_ios_index.md.html
I managed to get this working by installing cordova on my machine, then running the
sencha cordova init
command on my sencha project folder. After that I simply made sure allowsInlineMediaPlayback was set in my cordova config and that my video tag/object in Architect had the webkit-playsinline attribute set to "1".
If you're interested I am still able to continue my normal development and build workflow in Architect (Architect is now compatible with Cordova, though make sure you add
{
"path": "cordova.js",
"remote": true
}
to your app.json manually. Note you only need that entry in the js section of your app.json and DO NOT NEED THE ACTUAL CORDOVA.JS FILE TO BE IN YOUR PROJECT FOLDER, Architect will handle this when you run your build command).