I have next index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> {{content-for 'head'}}
<meta name="fragment" content="!">
<link rel="icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css?{{app-version hideSha=true}}">
<link rel="stylesheet" href="{{rootURL}}assets/ember-drink-it.css?{{app-version hideSha=true}}"> {{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="{{rootURL}}assets/vendor.js?{{app-version hideSha=true}}"></script>
<script src="{{rootURL}}assets/ember-drink-it.js?{{app-version hideSha=true}}"></script>
{{content-for 'body-footer'}}
</body>
</html>
I want to add version to my css and js file to prevent users load these files from cache when version grows. As you see, I already tried with ember-cli-app-version addon, but it helpers doesn't work in index.html file for some reason.
So how can I add version to my app files?
You mentioned that I want to add version to my css and js file to prevent users load these files from cache when version grows.
By default, Ember CLI puts an md5 hash at the end of the url of the assets. So that browsers can track the changes. This is called fingerprinting. This is enabled in production builds by default.
To look forward about fingerprinting have a look at this doc.
Further, instead of using md5 hash, if you want to use your versions as a fingerprint; you can customize the fingerprint options. Get value by using the require('git-repo-version') and set the value to the customHash of fingerprint.
But, default configuration is good enough.
Related
I am trying to set up an extra website in a firebase project.
A first website is already working. The second is meant to become an API that customer sites will be able to query.
This is the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>API-PAGE</title>
<script type="module" src="index.js"></script>
</head>
<body>
<h1>MY-API-PAGE</h1>
</body>
</html>
The main file for the API is called index.js. But I presume its content is not very relevant for the question.
I am getting this error:
Loading module from “https://example.web.app/index.js” was blocked because of a disallowed MIME type (“text/html”).
What is the kind of mistake, that I may have made, which can lead to this kind of error?
This error occurs because index.js is not found where specified (in this case, where is isn't specified).
Add:
<base href=".">
Or alternatively use the context route to reference the JS file.
I am having a simple markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="prefetch" href="page2.html">
<link as="script" rel="prefetch" href="./src/script2.js">
</head>
<body>
<p>Let's check</p>
Go to page 2 where script2 is there
<script src="./src/script1.js"></script>
</body>
</html>
Here I am prefetching the second script script2.js. It is prefetched successfully but when I click on page 2 link where I have my script tag script2.js, again script2 is downloaded it is not taking it from prefetch cache.
Here is the page2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This is page 2</p>
<script src="./src/script2.js"></script>
</body>
</html>
Had similar issue and the cause for me was that I had disable cache enabled in Google Chrome.
You can see how to disable/enable caching in Chrome DevTools on this answer https://stackoverflow.com/a/7000899/2992661
I've been facing this issue for a while, just got a clue that HTTP header VARY will hurt prefetch cache. checkout the MDN description about VARY.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary
The Vary HyperText Transfer Protocol (HTTP) response header determines how to match future request headers. This information is required to decide whether or not a cached response can be served instead of requesting a fresh one from the origin server. This response header is used by the server to indicate the headers it used when selecting a representation of a resource in a content negotiation algorithm.
in my case, after i remove 'vary', the 'prefetch' script did load from 'prefetch cache'.
I am trying to enable browser cache the javascript, css files of my web application. The document type I'm using is a JSP.
I see manifest.appcache is deprecated, what is the best way to implement caching so that browser caches the js, css files.
Below is my code
<html manifest="../manifest.appcache">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Web app</title>
<link rel="stylesheet" href="<%= contextPath %>/app.css">
</head>
<body>
<script type="text/javascript" src="<%= contextPath %>/app.js"></script>
</body>
</html>
You have to add Expires to your http response headers. This will make the browser in the client side to save the component of the page until that date.
If you wonder how to set the headers while sending a response, you have to know to configure your server either by using a back-end programming language, or a third party.
Please see expires header .
Try adding this to your html file <meta http-equiv="Cache-control" content="public">
Built a site in MVC, including jQuery in the layout file like this:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Scripts.Render("~/bundles/jquery")
#Styles.Render("~/Content/css")
</head>
<body>
<!-- content -->
</body>
</html>
JQuery is referenced via nuget and bundled like this:
public class BundleConfig
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui.min.js",
"~/Scripts/stickyfill.js"));
}
And that works fine running the site locally in Visual Studio.
When I deploy to IIS and try to run the site I get the dreaded Uncaught ReferenceError: jQuery is not defined error.
The first thing I checked was that the jQuery package was available via the address the deployed page was trying to use:
/bundles/jquery?v=[a token]
Which it is. You can even see it referenced in the bundles from Chrome Developer tools. It may be worth noting that the css, which is deployed via the same mechanism with a token, works fine.
I've also worked my way down the answers to the question JQuery - $ is not defined and either eliminted or tried them, to no avail.
The only thing I can think of is that it's not loading before the initial call to jQuery(document).ready() - which is why I moved the bundle into the <head> tag. But that doesn't help, and I don't know what else I can do to slow or wait for page load.
What on earth else could this be?
EDIT: Somone asked for the head of the rendered page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[the title]</title>
<script src="/bundles/jquery?v=[a token]"></script>
<link href="/Content/css?v=[a token]" rel="stylesheet"/>
</head>
try this :
public class BundleConfig
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.8.2.min.js",
"~/Scripts/jquery-ui.min.js",
"~/Scripts/stickyfill.js"));
}
I'm not exactly sure how to ask this question. I don't have easy access to my company site to try this using normal AJAX calls, so I'd need to resolve cross domain issues as well as possibly change settings on our Jira server. Since I'm home all week this week ostensibly on vacation, but a bit bored before Thanksgiving, I thought I'd play around with this so I can get a jump on the project I just got assigned this past Friday.
Using the Jira Rest API, if I drop https://jira.atlassian.com/rest/api/2/projectinto a browser (Chrome) and press enter, I get valid JSON data back in the browser. Granted you have to have valid Jira credentials as well as be already logged onto the site for this to work (otherwise you just get [] for a response), but for the experimentation I'm doing that's OK. I'm just trying to generate some valid data that I can massage into a form.
How can I do this in JavaScript in an automated fashion so the returned JSON goes into a variable that I can use for subsequent data manipulation? Ideally this should work on our real Jira site, but I'm fine if it just works on the sites linked in this question, as I said I'm just doing some experimentation trying to read project data and associated properties.
I've tried (cite):
$.getJSON("https://jira.atlassian.com/rest/api/2/project?callback=?", function(result){
//response data are now in the result variable
alert(result);
});
I've also tried to simply eval() the string into a variable, but that doesn't work either.
My eventual project will most likely be in jQuery / jQuery Mobile, but a straight JS answer is fine, I can translate that into jQuery later if it becomes necessary.
EDIT:
Here is the HTML I'm using to test this and suggestions being made, pretty much straight out of https://html5boilerplate.com/:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
var result = $.get("https://jira.atlassian.com/rest/api/2/project");
console.log(result);
</script>
</body>
So using AJAX / .get, etc was the wrong approach (at least for this experiment, it's the right answer for when I have access to the JIRA server).
What I found that worked was using:
location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
console.log(data);
This is not a perfect answer because it replaces the body of the web page with the JSON response from JIRA, but it allowed me to move forward. I found several different methods to try in this SO post.
Here's the whole web page:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Get JIRA data</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = document.getElementsByTagName('body')[0].innerText;
console.log(data);
</script>
</body>
</html>
The reason it doesn't work as well as it might is you still have to go after the fact & get the data in the console:
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
But that gives you an array of JIRA objects that you can then manipulate.
Adding this SO question to the answer because it contains useful information about solving CORS (Cross Origin Resource Sharing).