I am working on a Web based application which will potentially be used in environments with unstable Internet connection. I am implementing it as an HTML5 offline application that will utilize HTML5 local storage (actually jQuery plug-in jStorage). It's a data-entry driven app, so all new entries created while being offline are saved in local storage and will be synchronized later with the server when Internet connectivity is re-established. I almost got that working but now I am facing with a requirement when users will actually need to upload an image along with a data-entry submission.I found this HTML5 API spec - http://www.w3.org/TR/file-upload/ which talks about file uploads and offline access. Before I go too deep into this - are there any wrappers around this functionality that would simplify this for me?I also just found this article - http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/ which utilizes a publicly available TwitPic API and I wanted to get some professional feedback from people here.
Thank you!
I Know it's been a while since I asked this but I still see this question being favorited and upvoted, so I figured I'll share how I ended up solving this.
In my case the files aren't that large so I simply decided to MIME encode them and then store the string in HTML5 localStorage. It works as a charm.
I had written an article some while ago on HTML5 file API - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/
Also refer the GitHub repo - https://github.com/mailru/FileAPI for advance controls.
I don't think localStorage will be the right answer here because localStorage saves strings only and has a 5 megabyte storage limit.
I suggest something like http://pouchdb.com
But if you insist on localStorage, then Mozilla Hacks has an article about storing images in localStorage:
http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/
indexedDB might be a better place to store files:
http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
Related
I know that the most Iconic feature of PWA are
Service Worker: which make user can use the app offline from cached resources
Add To Home Screen: With this feature, user can add a shortcut of the app on their mobile home screen, to get a experience like interacting with a Native App(But there still a huge different, in my opinion)
etc.
However, I can do like all of them on about 6/7 years ago by using the HTML5 technology at that time, I know that service worker comes recently but there also was "HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications." can do similar things.
Is there anyone can explain what's the difference between PWA and HTML5 webapps? or they are just the in term of same? or a similar concept but different implementation? or PWA is the (next gen/extension) of HTML5 webapp?
I might have some misunderstanding on PWAs, since I am new to this term, Thanks.
If keep it simple PWA is ordinary site with 3 additional features.
responsive design - site should look well on all devices
manifest.json - site must have general description about itself stored in manifest.json
caching - site must work offline
I believe 1 and 2 is easey. And 3 is realy what PWA is all about. So the question is: how we can provide offline support?
First problem is how we can get our initial .html .css and .js files without internet connection? Answer is: we should use service worker or App Cache. But App Cache has a lot of problems and probably will be deprecated, in other hand service worker under developement and become better each month. You can read more about their difference here.
Second problem is how we can get server data without internet connection? We should store most vital data somwhere. But after we get our .js file from cache we have access to Local Storage, Indexed DB etc. So we can store vital data in any of this storage while we online and get it back from them when we offline. It is totally up to you how you will handle that.
I believe there no cleare and strict defentiton for PWA and HTML5 webapp (at least for now). So you can asume it is the same but today PWA is more common word.
With HTML5's offline capabilities is it possible to create an app that will persist after the connection is lost and the browser is closed? Specifically, here's what I'd like to do:
Connect to the app while online. Download the entire app including a small database it runs on.
Close the browser and disconnect.
Open the browser again while offline and load the app from the local cache.
Thanks to Mark Pilgrim's excellent book I believe I have an idea of how to accomplish the first step, I'm mainly wondering if the last step is possible. If this is possible, I'm guessing it requires some configuration of the browser. Any settings I should be aware of that aren't obvious?
Thanks very much for any help offered.
The last step should be possible - it just depends on what extent you want to implement it to. To my knowledge it shouldn't require any browser settings. You just have to be aware of the limitations of local storage, which I believe is 5mb max at the moment (for most browsers). Obviously you'd have to perform the checks for such permissions as outlined int the Dive Into Html5 guide you linked.
The quickest and dirtiest way is to simply issue a GET request to your online app. If it responds correctly, then use the online version. If not, use the local cache. Just disguise the timeout/failed response as a 'loading' screen.
I just wanted to hear opinions.
I know that now it is not really possible to build a native (desktop, tablet) like web app that contains (should work in offline mode with) a bunch of multimedia content (there is no consistent way to store and access multimedia data on the client).
Do you see any steps in this direction or such apps will be a native platform privilege in future as well?
Offline storage appcache does more or less what you are asking for. It's actually quite possible, at least in modern browsers. Check it out:
http://html5doctor.com/go-offline-with-application-cache/
http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://www.whatwg.org/specs/web-apps/current-work/#applicationcache
https://developer.mozilla.org/en/Using_Application_Cache#Browser_Compatibility
In addition to offline storage, there are HTML5 File APIs that you can use. I believe Google Chrome lets its form of 'Apps' use the file APIs.
http://dev.w3.org/2006/webapi/FileAPI/
For storing data offline WebApp can use:
session storage, "advanced version of cookies"
key/value based Web Storage (AKA local/global/offline/DOM storage)
sql-based Web SQL Database (deprecated) and Indexed Database API
FileReader and FileWriter API (requires user to select files each time the application loads)
But apparently there is no File Storage. Of course, there is a manifest-based caching, but it's just a cache and is not supposed to be used as a user data storage.
Does it mean that the user of WebApp is forced to use some sort of a cloud file storage?
Is there any way to save large files on user's local machine? Or maybe some way to select a local folder web application can use to store user data?
Edit. Security. HTML5 already has the ability to write big portions of data to user's local machine. I don't see any security issues if a browser will provide another, file-based abstraction to store data. It can be some virtual machine, virtual filesystem, whatever.
Hm, I think, it is possible to write JS filesystem and store it as a blob in SQL...
Similar questions.
Update:
Hm... recently I've found this and this. Maybe it is what I'm looking for... Yes, it is! See the answer below.
At last, I've found it! Here's the answer:
I’ll have the DOMFileSystem with a side of read/write access please wrote:
Eric Uhrhane of Google has been
working on the working draft of the
File API: Directories and System specification which defines a set of
APIs to create a sandboxed filesystem
where a web app can read and write
data to.
Wow! I'm so excited!
Why not use localStorage while the user is editing a document and the FileWriter API when they want to save it to disk? Most people are used to seeing a save dialog pop up when saving a document.
The only scenario I can think of that warrants userless access to the FileWriter API is an autosave feature, but autosaving to localStorage can be just as good.
There is a way to save relatively large files to a users hard drive if you are willing to use Flash. Look into Downloadify:
http://www.bitrepository.com/downloadify-client-side-file-generation.html
Downloadify allows you to send data to a SWF and have that SWF create a file on the users machine. My recommendation would be to store the data via one of the methods you listed, Webstorage, sqlite database, etc. Put all your assets, including the SWF in the manifest file so everything is cached locally to the browser. You can then pull information from your db or webstorage and use the SWF to create the files you need.
I'm not sure if you will be able to read these files back into your web application.
Another option to save data is by using link tags with the data URI scheme. However, I'm not sure if it is supported in all the major browsers at the moment.
For security reasons you can't write files to a user's local filesystem in case it gets used for nefarious purposes by evil people.
That's not likely to change, and that's a good thing.
The HTML5 FileSystem API started landing in Chrome 8 and is fairly complete as of now (Chrome 11).
There's a nice tutorial on it here: http://www.html5rocks.com/tutorials/file/filesystem/
http://fsojs.com wraps the FileSystem API effectively, if you want an easy solution
As mentioned by others here, the FileWriter and FileSystem APIs can be used to store files on a client's machine from the context of a browser tab/window.
However, there are several things pertaining to these APIs which you should be aware of:
Implementations of the APIs currently exist only in Chromium-based browsers (Chrome & Opera)
Both of the APIs were taken off of the W3C standards track on April 24, 2014, and as of now are proprietary
Removal of the (now proprietary) APIs from implementing browsers in the future is a possibility
A sandbox (a location on disk outside of which files can produce no effect) is used to store the files created with the APIs
A virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser) is used represent the files created with the APIs
IsolatedStorage, which hasn't been mentioned as of yet, also allows for file i/o from a tab/window context, but it is made available through solely through Silverlight and requires the use of managed code to access. It, like FileSystem, also exists in a sandbox and makes use of a virtual file system.
Given the high market penetration of both Chromium-based browsers and Silverlight (support for which, interestingly enough has been dropped by such browsers), you may find a solution which uses the first of the above approaches available on a client machine satisfactory.
BakedGoods, a Javascript library that establishes a uniform interface that can be used to conduct common storage operations in all native (including FileSystem), and some non-native (including IsolatedStorage) storage facilities, is an example of such a solution:
//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem", "silverlight"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Just for the sake of complete transparency, BakedGoods is maintained by this guy right here :) .
Is it possible to build an application inside in browser? An application means:
1 Where there is connection (online mode) between the browser and an remote application server:
the application runs in typical web-based mode
the application stores necessary data in offline storage, to be used in offline mode (2)
the application sync/push data (captured during offline mode) back to the server when it is resumed from offline mode back to online mode
2 Where there is no connection (offline mode) between the browser and an remote application server:
the application will still run (javascript?)
the application will present data (which is stored offline) to user
the application can accept input from user (and store/append in offline storage)
Is this possible? If the answer is a yes, is there any (Ruby/Python/PHP) framework being built?
Thanks
Yes, that is possible.
You need to write the application in Javascript, and detect somehow whether the browser is in offline mode (simplest is to poll a server once in a while). (Edit: see comments for a better way to detect offline mode)
Make sure that your application consists of only static HTML, Js and CSS files (or set the caching policy manually in your script so that your browser will remember them in offline mode). Updates to the page are done through JS DOM manipulation, not through the server (a framework such as ExtJS http://www.extjs.com will help you here)
For storage, use a module such as PersistJS ( http://github.com/jeremydurham/persist-js ), which uses the local storage of the browser to keep track of data. When connection is restored, synchronize with the server.
You need to pre-cache images and other assets used, otherwse they will be unavailable in offline mode if you didn't use them before.
Again: the bulk of your app needs to be in javascript, a PHP/Ruby/Python framework will help you little if the server is unreachable. The server is probably kept as simple as possible, a REST-like AJAX API to store and load data.
The "Let's Take This Offline" chapter in Mark Pilgrim's (online) book Dive Into HTML5 is a very nice overview of writing offline web apps with HTML5 technologies.
Note: Since Mark Pilgrim's original Dive Into HTML5 link seems to be down.
Copies can now be found here among other places.
Jake Archibald wrote "The offline cookbook". A modern (9 December 2014) and nice approach with ServiceWorker:
http://jakearchibald.com/2014/offline-cookbook/
The answer in 2018 is to leverage the service worker, and to build a Progressive Web App:
https://developers.google.com/web/progressive-web-apps/
i was looking for this also, i found out abt HTML5 Offline Web Apps. havent tried it tho
Users of typical online Web applications are only able to use the applications while they have a connection to the Internet. When they go offline, they can no longer check their e-mail, browse their calendar appointments, or prepare presentations with their online tools. Meanwhile, native applications provide those features: e-mail clients cache folders locally, calendars store their events locally, presentation packages store their data files locally.
Have a look at Google Gears, http://code.google.com/apis/gears/. Although they have been phased out in favour of HTML5. However, it seems that what is being pushed as HTML5 is Google Gears.