Build html5 javascript only using file :// uri protocol page for mobiles - javascript

I don't know if I googled it correctly but I could not find the answer for my question.
I'd like to know if it's possible to code a html5 with javascript (maybe jquery mobile for the UI) and css without using "native compilers/builders" like sencha touch or phonegap and store the page locally (using file:// protocol).
E.g: Let's say that I want to build a simple HTML5 calculator. I don't want any server-side processing, I just want some html buttons to call javascript functions to perform client side only operations. If I make such page, let's call it calc.html and download it to the mobile (via usb/http download), can I open this calc.html with the internal browser and use the calculator? Or do I have to compile/build this calc.html into a Webview (for Android) or something like it to get it done?
Would this work for Android, IPhone, Windows Phone and others with localStorage/sessionStorage?

You want an Offline Web Application.
This article seems to explains step by step how to do this.
http://diveintohtml5.info/offline.html
Creating a website like this, will allow you to bookmark it and have a shortcut icon in the phone's dashboard that will allow you to load your page in the browser for those cases where you don't have a data connection. In the case where the phone has a data connection, it will load the manifest to check if there are any new files to update the application. I don't think there is a way to make it truly offline though.

Related

Can I make a socket connection through Javascript

What I want to do
Make a simple socket connection to a server on the browser. I want to not send any header information with the socket connection.
The Problem
It looks like I am unable to make a socket connection with javascript that does not send header data (Is there a way to do a tcp connection to an IP with javascript?).
I thought maybe I could make a connection with a chrome extension, however it looks like the socket API is only available for chrome apps (Google Chrome Socket API in extensions).
I am thinking that I might need to make a native application that will make socket connections through requests made by the browser using Native Messaging.
Is there anyway I can achieve this or am I out of luck?
Raw socket connections through the browser are wrapped up in security concerns. Users can be easily manipulated to allow things to run that shouldn't.
TCP and UDP Socket API
W3C Editor's Draft 20 January 2016
is located here.
http://raw-sockets.sysapps.org/
Mozilla's API information here: https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/TCPSocket "This API is available on Firefox OS for privileged or certified applications only."
If you work with raw TCP connections. I would suggest
(1) downloading PHP onto the local computer. PHP has a developer web host build in so you can run whatever application you want on PHP using the browser as your GUI.
(2) download node.js.
You are not out of luck you just need to achieve it with the understanding that you are working outside the box for normal browser based scripting created from security concerns, and that means the user/client needs to install something manually.
If you must use chrome browser on the client side, you will need to make an -extension- correction webapp. You can as a developer make one that you can use on your own computers.
https://developer.chrome.com/extensions/getstarted
https://developer.chrome.com/apps/first_app
Load the extension#
Extensions that you download from the Chrome Web
Store are packaged up as .crx files, which is great for distribution,
but not so great for development. Recognizing this, Chrome gives you a
quick way of loading up your working directory for testing. Let's do
that now.
Visit chrome://extensions in your browser (or open up the Chrome menu
by clicking the icon to the far right of the Omnibox: The menu's icon
is three horizontal bars. and select Extensions under the Tools menu
to get to the same place).
Ensure that the Developer mode checkbox in the top right-hand corner
is checked.
Click Load unpacked extension… to pop up a file-selection dialog.
Navigate to the directory in which your extension files live, and
select it.
Alternatively, you can drag and drop the directory where your
extension files live onto chrome://extensions in your browser to load
it.
If the extension is valid, it'll be loaded up and active right away!
If it's invalid, an error message will be displayed at the top of the
page. Correct the error, and try again.
This insures that non developers don't load an extension which does not comply with the normal security concerns.
Communicating between with the script on the web page to the extension.
Can be done with message passing ... https://developer.chrome.com/extensions/messaging
The extension can add content directly to the web page which is available to the script on the web page. If for example the extension replaced the web cam image with a static image when the webcam script reads what it believes is the webcam it gets the static image instead, which explains why I look like an alien from space on the webcam. Although I did not create an extension to do that, I merely modified an existing extension to replace the function that gets the webcam image with a function to get a static image.
You can use SignalR, it is javascript library (JQuery Plugin) and it enables you to open web sockets from the browser to a server. Please check the following links:
https://blog.3d-logic.com/2015/03/29/signalr-on-the-wire-an-informal-description-of-the-signalr-protocol/
http://blog.teamtreehouse.com/an-introduction-to-websockets
https://github.com/SignalR/SignalR

