I'm trying to develop a Angularjs Offline application for that I'm making use of application cache to cache all the resources. To implement this we need to include all the files in the cache.manifest file include that file in the html
My app.cache File:
CACHE MANIFEST
CACHE:
app.cache
index.html
app/app.js
NETWORK:
*
SETTINGS:
prefer-online
# hash: 23567ecbf082c4c3ccc008701719ab3b089ff8043b7ef5d1c11e5af003eb6250
Index.html
<html ng-app="myapp" manifest="app.cache">
....
</html>
This is how I'm trying to cache files let. but this starts caching the resources upon page load.
Can we cache the resources when we want to, say when a button is clicked?
Related
I load an HTML file into a WKWebView on Xamarin.iOS using webView.LoadHtmlString(). This HTML file references a CSS file and a JS file, for example:
<html>
<head>
<link rel="stylesheet" href="https://example.com/styles.css"/>
</head>
<body>
<script src="https://example.com/script.js"></script>
</body>
</html>
I want to intercept these requests in my code so I can inspect the details of the request, and reroute them to a local cache. I use a subclass of WKNavigationDelegate, with an overridden DecidePolicy() method to intercept requests.
The problem is that DecidePolicy() does not get called for these two requests (for the CSS and JS files). DecidePolicy() only gets called when the user triggers a navigation action.
I have also tried using webViewConfiguration.SetUrlSchemeHandler() with an implementation of IWKUrlSchemeHandler, and replacing instances of "https://" with "customscheme://" in my HTML file, but the method StartUrlSchemeTask() does not get called.
How can I intercept requests for linked resources in an HTML file?
Thanks
Try the following steps
Register custom scheme with WKWebView .
Convert file scheme to the custom scheme .
Use LoadRequest instead of LoadHtmlString .
Implement 2 methods of WKURLSchemeHandler protocol and handle 3 delegate methods of WKURLSchemeTask.
Refer to
https://stackoverflow.com/a/21959563/8187800
How to intercept a WKWebView request to detect which local resource files (css, js, png, ...) load together with a HTML file?.
Our React app is served from a static hosting using S3 and CloudFront.
We configured S3 and CloudFront to add CloudFront-Viewer-Country in the return header of each request made to resources in it. So for instance, our index.html makes a call to get the .js bundle from CloudFront, the returned header would include: cloudfront-viewer-country: US in my case.
My goal is to have the React app "wake up to life" already knowing the location of its user. I realize I can probably add some javascript to the index.html to keep/store it somehow so that the React root component can pick up on that and pass it on to wherever it needs to be (probably the redux state). But then I ask myself, how do I tap into the response header received when the <script> tag finished loading the bundle in order to extract the custom header from it?
the index.html is pretty straightforward. Its body looks like this:
<body>
<div id=root></div>
<script type="text/javascript" src="/myBundle.ac9cf87295a8f1239929.js"></script>
</body>
What do you recommend?
It isn't possible to access the headers from the page load or script load. You will have to make a separate request to access the headers.
You could also use browser's locale (navigator.languages) if you need this information for localization.
I have two javascript files:
vendor.js - where I have angular.js and another libs;
app.js - own code.
But when I loaded it prerender not opened my page.
When I concatenate it to one file - all OK.
How can I fix it?
Looks like you might be loading those <script> tags in the <body> of your page. Scripts that are in the body are loaded asynchronously so they can load out of order (and cause javascript errors if loaded out of order). Chrome and most browsers handle this nicely but PhantomJS can load them out of order.
I'd suggest trying to move those <script> tags into the <head> and see if that fixes your issue.
My default file in nginx https://github.com/NatuMyers/nginxSSL-setup/blob/master/default
I used that, then my node app doesn't allow Angular to work, it just serves the static index page, but the routing etc doesn't work. When it was straight http it worked.
In my file with the node app I have app.js, node modules, and /public among other things.
in public I have angular packages, index.html, and partials.
When I call node app.js, it just serves index.html without the functionality. Here is a complete github of the set up minus the nginx content: https://github.com/NatuMyers/A.M.E.N.SQL-Stack
This is ubuntu, with Nginx on the digital ocean LAMP stack
You are including angular.js with
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
When your browser is loading assets for a https website it will block http only scripts. So you should change your link to have no protocol, just // and the browser will insert whatever the rest of the page is loaded with.
<script src="//code.angularjs.org/1.2.13/angular.js"></script>
Angular loads some fonts when starting.
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
When I start nodewebkit and I'm offline, it seems that try to load the fonts slows down the app...can I hold this font offline without loading?
Or angular alwasy watch online for this fonts?
Thanks!
This is not angular's concern. In HTML5 You can use an appcache for that.
as noted in http://www.w3schools.com/
HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection.
create a file beside your index.html named resource.appcache
add the link to the following files you want to cache inside resource.appcache
CACHE MANIFEST
# v1.0.0
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
then in your html, link it like
<!DOCTYPE HTML>
<html manifest="resource.appcache">
...
</html>