I'm writing an app which house over 1000 small images in the www/images folder in my cordova app (am using Intel XDK for the build). The app needs to check for updates and download images that the user doesn't have, along with other content. I want the new images to be saved to the same folder as the existing images (www/images) and can't find anywhere how to do this. All I find is articles about Cordova saving camera images to gallery/camera roll etc.
The content will be run through and "injected" script which will save it to localStorage. I'm just struggling with the images.
As far as I know, you can't do this. The www folder is part of the app bundle, and is sandboxed to protect it from, well, writing. That's the same answer someone else got here: Cordova Write To WWW Directory (iOS).
You have to use the File API to write to one of the writable file areas available to the app. You can find some examples of how to do that here: https://github.com/johnwargo/apache-cordova-api-cookbook-code/tree/master/chapter10-file.
Some details from the book:
The Cordova File API provides an application with the methods it needs
to interact with the device’s local directory structure. The API
exposes methods an application can use to browse the file system,
read, write, copy, move and remove files. An application cannot access
just any part of the file system, only the temporary and persistent
file storage locations (described below) on a mobile device.
Cordova’s implementation of the File API is based in part on the W3C
File API: Directories and System specification
(www.w3.org/TR/file-system-api). Not all of the capabilities of the
W3C specification have been implemented, but the API provides the
essential capabilities most mobile developers will need.
An application would use this API to read and write files on the
device file system. An application might use one of the many available
storage options for web application to store application data, but
developers can also use the file system to persist application
settings or application data using the file system, writing text files
(in XML or JSON format for example) as needed while the application
runs. Additionally, remember that the Camera (Chapter 3) and Capture
(Chapter 4) APIs write their files to the file system, applications
use the File API to manipulate those files as needed.
Most smartphone provide applications with two different types of file
storage space. To store temporary files, the device exposes a
temporary storage location. For content and data that is integral to
the application’s operation and must remain available after the
application is closed and restarted the application should use
persistent storage.
In general, an application might use temporary storage for transient
data, data that’s written to the file system as part of a memory
management strategy or as swap space when analyzing or manipulating a
large amount of data. With temporary storage, the application can read
from and write to the storage area with impunity, creating and
deleting files as needed within the available storage limitations of
the device. The device OS may automatically empty temporary storage
when the application closes or the device reboots – freeing up storage
space for other applications.
Persistent storage on the other hand is more stable; the device OS
protects it during reboots and when the application closes. An
application’s persistent storage will be emptied by the OS only when
the application is uninstalled from the device.
In the sample application, the application’s UI exposes buttons that
are used to interact with the different file system types as shown in
Figure 10.1. As you can see from the figure, I used jQuery Mobile for
the application’s UI in order to simplify the code and let jQuery
Mobile deal with rendering file lists, transitioning between pages and
so on.
Related
I am developing a website with frontend react and backend as django where users can generate names of files in a particular format. Now this files will be in their local system or their local servers we can say. I need to rename the file and move that to a source folder. Is that possible using a website? I have heard this is possible but now sure how. Anybody knows how this can be done?
Browsers accessing the local files system is considered as a security threat!
Imagine websites having the freedom to access all your files and images!
however for certain use-cases, this can be enabled on the browser itself, to enable websites from accessing file system.
however it is supported by google chrome only (as far as i know) you can use the FileSystem.API you can check this here Can i Use: FileSystem
This is a unique requirement where we have an Universal Windows App which saves some configuration (xml) file in the system storage (app storage). Now, when someone open our web site (web version of same windows app) in the same system, we want to read the xml through JavaScript and render content accordingly. I know accessing file through javascript from browser involves permission issues in reading file.
We have tried setting local storage and access through iframe posting - Failed.
Saving to xml file and then tried to read when someone opens the web site using javascript - Failed.
We have workarounds like save to cloud and read from there. Like save to azure blob storage or SharePoint list/library and then read from there. But, it is specific to user settings, we like to avoid the round-trips and authentication stuff if we saved to cloud.
Any ideas we can achieve or solve this to share the file/content between the browser and windows apps?
-Praveen.
Is there a way to hold a large block of text, or images/videos, embedded in a FirefoxOS app, while directly accessing them from the app (similar to /res/raw/ in Android)? I don't see where the /data/ directory is being accessed in the example app.
There are many ways that you can do this:
Distribute your web app as a packaged app. In this scenario all your resource files are zipped up in a single file, available after install via a URL scheme described in the documentation.
The Application Cache allows you to instruct the browser to download files for offline use. I like Rob Hawkes' utility for generating appcache manifest files.
You can manage the data yourself by downloading the files via XMLHttpRequest and storing the data in an IndexedDB database or on the SD card via the DeviceStorage API.
I think that your best bet is the filehandle API, but more importantly keep in mind that a Firefox OS app is basically a website so you shouldn't be thinking as an android app that can carry it's media and so on.
Good luck
If you want to display images in a website you place images in the same root folder or sub folder. The same thing works with firefox OS.Place your images in your app folder and use them. If you want to use images from the mobile then you can use device Storage API .you can find the example here
My application serves user created bundles of HTML pages for e-learning, also known as SCORM packages, and i'm trying to make that as fast as possible.
Loading page-by-page in iframes is quite slow, as pages may include high resolution graphics, animations, audio, video and so on.
Unfortunately pre-loading these pages is quite difficult, as they usually react to onLoad() events to start animations and interactions.
Without using applets or extensions, would it be possible to download the user bundle and serve it "in-browser" to the application?
This is a common-enough task with the advent of fat clients built on Backbone.JS, Angular, Ember, etc. Clients request data (usually JSON), media, etc. from the server as opposed to pre-rendered HTML, and do rendering and resource management client-side. If you want to go this way so that you can support flexible offline mode the way you specified, you usually need a set of generic loaders and tools in your app cache manifest that will loading the more specific (user-specific, lesson-specific, etc.) resources on page load.
The first time your user opens your app, it should be in online mode, and your app will need to request the specific resources it needs to work well offline and store them in client-side storage (localStorage, indexedDB or what it's trying to replace - WebSQL, and fileSystem. There are many resources on the web on how to use each of these APIs.). This step can also be incremental, rather than a huge download of megabytes of data.
The next time your user opens your page, your app can attempt to load all the resources it needs from client-side storage before even calling the server. It will only need to call the server if it's missing some resources, or if it needs to get a fresher version of a resource, or of course if you need to write to the server. If you did a good job of loading all the resources it needed into client-side storage the first time, it can work decently in offline mode.
If your users are running modern browsers you could use the HTML5 cache manifest.
Creating a manifest file will get the browser to download and store the site locally and then the user may even visit it offline
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
I have a Phonegap iOS app. My app is distributed privately, hence there is and there will be no usage of the app store. The app communicates with a homebrew middleware. In order to manage the app updates, I thought about doing something like:
-> On app start, check if a more recent version is available.
-> If yes then call a home-made Javascript module that will leverage the HTML5 file I/O API in order to update/create/delete files based on the output of the middleware.
In your opinion; is this solution reliable?
Are there any alternatives? (app store is completely out of the picture)
With a PhoneGap/Cordova app you normally load files from your local www folder. The problem with updating files at runtime is that you cannot write to the www location - you can only write to your app's 'documents' folder.
I assume you are using an Enterprise distribution since you are distributing without the app store. You could look at using something like TestFlight to distribute updates if you are happy for the users to have to go and check for updates.
You could also eliminate TestFlight and host the ipa files yourself, check for updates and then ask the user to download and install the update.
EDIT
It is not possible to write to the www folder with or without a plugin. This is due to iOS restrictions rather than PhoneGap/Cordova restrictions.
These links talk about distributing Enterprise apps over-the-air
http://developer.apple.com/library/ios/#featuredarticles/FA_Wireless_Enterprise_App_Distribution/Introduction/Introduction.html
IOS Enterprise Distribution Through OTA
Enterprise In-House App distribution
I was considering using the www folder as a bootstrap to download the actual app in a www folder in the document directory, and loading the index.html page from there (and the rest of the app)
I'm wondering if that would be an option
Of course the ObjectiveC UIWebView would point to the downloaded version if it exists
I know this is an old question, but the accepted answer is no longer correct. Here's a complete project showing how it can be done: https://github.com/ben-ng/phonegap-air
In short, the trick is to not write to the app bundle, but to the Documents directory.
There's an alternate service called Trigger.io. It is a lot like phonegap, but one of its' key features is that it lets you "reload" the app on the device, which is essentially what you're looking for, AFAICT.
So it seems that cordava can only load files that are in the app bundle. You cannot simply alter the webroot parameter to take the documents folder.
What you could do is use the FileReader API to read from the persistent store. This would mean you would have to create some sort of bootstrap html / javascript that is in the app bundle and create code that loads the content from the persistent store (which you can update yourself anytime you like)
This is a great place to start looking: Cordava File API docs