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
Related
I want to use the resource hint "prerender" (W3C) to speed up a website, but prerender is depricated in Chrome since v58. I read that NoState-Prefetch should be used instead (Google Dev), but I don't find anything on how to use it.
Does anybody know how I can prerender a site with the current version of Chrome or how to use "NoState-Prefetch"?
I'm grateful for every suggestion. Many thanks in advance.
Prerender is not deprecated, in fact it's part of the w3 standards. Though the standards are clear in that the user agent SHOULD fetch, however later it describes that it May preprocess, and adds a point later that the user agent might decide not to do anything.
Chrome initiated the prerender resource hint, previously it meant that the whole page should be pre-rendered in a hidden renderer process, but currently chrome does NoState-Prefetch which is less powerful than a full render but should still save time - in case the browser actually do it.
You can take a look at the following document to dig deeper, into why chrome changed the implementation of prerender, and when/what does No-State Prefetch do exactly.
To check that the browser did prerender locally:
go to chrome://net-export/ ( this will export a log of all the network activities happening from all chrome windows, apps, and extensions)
go to the website where you want to check prerendering, give it some time to idle and do the prerendering
save the json file from the net export page, and load it into https://netlog-viewer.appspot.com/
After its loaded, check the Prerender page found in the menu in the left side
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 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.
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.
I want to know whether it's possible to get Information about opened pages in Chrome (page title, url) from third party app (not extensions)?
You can try use the Accessibility techniques. Chrome implemented IAccessible interfaces in Chromium that any screen readers can read. If you implement a screen reader like application you can easily get those data. But to do that, you would need to understand how accessible applications work.
Or you can check out ManagedSpy, where the source code is provided: http://msdn.microsoft.com/en-us/magazine/cc163617.aspx
It's definitely possible using Fiddler. In the Web Sessions list, it shows all the URLs that are accessed, and the program (and PID) that accessed them, including Chrome. If you click on one of the URLs and look under Inspectors on the right, then Text View on the lower section, you can see the <title> section for each page.