html5 offline application on multiple platform - html

I want to develop a offline web app which will work on multiple platform(PC,Android). This is a basically a product display web app so that each product will have image,video,details of product etc. For development of this web app HTML5 is the choice. I will copy web app files to each device so that I could run it offline. But here I need a back-end so that I could delete outdated product and add new products(which will have details,image,video). Is there anyway so that I could add/delete product from one device and copy these files to all other devices.
I have come across HTML Appcache, using this i can build normal php site and using manifest i can store it in browser appcache for offline viewing. But this requires internet connection in each device and access the web app through browser.
I would like to know if there is any other way I could do this without keeping files in web server.

I think something like PhoneGap is probably what you're looking for (Apache Cordova)
Also be aware that app store policies may end up dooming your app if it doesn't look and feel native. Expect Apple to be very strict about this.

Related

Website vs. hosted Chrome App

I'm pretty new in the field of Web Store and its content and I've been going through it for past few days. I am not sure if I'm getting it right, but as far as I know, Chrome Apps can be packaged or hosted and also I have noticed that both of them (packaged and hosted) will be removed from the Chrome Web Store on Windows, Mac and Linux.
But, according to this page, there are four types of content which can be published on Chrome Web Store - Websites, Chrome Apps, Extensions and Themes. And it somehow corresponds with the Web Store filters - you can filter between Websites and Chrome Apps.
And my question is - what is the difference between a Website and a hosted Chrome App? Is just Google messing up the terms (and by Website they mean hosted Chrome App and by Chrome App they mean packaged Chrome App) or is there any real difference?
Because this is what is totally confusing for me - in the early 2018, when all the Chrome App stuff will be removed from any other OS than Chrome OS, what am I going to see if I open the Web Store on Windows? Themes and Extensions only? Or the Websites will be available too, because only Chrome Apps will not be supported and a Website is not a Chrome App?
And after the "early 2018", is there going to be any way how to integrate a Website to Chrome other than telling the users to manually bookmark it? It won't be possible to distribute a web app through the Web Store at all? Because what I also noticed is Google encouraging developers to create PWAs rather than Chrome Apps, but how those PWAs can be integrated to Chrome more smoothly than just a manually added bookmark?
Thank you very much for your answers and sorry for a long and chaotic post full of questions.
Karolina
Gonna start by referencing the Wiki descriptions for a Website:
A website is a collection of related web pages, including multimedia content, typically identified with a common domain name, and published on at least one web server. A website may be accessible via a public Internet Protocol (IP) network, such as the Internet, or a private local area network (LAN), by referencing a uniform resource locator (URL) that identifies the site.
and a Google Chrome App:
A Google Chrome App is a web application that runs on the Google Chrome web browser. Chrome apps can be obtained from the Chrome Web Store where apps, extensions, and themes can be installed or bought. There are two types of apps, hosted and packaged, which have different locations of their executable and are targeted at different use cases.
and for Hosted Apps part:
Hosted apps are the original type of Chrome apps. They contain a single manifest file that contains the URL and additional information about the app. Hosted apps are usually offline and are subject to regular web page security restrictions.
To say things simpler, a Website is such a broad term where in some cases, a Hosted Web App might actually fall under it's category.
While a Chrome Web App has this required tie-in with Google Chrome (hence it's name).
For more descriptions on the difference between a Hosted and Packaged App (and an extension:
There are actually two kinds of apps: hosted and packaged. A hosted app wraps an online website, so the CRX package can be as simple as a single manifest.json file pointing to the website. A packaged app contains the whole kit and kaboodle inside the CRX package—HTML, CSS, and so on, all run from the user’s hard drive.
Packaged apps are a kind of missing link between extensions and hosted apps. They look the same as a hosted app to the user, but under the covers, they are really like traditional extensions with that special “launch” parameter. They have access to almost all functionality afforded to regular extensions—context menu, background pages, and so on. The only exception is that packaged apps can't add buttons to the address bar.
Returning to the example in the previous section, it’s perfectly valid for a packaged app to add an item to Google Chrome's context menu. However, it’s completely invalid for a hosted app to do the same thing. In some respects, a packaged app lets you have your cake and eat it: the appearance of a packaged app with the power of an extension. But there are still plenty of reasons to use pure extensions and hosted apps.
Guide for choosing an App Type can be seen here.
For the early 2018 part, there still isn't much details mentioned about it, but referring to the Chromium blog, I guess it's safe to say that the Chrome Web Apps will be totally removed (hence they're asking developers to migrate their Chrome apps to the web) and that only extensions and themes would be available.
However, this could still be subject for change. At this point, no one could really tell.
[...] there are four types of content which can
be published on Chrome Web Store - Websites, Chrome Apps, Extensions
and Themes.
I'd say that is accurate.
Some websites are just simple bookmarks you can find in the Chrome
Store. I consider these little more than advertisements.
Some websites do that and add trivial things like system
notifications and even run offline. I.e. they have their code on your hard drive and access some system resources. But Google still categorises them as websites (or webapps in modern vernacular) probably because they have no special feature set. An example is Spotify or Gmail offline.
Hosted Chrome apps might not have an online presence at all or typically do something different from the website version. For example, they could run in a specially designed transparent window; they may run offline too. An example is Hangouts, the app has slightly different features from the website at hangouts.google.com.
Packaged Chrome apps are defined similarly, but need more access to system resources such as the filesystem. They are pushing the border of what we may define as being 'sandboxed'. They also may run offline. In some cases people who want to write scripts using javascript and html/css may consider this instead of a nodejs-like solution.
what is the difference between a Website[/Webapp)] and a [...]Chrome
App?
Typically the ratio of 'fresh server code' to 'local drive code' gets smaller as you go down the above list, but this is just a correlation. The main difference between a Chrome app and a Web app is a unique content feature-set. Also webapps typically require at least periodic online contact, whereas a chrome app could just be a 100% offline game without an online counterpart.
Is just Google messing up the terms [...] or is there any real
difference?
So yes according to how I see it there is a difference. Though personally, I'd categorise everything that puts code on your local drive as a chrome app and stuff that runs at least 99.9% online as a webapp/website. But Google disagrees apparently.
in the early 2018, [...] what am I going to see if I open the Web
Store on Windows? Themes and Extensions only? Or the Websites will be
available too, because only Chrome Apps will not be supported and a
Website is not a Chrome App?
Only Google knows this I think. But I'm guessing you'll see Websites, and clicking "add to chrome" will create a bookmark for online stuff, or an extension for the offline stuff (like google docs). So you can distribute websites, you just won't be able to find them under an "Apps" panel. We'll also probably see an increase in extensions with a UI component as some apps are re-labelled as extensions.

Can cloudrail be used serverless?

Cloudrail seems perfect to simplify interaction of a web page with e.g. google drive or other cloud service.
And this may be due to my lack of understanding and lack of knowledge of web development and Node.js, but can cloudrail be used serverless?
Or in other words can cloudrail be used on a stand-alone html page on a local computer (i.e. served by the filesystem instead of a server) and be made to access google drive or even work with an off-line mode while on a stand-alone html page (which may later sync with google drive)?
The reason being I would like to design a simple mobile app that accesses the cloud (fine so far) that is mirrored as a simple portable web page that can sit anywhere (desktop/laptop/mobile/USB stick) and is not served by any server but simply loaded from the local filesystem.
If not cloudrail, what other technology might I need to achieve this?
I don't think you can use it as a standalone website the way you describe it. You might be able to realize your use case though by e.g. using CloudRail's Nodejs SDK with Electron. This allows you to create an application very similar to a website with Javascript while still giving your users just one file that runs pretty much everywhere.

How do I use a Chrome Extension to speed a webapp's load times?

Looking for high-level guidance as I'm not sure where I'd even start w/ this.
I'm making a web app where most (if not all) of my users will have installed a Chrome extension I've written.
What I'd like to do is include large libraries in the Chrome Extension, and have the web app load the libs from the extension when the user visits a site.
e.g., both the extension & web app use React (same version).
When user visits www.mywebapp.com, the extension would inject the React library into the page and skip downloading the script.
Is this possible and/or advisable?
That's probably not a good idea, because you don't directly control updates of your extension. And the two have to be more or less in sync.
Suppose you need to update your site. Then you want to update the extension as well. That's at mercy of Google, and takes time. It's best if such updates are fully controlled by your web app server.
There are much better mechanisms to speed up (subsequent) load time by using client-side caches such as ApplicationCache. Here are a few resources to start:
A Beginner's Guide to Using the Application Cache # HTML5Rocks
Your first offline web-app # Google Developers
Application Cache is a Douchebag (for some gotchas)

I need a way to store information offline using a web-app

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/

Offline mode app in a (HTML5) browser possible?

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.