Im in the process of building a HTML5 based web application which ideally would be made downloadable from a web based url via a link.
Should this link be clicked on a desktop machine, it would bring up some sort of overlay informing the user that they need to be on a mobile device to be allowed the download.
Basically Im looking for a way to enable the download only via a mobile device.
If anyone has a solution or can reference another page that does ( Ive looked but not been able to find anything ) it would be much appreciated.
Thanks in advance.
There is two standard ways to do it:
Check on client (parse UA or detect device features).
Check on server (parse UA).
To parse UA use ua-parser-js on client and you will able to get device type desktop, tablet or mobile. Or with nodejs on server side (it allows you to hide algorithm). But UA parsing is not a assured method (because UA could easily be overwritten).
Device features detection depends on target device. You can check browser plugins, protocol support or something special. This is an example of how does Apple checks iTunes support.
Related
I want to develop an app (for Chrome desktop) that will retrieve data from different webpages the user surf to and aggregate it, or inject some added JavaScript functionality to those pages, later on showing the user statistics about the webpages he surf to. Like how many pages the user have been having more that 3 images in them.
Now, I know Chrome Extensions can Inject JavaScript code and therefor also retrieve data, but I want my App to be a Chrome App. Can it also pull data from WebPages and / or Inject JS to those pages ?
Thanks.
A Chrome App is, by design, isolated from the browser. You can't enumerate tabs, inject content scripts, etc. at all, as you can see from an entirely different list of available APIs.
While you could embed a pseudo-browser in your app using the <webview> tag, it's going to be hard to convince the user to use your limited browser over "real" Chrome.
If you want to interact with a browser, you need an extension. If you also really need Chrome App capabilities you'll need both separately, and they can talk to each other.
I'm using a class to register my protocol, lets say lorem: to operating system. Its working perfect but I would like to do couple of things.
I want to create something like Skype Click to Call. People will share uri's like lorem://12345678 and when others click this the event handler will redirect that request to my windows application. I want to make this uri clickable. How can identify this new scheme to browsers so when a page contains lorem://12345678, browser will transform it something like
lorem://12345678 and users be able to click it.
Can I do it with browser configuration or should I write some kind of extension to implement this rule. It must support all browsers so is that means I need to write same extension for Chrome, Firefox and IE? And how can I install all extensions with my software setup?
Straight to point question: I want to transform lorem://ipsum text to My URL! on most popular browsers
as i understood -- you need to write extensions for each browser, check out this question:
how do I create my own URL protocol? (e.g. so://...)
and this is an example of browser approach:
Custom protocol handler in chrome
I'm building a single-page Dart web app that will essentially consist of 1 Dart file (cross-compiled to JS) and 1 HTML file that has several "views" (screens, pages, etc.). in it. Depending on what "view" the user is currently located at, I will hide/enable different DOM elements defined inside this HTML file. This way the user can navigate between views without triggering multiple page loads.
I would still like to use each browser's native history-tracking mechanism, so that the user click can the back- and forward-buttons in the browser, and I'll have a Dart Historian object figure out what view to load (again just hiding/enabling DOM elements) depending on what URL the browser has in its history.
I've pretty much figured everything out, with one exception:
Say the user is currently "at" View #3, which has a URL of, say, http://myapp.example.com/#view3. Then they click a button that should take them to View #4 at, say, http://myapp.example.com/#view4. I need a way, in Dart, to tell the browser to:
Set http://myapp.example.com/#view4 in the browser URL bar
Add http://myapp.example.com/#view4 to the browser's history
If not already enabled, enable the browser's back button
I believe I can accomplish #1 above like so:
window.location.href = "http://myapp.example.com/#view3";
...but maybe not. Either way, how can I accomplish this (Dart code communicates with browser's history API)?
Check out the route library.
angular.dart also has it's own routing mechanism, but it's part of a much larger framework, so unless you plan on using the rest of it, I would recommend the stand-alone route library.
If you want to build your own solution, you can take a look at route's client.dart for inspiration.
There are two methods of history navigation supported:
The page fragment method that you've used. Reassign the window location to the new page fragment: window.location.assign(newPathWithPageFragment). Doing this will automatically add a new item to the browser history (which will then enable the back button).
The newer History API, which allows for regular URLs without fragments (e.g. http://myapp.example.com/view3. You can use window.history to control the history.The History API is only supported by newer browsers so that may be a concern (although given that dart2js also only supports newer browsers, there are probably not too many instances of a browser that dart2js supports that doesn't support the History API).
One issue you will have to handle if you support History API is the initial page load. When a user navigates to http://myapp.example.com/view3, the browser expects to find a resource at that location. You will have to setup your server to respond to any page request by serving your Dart application and then navigate to the correct view on the client-side. This issue will apply whether you use route, angular.dart, or build your own solution, since this is a general server-side issue and the above are all client-side libraries.
We're going to create a data-driven mobile HTML5 app. I was thinking we can just access it using the default browser on each platform. I read about caching behavior of browsers on latest versions of iOS and Android, but wasn't able to find any information about the possibility of telling the browser, by using some sort of headers or whatever, to store a particular resource, HTML or JS or CSS or an image, indefinitely in cache until a certain date, for ex. Is that even possible?
The idea here is users open the application regularly but not often. Their browsing will fill the cache with other data; we need to "pin" or "anchor" our app to stay there despite cache being filled, like "higher priority".
Any other suggestions would be welcome (ie., creating a "shell" native app, etc.)
These links answered the question:
http://www.w3schools.com/html/html5_app_cache.asp
http://www.html5rocks.com/en/tutorials/appcache/beginner/#toc-updating-cache
I'm curious to know your ideas on the best methodology to build offline-capable mobile web apps on to provide the best UX to the end user.
The end product should use localstorage and appcache but be completely transparent to the user (i.e. for cache manifest, if a user navigates away from the page before everything is downloaded, the caching is restarted).
Is the only method to provide this functionality to build it for example on Backbone.js and have a single page app where the downloads can happen asynchronously in the background?
What other frameworks / technologies have you come across?
Let's see, offline web-apps? The two big things that I think do the trick are:
Local storage Embedded images w/Data URI's
(http://css-tricks.com/5970-data-uris/) Embedding
Javascript/stylesheets in the page (no external files that are
required for the site)
Together, those make a pretty solid offline app which is able to function without an internet connection.