JavaScript - one link, all app stores, non-Safari detected

I'd like to have a single 'Get App' link that auto-detects the user's device type and browser and directs to the appropriate location (iTunes, Google Play, or website sign-up). I am currently using Onelink.to, but it has the following limitations:
if you're on iOS using a non-Safari browser (like Chrome) you end up looking at a bunch of raw JSON because it doesn't know to launch the App Store app. In this case, I'd prefer to direct to the iTunes website or better yet, deep link into the App Store app.
if using the link on your own site and a user is on a device that redirects to a different page of your own website, it complicates setting up event-based goals in Google Analytics
Are there any good JavaScript solutions that handle the App Store redirect while excluding this action on browsers that don't support the iTunes headers?
Thanks!
You can use javascript navigator.userAgent and parse it to detect the device. Then just generate the link according to it.
Here is an example for ios detection:
Detect if device is iOS

Capture web page data using native language code

I'm looking for leads on how to capture web page metadata from the current browser page. I want to create a feature in my application that will allow the user to press a hot key and record meta data from the web page currently open in the user's browser. My application will be running minimized, this feature is to be activated by a global hot key.
I'm using nw.js (formerly Node-Webkit) to create this application, so ideally, the solution would be javascript running in a desktop installation of Node.js. If this is not practical, I understand that I can call platform specific code from nw.js, so solutions developed in any desktop os language would be of interest.
My application targets OS X and Windows.
I'm hoping to capture metadata from all major modern browsers (Chrome, Firefox, Safari and IE 10+).
At a minimum I need to capture the page url, but I also want to capture Keywords, Description and highlighted text for the source web page.
I need to implement this function without modifying the source webpage in any way, and I prefer to avoid the need for browser extensions, bookmarklets or plugins.
If a solution exists using a remote controlled browser extension (no user interaction) that would be of interest, but ideally I want to avoid requiring the end user to install or interact with anything but my application.
My search to date has located no information on reading web page information from applications outside the browser.
Any thoughts or leads are much appreciated.

Dial number from web page

I want to dial number using javascript.
I have used following code
document.location.href = "tel:15555551212"
It brings me to dial screen of mobile application. But I want to make a call directly.
I have also used "callto" but it is not working.
This is not possible, unless:
the Web browser holds the CALL_PHONE permission (so that the user knows at install time that this app might place phone calls), and
the Web browser exposes some means to have you place a phone call directly, perhaps via some DOM extension or magic snippet of JavaScript
Few, if any, browsers will meet these criteria.
A hybrid application (e.g., PhoneGap) could do this, given the proper permission and some API to enable it (e.g., PhoneGap plugin, if it is not part of the standard PhoneGap API).
You will probably need to use apache cordova to get access to native device APIs, including the one you can dial with. Link to the respective plugin
This is obviosuly only possible on mobile devices, and this plugin can only operate on iOS and Android. For more information about cordova, see this Link.

Launch mobile Safari from UIWebView *without* modifying app source?

I'm developing a small site that will only be viewed in-app inside a UIWebView, and one page has several links to an external website. I'd like these to open in mobile Safari, but all links inside the app load within the webview. Modifying the source of the app isn't an option since the site needs to be live before any changes could be submitted.
Is there a way to force a link inside a UIWebView to launch mobile Safari using HTML/5 or Javascript? Mimic shouldStartLoadWithRequest? Sneaky, hacky workarounds or brilliant alternate solutions?
(And, out of sheer curiosity... why not?)
It would be bad design to let sites access the frameworks on the iPhone via simple HTML. This would open up all sorts of security holes. Its not web behavior you want to alter, so I think you may need to change the app source. I still don't understand why that isn't an option. Could you go into more depth?
One option would be to add a custom URL handler. Your website could then determine if the "broswer" is the app and serve custom URLs for those links you'd like to maintain (aka open) in your app. Then, any standard HTTP/s URLs would open in Mobile Safari.
In other words, have your web server provide urls like myappurl:// for the links you'd like your app to handle, and http:// which would open Mobile Safari.

Categories