I'm currently toying around with Sencha Touch 2.2.1 and am trying to get it to run offline using an HTML5 cache.manifest. Anyone know how to get this to work? I can only find old guides from the last version which no longer seem to work. After some fiddling I have my manifest as follows:
CACHE MANIFEST
index.html
app.js
touch/microloader/development.js
But this seems to throw errors in the development.js script when it attempts to send fetch the app.json file. Are there some Sencha settings I have to adjust for offline mode? Thank you for your help.
After some hunting around it seems this feature is present in Sencha Touch 2.0 but still a bit incomplete. To get it to work, do as follows:
You must have the Sencha command line installed (which you probably
already have since it's required to make a Sencha project in the
first place).
Navigate to your project's parent directory in command line
Use the sencha app build production command to "compile" your project into a single file
Navigate to your production directory in YourApp/build/YourApp/production
Chane the extension of cache.appcache to cache.manifest
Edit the index.html file's html tag so that manifest="cache.manifest"
Ensure your server is configured to serve .manifest files correctly
Now your production code should have a working cache manifest. Note you only need to change the extension so that the app works on iOS, it seems to work in browser (or at least Chrome where I tested this) with the .appcache extension.
Compiling to production appears to be the only way to generate a cache manifest file but you can use this same file in a testing build if you don't want all the code minified for debugging. Of course you'll have to copy your manifest over and ensure it's referenced in your testing build's html tag.
All in all Sencha clearly needs to update their documentation here but I'm glad I found this out. I only tested this with a super basic, static, two page application. Hoping it scales decently.
Instead of changing manually your production package, you should change in app.json lines after 'appCache'. Here is what will be generated by Sencha CMD and will work just fine after running sencha app build production.
You can see a live example here https://github.com/flrent/ConfMate/blob/master/app.json#L79
Related
I have the following query. When deploying a React app, what is being deployed is the .js and .css bundles produced By Webpack. However, by using Chrome dev tools under Sources tab, I am able to see all the source code - every single file being used during development. So, the question is how is that possible and who is responsible for that?
Moreover, it seems Chrome debugger has some issues with these source files e.g. skips lines when debugging using F10, cannot recognize some variables in watch window etc. At the same time, everything works fine locally during development. I suspect the second question has to do with the first one. Do I miss something?
Webpack uses plugins which "map" your JS for the devtools, you can read more about it here.
I use Phonegap Desktop and Phonegap Developer app for a while now. This is really interesting for quickly testing my development.
But I'm facing a limitation with the embedded barcode scanner which is displaying the camera display in full screen.
I need to embed the camera display into a container so I have space for displaying information in the same time.
After searching for a while, I've discovered the Scandit SDK for PhoneGap was the only plugin which allows cropping the camera display.
I spent a lot of time trying to implement Scandit, but no success. At least I can build the app, but when using it, scanner is not working...
Here are the steps I've followed:
clone the PhoneGap Developer project from Git
Install using npm
add ios platform
open the xcode project file
build the application and run it on device
=> At this time the PG Dev is running well and my application is working fine
Then, i continued:
remove all reference to the default barcode scanner plugin
build the application and run it on device
==> PG Dev still working fine and my application is working fine
Next steps:
clone the Scandit phonegap plugin from Git
download the Scandit SDK from my scandit account
put the SDK into the cloned scandit phonegap plugin
modify the plugin.xml to change the path to the bundle and framework (mismatch of version name in the path)
<resource-file src="src/ios/scanditsdk-community-ios_4.16.1/ScanditBarcodeScanner.bundle"/>
<framework src="src/ios/scanditsdk-community-ios_4.16.1/ScanditBarcodeScanner.framework" custom="true"/>
copy bundle and framework into the correct folder of scandit
modify the config.xml to include reference to Scandit and set the spec attribut to the version of the SDK
build the application and run it on device
==> PG Dev still working fine and my application is working fine (it doesn't use scandit for the moment)
Next steps:
Remove my project from PhoneGap desktop
add Scandit Sample project to PG Desktop
I used the "Continuous Scaled/Cropped" example from there: http://docs.scandit.com/4.12/phonegap/cordova-examples.html
add my App Key for the license
launch my PG Dev app on my device and download the project files
==> PG Dev is running fine and download the Scandit Sample App.
But the app doesn't work. When clicking on the scan button, nothing happends..
After some investigation, I found that I ran through an exception on Scandit class.
Adding a try on the command 'Scandit.License.setAppKey' allowed me to report in the PG Desktop log the following error:
ReferenceError: Can't find variable: Scandit
Adding this try/catch made the app raising an exception at the next line:
var settings = new Scandit.ScanSettings();
After searching the web about my error, and some posts were suggesting to manually add the framework and bundle into xcode.
So I did it by drag&droping the framework and bundle into the framework folder of the xcode project.
But when I try building my project, it is failing with many errors...
To solve it, I had to had manually all the scandit plugin files (*.h and *.m) into my xcode project.
All previous errors have been solved, but new ones appeared.
This was due to some other missing native ios frameworks...
Once these framework added, all errors were solved and I managed to successfully build the application.
But when running it, I'm still having the error: "ReferenceError: Can't find variable: Scandit"
I'm now running out of idea..
What did I do wrong?
Is there anyone having managed to build a PG Desktop with Scandit embedded?
Thanks.
Sorry for this long post, just tried to be the more precise I could be.
The issue here is two fold. First you need to be aware that the Scandit Barcode Scanner plugin makes use of native code and can therefore not be used in the Phonegap Developer app, as the only thing transmitted to it is your html/css/javascript and the javascript part of the plugin. To also include the native parts of the plugin you have to build and deploy the project yourself. As you are trying to build the XCode project it seems like you are now doing this.
The second part is that you are way overcomplicating the adding of the plugin. There is no need for you to manually clone the git repo, add our libraries, adjust paths in the plugin.xml etc. You can directly download the entire plugin as a zip from your account at scandit.com where the library is contained and the plugin.xml is correct. After that you can simply add the plugin to your project through the CLI (also see our documentation for this at http://docs.scandit.com/stable/phonegap/cordova-integrate.html) and there is no need to do anything manually unless you are using a very outdated Phonegap version that fails to properly handle the plugin.xml. Doing it the automated way with our properly prepared plugin zip will remove most error sources, please try it that way.
Thanks #moritzha. It helped me finding the solution.
I followed this doc at the beginning but it was not working.
After adding the plugin and building the application, I never managed to see it in my xcode project.
I took the opportunity of changing my mac to restart everything from scratch, and after many tries I found where I was wrong.
In fact, the documentation provided by scandit is missing one step.
The command ' phonegap plugin add < path to downloaded and unzipped plugin > ' is doing half of the job.
The command is correctly copying the plugin files to my project but it is not updating the config.xml.
So before building your application, you have to edit the config.xml located at the root of your project folder.
You need to manually reference the plugin with the following:
and replace the x by the version of the sdk you will use.
Once the config.xml updated, you will be able to build the app for your targeted platform.
I now have my own version of the Phonegap Developer App with the Scandit plugin in place of the default barcode scanner plugin. And it works perfectly.
This plugin is awesome!
PhoneGap Developer App version: 1.7.2 (taken on Github)
I built my polymer project and deployed it with the firebase command. I followed the instruction on the polymer site. In Chrome on my Mac it works, but on my mobile(Chrome and Safari) and Safari on my Mac it display an empty page.
Can anybody help me out?
best regards
UPDATE: the dependency problem has been fixed with v0.16.0 which deployed this evening 8/24/2016. I have kept the below workaround just for reference.
This is a known issue: https://github.com/Polymer/polymer-cli/issues/347
includeDependencies stipulated in polymer.json is not being processed.
Here's the remedy for now:
The 'polymer build' process is not including the polyfill in the build even when you include it in the polymer.json dependencies.
This polyfill is necessary for browsers which do not support web components.
Therefore until it is fixed it needs to be added manually...
After running 'polymer build':
open the app's bower_components folder
copy the webcomponentsjs folder
open the build folder
paste the webcomponentsjs folder in the bundled/bower_components and unbundled/bower_components
run firebase deploy
(Do this for all dependencies you require.)
I am building a sample react native application. Currently i am running it using the node server.Node server is serving the js file.
You can see this in following screenshot:
I want to shift to the option2, for this, if there is any change in the js file, i need to run the curl command manually.
Is there any alternative for this?
AFAIK there's nothing in place and this is work in progress. See:
https://github.com/facebook/react-native/issues/12
We plan on putting in some sort of build step that "compiles" the JS
source directly into a resource file in the app bundle. Obviously in
production you wouldn't have a server running nearby.
There's another bit of discussion here.
At the moment I think you're stuck with the curl option.
All this does is packing all your JavaScript together and writing it into a single file.
Option 1 has a small http server running, providing the latest packed file when you request it.
Option 2 takes the file from the local disk.
You can setup a tool that looks watches your project files and repacks everything if you make changes.
You can do this by yourself, using the packaging tool shipped with react-native (react-native bundle [--minify]) and re-run it everytime things changes using gulp (and gulp-watch).
Also you can use webpack as your packaging tool and use the --watch option. (see example)
We have an app that was not initially created with Sencha Cmd.
While we will eventually restructure the app to adhere to the structure that works best with Sencha Cmd, for now we just need to know the steps to deploy the app to production in our case.
1) For example, I've heard we need to minify the code by building with Sencha Cmd. Can we do that even if our app was not initially created using Sencha Cmd?
2) I've also heard that we can use Sencha Cmd to ensure that the minified file only contains the classes that are actually used by our application (even reducing the number of ExtJS core classes included). Is that true and if so, can we do that even if our app was not initially created using Sencha Cmd?
3) Anything else to deploy our app to production, especially considering our app was not initially created using Sencha Cmd?
Thanks much in advance!
1) We can deploy & compile our application , even if we have not created the project using sencha CMD. We have to follow the standard application structure given in their tutorial/docs
2)Yes by compiling our js files using sencha compiler/sencha cmd minifies our code to a single file say xyz.js file, so in webapps folder only one file is needed not all other js files containing src code also the import statement in some parent jsp files need to be updated accordingly, instead importing "app.js" . By this process the performance is upgraded as only required/used components are complied.
Note : While compiling our src files,If any component say button,grid etc in any file is used without mentioning its xtype in 'requires[]' field in that particular view file then errors are thrown which are very difficult to track, So make sure all requires[] are updated.