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/
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.
I want to create a web-app using HTML5, CSS3 and possible JQuery mobile. This app will just be a form used to collect customer data but it needs to be able to work offline.
I've created offline web-apps before and used manifest files to make them offline but is there a way to make a form store data on the device for uploading to a computer or server later?
There are plenty of solutions for offline storage in HTML5, but all depend on which browser you want to support? localStorage is perhaps the most widely supported at the moment, there was also web SQL databases and so forth: http://www.html5rocks.com/en/tutorials/offline/storage/
I am currently looking to write a web app in HTML5. It is my first HTML5 web app.
The main feature of this app is its offline feature. When I mean offline, it will be something like C:\APP\index.html (for Windows ), and it will be the same thing for Mac. So with that said, I have been looking into LocalStorage, WebSQL, IndexedDB.
And I come to this conclusion that LocalStorage is not going to be good enough for the web app that I am going to write. The IndexedDB only for all the major browsers except safari. Safari (desktop & iOS) supports WebSQL not IndexedDB. And then I found out that WebSQL is not going to be supported.
So I am wondering if there is a "universal" solution to my dilemma? Or Should I have code IndexedDB and WebSQL so that it will work on all the browsers? Any suggestions are welcome.
Your app is the only thing that needs to be accessing the data it stores, right? If so, data is data is data, and as long as you include everything you need to read, write to, and understand the information your data encodes, it doesn't matter one bit (no pun intended) what format you use to store it. Whatever language you are using to create the app, it will have library functions that can manipulate stored data.
If worst comes to worst, you can always go with the lowest common denominator and use a raw binary or text file; those are the only true universal formats.
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/
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.