-
Notifications
You must be signed in to change notification settings - Fork 216
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
1,127 additions
and
643 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| # Using imgcache.js with Cordova/Phonegap | ||
|
|
||
| ## javascript | ||
|
|
||
| You will need to include the cordova.js script in the html files where you want to use imgcache.js - see the `examples` folder. | ||
|
|
||
| imgcache.js should be initialised and used after the [deviceready](http://cordova.apache.org/docs/en/edge/cordova_events_events.md.html#deviceready) event has been fired. | ||
| For instance if the code calling imgcache.js is within a function called `yourCallbackFunction` : | ||
|
|
||
| ``` | ||
| document.addEventListener("deviceready", yourCallbackFunction, false); | ||
| ``` | ||
|
|
||
| ## Configuration | ||
|
|
||
| This section lists the configuration needed to make imgcache.js work with Cordova/Phonegap. This configuration takes place in the config.xml file of your Cordova project. | ||
|
|
||
| See [config.xml](config.xml) at the root of this project as an example. | ||
|
|
||
| ### Features | ||
|
|
||
| #### Cordova 3.x | ||
|
|
||
| imgcache.js requires the following Cordova features/plugins: | ||
| * [File](http://docs.phonegap.com/en/edge/cordova_file_file.md.html#File_accessing_the_feature) | ||
| * [Device](http://docs.phonegap.com/en/edge/cordova_device_device.md.html#Device_accessing_the_feature) | ||
| * [FileTransfer](https://github.com/apache/cordova-plugin-file-transfer/blob/dev/doc/index.md) | ||
|
|
||
| For each of these plugins you will be required to define the corresponding package for the OS you target. Here is a default configuration for both iOS and Android : | ||
|
|
||
| ```xml | ||
| <feature name="Device"> | ||
| <param name="ios-package" value="CDVDevice" /> | ||
| <param name="android-package" value="org.apache.cordova.device.Device" /> | ||
| </feature> | ||
| <feature name="File"> | ||
| <param name="ios-package" value="CDVFile" /> | ||
| <param name="android-package" value="org.apache.cordova.file.FileUtils" /> | ||
| </feature> | ||
| <feature name="FileTransfer"> | ||
| <param name="ios-package" value="CDVFileTransfer" /> | ||
| <param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" /> | ||
| </feature> | ||
| ``` | ||
|
|
||
| #### Cordova 2.x | ||
|
|
||
| Features need to be added this way: | ||
|
|
||
| ```xml | ||
| <feature name="http://api.phonegap.com/1.0/file"/> | ||
| <feature name="http://api.phonegap.com/1.0/device"/> | ||
| <feature name="http://api.phonegap.com/1.0/network"/> | ||
| ``` | ||
|
|
||
| ### Phonegap Build | ||
|
|
||
| For Phonegap Build you also need to list all core plugins used (= each feature): | ||
|
|
||
| ``` | ||
| <gap:plugin name="org.apache.cordova.file" /> | ||
| <gap:plugin name="org.apache.cordova.device" /> | ||
| <gap:plugin name="org.apache.cordova.file-transfer" /> | ||
| ``` | ||
|
|
||
| ### Access origin | ||
|
|
||
| In order to cache remote images via http it is important to allow access to those domains. This can be setup via a whitelisting `<access>` element in your config.xml file. | ||
|
|
||
| If you only want to do tests you can allow access to all domains to avoid this kind of issues: | ||
|
|
||
| ```xml | ||
| <access origin="*" /> | ||
| ``` | ||
|
|
||
| In order to avoid possible security issues, always limit the allowed domains list whenever possible. | ||
|
|
||
| For more information about this access origin configuration see [Whitelist Guide](http://docs.phonegap.com/en/edge/guide_appdev_whitelist_index.md.html#Whitelist%20Guide). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # Known issues | ||
|
|
||
| ## Cordova | ||
|
|
||
| * getCurrentSize() always returns 0 using Cordova Plugin File v1.0.0. | ||
| The problem is that the Metadata interface of a File entry does not have a *size* property thus it does not match the html5 specifications. | ||
| Looking at the code for this plugin, this should have been [fixed](https://github.com/apache/cordova-plugin-file/commit/9ac8e477c0fda6aed3878a4cf165257f00e1bf83) in v1.0.1 but unit test still fail on iOS. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| # TODO | ||
|
|
||
| * Find a solution for cache invalidation when online in case an image has changed since last cached version | ||
| * When Chrome finally supports canvas.toBlob(), possibly replace download method with new one that draws an Image into a canvas and then retrieves its content using the toBlob() method -- or use [canvas-toBlob.js] (https://github.com/eligrey/canvas-toBlob.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Examples</title> | ||
| <script src="../js/imgcache.js"></script> | ||
| <!-- only for cordova (replace by phonegap.js for phonegap) - ignore on desktop browser --> | ||
| <script src="../cordova.js"></script> | ||
| <script> | ||
| var startTest = function() { | ||
| // see console output for debug info | ||
| ImgCache.options.debug = true; | ||
|
|
||
| ImgCache.init(function() { | ||
| console.log('ImgCache initialised'); | ||
| }); | ||
| }; | ||
|
|
||
| if (typeof(cordova) !== 'undefined') { | ||
| // cordova test | ||
| document.addEventListener('deviceready', startTest, false); | ||
| } else { | ||
| // normal browser test | ||
| window.onload = startTest; | ||
| } | ||
| </script> | ||
| <style> | ||
| /* just to make the page look a little nicer.. no use for the example in itself.. */ | ||
| .note { | ||
| background-color: #bbb; | ||
| margin: 1em; | ||
| padding: 1em; | ||
| display: inline-block; | ||
| float: right; | ||
| clear: right; | ||
| } | ||
| code { | ||
| display: block; | ||
| margin: 0.5em; | ||
| } | ||
| ul#actions li { | ||
| margin: 0.8em; | ||
| } | ||
| body { background-color: #eef; } | ||
| h1 { text-align: center; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>imgcache.js - examples</h1> | ||
|
|
||
| <div class="note"> | ||
| <p>Don't forget to accept your browser request to store data on the local computer!</p> | ||
| </div> | ||
|
|
||
| <div class="note"> | ||
| <p>If seen in Chrome run chrome with the following flags: <code>--allow-file-access-from-files --allow-file-access</code> in order to <a href="http://stackoverflow.com/questions/6427870/html5-file-api-security-error-while-reading-a-file">avoid a security error</a>.</p> | ||
| </div> | ||
|
|
||
| <p>1. Open page locally (file:// in Chrome) or in Phonegap/Cordova</p> | ||
| <p>2. Work offline</p> | ||
| <p>3. Reload the page (or re-start the web app)</p> | ||
| <p>4. You should see the images reloaded from the cache</p> | ||
|
|
||
| <div> | ||
| <h2>This page runs ImgCache without jQuery</h2> | ||
| <p>See console to check for any error.</p> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.