I have a couple of questions about offline storage in HTML5. It's not an area I am that familiar with so I was hoping someone could shed some light.
I want to develop a web based system (for mobile) that a user could potentially use offline. Obviously the first time they'd use it (and any time they need to sync data thereafter), internet access would need to be required.
Some text data would need to be downloaded in json format. Basically this will be a list of certain items that will appear in auto-complete forms in the app (ie. even if the user is offline and they want to enter a type of animal for example, they'd type in "Gir" and "Giraffe", being one of the items downloaded in that json list, would appear in the auto-complete box.
I would like the user to be able to take photos at certain points. This would need to be saved internally, such that when internet access is available it can be synced/uploaded to some web server.
Could someone tell me if what I am thinking of is achievable?
Thanks
Use a cache manifest to keep offline portions of your app cached. You can also store key/value data in Local Storage, including text and blobs (which you should be able to convert to photos).
This demo (and its documentation) may be a useful resource for offline photo storage.
Related
I am currently working on an interaction event tracker for websites. One feature I am looking at adding is the capability to store specific values of elements on the pages and store them in the browser with indexedDb API.
As an extension, I would love to implement a cross-browser implementation so that I can carry the values with me across multiple machines (I use chrome on mac, personal and business machines). I know there are limitations to what indexedDB can do but isn't there a way to carry the indexedDB database between browsers till I am logged into the same account in Chrome?
Any help or direction will be truly appreciated!
I don't know if anyone got a chance to look into this but I found out that "storage" API allows you to do what I want, i.e, store data that sync over the cloud
User data can be automatically synced with Chrome sync (using storage.sync). Your extension's content scripts can directly access user data without the need for a background page.
I hope this helps anyone who goes down this path
https://developer.chrome.com/docs/extensions/reference/storage/
I would like to make my own CNC Editor.
I am looking for some guidance. I don’t know if it is even possible with HTML5. But it would be great if I can. If possible, please list what I should research and learn.
I don’t need it to be online accessible, I will only have it on my computer. I will be accessing it via local network from multiple different computers. I don’t want it accessing the internet, because it’s not always available.
Desired Features:
⁃ Read and Write files with different extensions (all files used are easily opened in notepad)
⁃ Store and retrieve data from a simple database file.
⁃ Make calculations
⁃ Have a text Editor window
⁃ Have a Display area for simple vector graphics depending on data loaded and provided by user.
It is possible but requires a lot of work. I would say that these are technologies you would need to master in order to pull this off:
Node.js (use express.js) - for storing and retrieving files from database and for reading/writing local files with extensions you want (server-side)
Vue.js or Angular.js or React - for building frontend interface to manipulate your vector graphics. It can also do calculations and It's good with svgs and that kind of stuff.
Electron.js (not mandatory) - it wraps it in native-app like experience. This framework actually gives you ability to write desktop apps for any os and arch.
So as I said, It would be a lot of work but its possible in the end.
Funny coincidence is that my brother is planning to build CNC machine so I might be doing this as well in next couple of months. Feel free to contact me if you need any further help!
UPDATE: You cant do it with just HTML5. It would be like trying to make wooden space shuttle.
We are building an offline version of our online store.
This is for reps to take with them on a tablet when they are out. The reason it needs to be offline is because there will be no connection in a lot of the places and we aren't using tablets with 3/4g connectivity.We use Windows 8.1/RT based tablets.
Since php relies on a server and the tablets cannot be installed with xampp or the like, I have rebuilt the site using html and css.
So far this works and has some flexibility in it. The website is turned into an application using googles create application button in its tools (though technically it's not really an application). It has all the product info, pictures and videos the reps need. Another advantage to this is that the application and files are stored on a one drive cloud account shared to all the tablets. This way, I can update the app/website from my machine and have it up to date on all the reps machines. This current set up works for now but we are looking to add some more functionality.
What we want is a button on each product that will let a rep add an amount of that particular product to a quote form. Because each product sits on a different page, it can't be in the one page form. So as the rep is pressing the buttons on each product, they are getting stored somewhere. Then at the end, the rep can turn all those values into a word doc/pdf/excel by hitting a final submit button.
I have looked at web storage in html 5 but still not quite sure if I can get what I need using it.
Going through the explination here:
http://diveintohtml5.info/storage.html
looks like sites can store info but not sure how to turn this into a form or document at the end. This document is what the reps will email back to the head office.
Has anyone got any pointers on what I could do. Since the site/app has been created in html already, I would like to just build into the existing framework. Are there any other pieces of software that I could use? I do remember using spreadsheet converter to turn an excel file into a web form that exported a pdf but the form needs to be on a single page.
All help appreciated.
Thanks
I need an offline caching system where my app can store about 0.5 MB of data. It is preferred that there is no interaction required by the user, but small amount of user interaction might be acceptable
Currently, Microsoft's Silverlight is being used to store data offline. It is a large download for the plugin, and not installed as standard on most machines.
I have been considering cookies - but they are far too volatile. I can imagine numerous reasons someone might clear their browser cache and lose all their data.
I am not sure about HTML 5 storage, and how volatile it is in practice.
I have been looking into flash, which is installed on over 97% of windows computers. It seems I can load data from a user selected file, and save data to a user selected file.
My questions...
How big is the microsoft silverlight plugin download (in MB) for windows? (I think about 8mb, but did not get clear answer from the internet)
How can users accidentally (or deliberately without realizing the consequence) clear their HTML 5 storage on common browsers?
Is there a way to get flash to store or load data from local files without user interaction?
Is there another alternative I have not considered?
Well you could use Flash shared Object storage, which will allow between 0 and unlimited space. Check this settings panel for details of your own settings to get a better idea of what I mean.
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html
Of course this does mean that the user will have to allow third party flash content to be stored locally, which is the default. Also the default storage space is 100KB, with the user being prompted to allow for a larger amount unless they have previously increased the default themselves. So that's a small draw back, but still workable.
I am not sure how you would access the shared object from within a silverlight app, as I have only used it via a Flash swf. I will do some digging around using javascript and get back to you on that.
Also there is another post that may help you:
Javascript bridge to Flash to store SO "cookies" within flash
It sounds like what you need is isolated storage.
I use it with all my silverlight apps and it couldn't be easier to use. With only a few calls you can store and retrieve data programatically.
Edit: I was thinking that your app is already programmed in Silverlight. What is your app programmed in? Is it simply HTML/CSS at the moment?
Our web analytics package includes detailed information about user's activity within a page, and we show (click/scroll/interaction) visualizations in an overlay atop the web page. Currently this is an IFrame containing a live rendering of the page.
Since pages change over time, older data no longer corresponds to the current layout of the page. We would like to run a spider to occasionally take snapshots of the pages, allowing us to maintain a record of interactions with various versions of the page.
We have a working implementation of this (Linux), but the snapshot process is a hideous Python/JavaScript/HTML hack which opens a Firefox window, screenshotting and scrolling and merging and saving to a file. This requires us to install the X stack on our normally headless servers, and takes over a minute per page.
We would prefer a headless implementation with performance closer to that of the rendering time in a regular web browser, but haven't found anything.
There's some movement towards building something using Mozilla source as a starting point, but that seems like overkill to me, as well as a maintenance nightmare if we try to keep it up to date.
Suggestions?
An article on Digital Inspiration points towards CutyCapt which is cross-platform and uses the Webkit rendering engine as well as IECapt which uses the present IE rendering engine and requires Windows, natch. Nothing off the top of my head which uses Gecko, Firefox's rendering engine.
I doubt you're going to be able to get away from X, however. Since CutyCapt requires Qt, it requires either X or a Windows installation. And, similarly, IECapt will require Windows (or Wine if you want to try to run it under Linux, and then you're back to needing X). I doubt you'll be able to find a rendering engine which doesn't require Qt, Gtk, GDI, or Cocoa, and therefore requires a full install of display libraries.
Why not store the HTML that is sent out to the client? You could then use that to redisplay in a webbrowser as a page to show what it looked like.
Using your webanalytics data about use actions, you could they use that to default the combo boxes, fields etc to the values the client would have had, even change the CSS on buttons, etc, to mark them as being pushed.
As a benefit, you don't need the X stack, don't need to do any crawling or storing of images.
EDIT (Re Andrew Moore):
This is were you store the current CSS/images under a version number. Place an easily parsable version number in a comment in the HTML. If you change your CSS/images and use the existing names, increment the version number in the HTML output sent out.
The system that stores the HTML will know that it needs to grab a new copy and store under a new number. When redisplaying, it simply uses the version number to determine which CSS/image set to use.
We currently have a system here that uses a very similiar system so we can track users actions and provide better support when they call our help desk, as they can bring up the users session and follow what they did, even some-what live.
you can even code it to auto-censor sensitive fields when it is stored.
depending on the specifics of your needs perhaps you could get away with using one of the many free webpage thumbnail services? snapcasa, for example lets you generate thousands per month / no charge no advertizing .. (not ever used, just googled 'free thumbnail service') to find this.
just a thot