I am trying to add PWA functionality to a simple site, and I am running into odd issues with Chrome version 68.0.3440.106.
I am running on http://localhost:4502 for my testing, in the context of a CMS (so I am working within a few constraints). Also, note that I removed all my PWA/Service Worker code so there is no caching at play.
In the <head> .. I include the manifest via:
<link rel="manifest" href="/content/foo/bar.pwa.manifest.webmanifest" type="application/manifest+json">
(The "odd" name of the manifest file is a constraint of the CMS i'm working in; i've also used the "json" extension to the same effect as described below).
Which contains...
{"name":"Sample",
"short_name":"sample",
"theme_color":"#001F3F",
"background_color":"#FF4136",
"display":"standalone",
"scope":".",
"start_url":"/content/foo/bar.html",
"icons":[{"src":"/content/assets/sample.jpg","size":"192x192","type":"image/jpeg"},{"src":"/content/assets/sample.jpg","size":"512x512","type":"image/jpeg"},{"src":"/content/assets/sample.jpg","size":"144x144","type":"image/jpeg"}]}
I've observed the following:
When I have JS/CSS includes ABOVE my <link rel="manifest" .. things go haywire.
* If i copy the page's URL, paste it into a NEW chrome tab (a refresh of an existing tab does not cut it), and open up Chrome Dev Tools FOR that new tab, I can see the HTTP request/response for the manifest, and in Dev Tools > Application > Manifest is appears to display everything correctly. (so far so good).
* If I then REFRESH this tab, i don't see the request for the manifest and the Application > Manifest section is blank. The HTML source has not changed at all.
* No matter how many times I refresh it doesn't seem to help (also clear cache, etc.)
2) When i move the <link rel="manifest" to be ABOVE any CSS/JS in the <head> it seems to load consistently and correctly. Refreshing the page the HTTP request for the manifest displays, and Application > Manifest displays the correct info.
I've been scouring docs (Google, MDN) to see if the manifest MUST be included before ANY other includes, but I can't find anything that says that - and it's odd that on the first load of a tab, it seems to work even when included after CSS/JS.
Im hoping there is a way to get this to load regardless of where in the <head> the <link rel="manifest".. happens to be (as the CMS makes it hard to guarantee the order)
No, the relative position of the <link rel="manifest"> within your page's <head> does not make a difference from the perspective of how it's parsed and interpreted.
I'm hard pressed to explain the behavior you're seeing, other than perhaps a syntax error in the HTML that includes your JavaScript and CSS, causing the subsequent <link rel="manifest"> to be parsed incorrectly. But in general, the position shouldn't matter.
Related
I'm developing a gatsby theme/starter for PWA's, but I can't seem to get rid of the following console warning:
The resource https://davidde.github.io/gatsby-starter-simpwa/page-data/offline-plugin-app-shell-fallback/page-data.json
was preloaded using link preload but not used within a few seconds from the window's load event.
Please make sure it has an appropriate `as` value and it is preloaded intentionally.
On first load everything works fine; the service worker registers like it should and there is no warning. However, after reloading, this warning shows up. This makes no sense since the as value is set to 'fetch'.
I'm assuming it has something to do with the configuration of gatsby-plugin-offline or maybe gatsby-plugin-manifest.
The source code is at https://github.com/davidde/gatsby-starter-simpwa,
and it's deployed to https://davidde.github.io/gatsby-starter-simpwa/.
Does anyone have any idea what is causing this?
In public folder in react app here is an index.html paste this line inside index.html and try again to run react app
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
I downloaded the latest Dojo and Dijit to my local Windows 10 computer.
My disk structure is:
C:\webapps
c:\webapps\dojo
c:\webapps\demo
c:\webapps\dijit
I'm clicking on this file to load with Chrome browser:
c:\webapps\demos\themePreviewer\demo.html
It shows the following, and is stuck forever with the "Loading..." message.
Internally, I see the following references to css files:
<link rel="stylesheet" href="../../dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
I can see those on my disk, here:
c:\webapps\dijit\themes\claro\document.css
c:\webapps\dijit\themes\claro\claro.css
Seems like it's a problem finding the files? But wouldn't Chrome debug tell me that? I also tried copying the dijit directory to:
c:\webapps\demo\dijit
Later I noticed there is one href in the program:
href:'../../dijit/tests/layout/getResponse.php?delay=3000&messId=3'
that I changed to:
href:'http://demos.dojotoolkit.org/dijit/tests/layout/getResponse.php?delay=3000&messId=3'
Try to run the app from a localhost instead of file:///.
In case the problem persist, you could debug it more and see if some dependencies are missing using Chrome Developer Tools > Network tab, in this way you should be able to identify any 404 errors.
i have a web project which works find in web. I want to transfer it into phonegap windows phone project .
Everything works fine but in a search option whenever i click in the search option it shows nothing showing a message "We are having trouble to display this message". N:B: this search option works properly in the web.
here is my search code:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>
var c=getCatalogue();
var bestNew=getBestNew();
$("#recherche").click(function(){
var v=$("#search").val();
window.localStorage.setItem("search",v);
if(v!="") routePage("recherche.html?search="+v);
});
</script>
I think problem is when i pass the value to another page that is "search="+v".
When i use if(v!="") routePage("recherche.html); instead of if(v!="") routePage("recherche.html?search="+v); then it works.
Try downloading and using JavaScript imports locally instead of fetching a remote version if not strictly necessary.
See:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Also phonegap.js should be included:
<script type="text/javascript" src="phonegap.js"></script>
You will need to move the JQuery source to a local file and update your script tag, like you have with materialize.min.js. Loading library JS from the network is not a good idea as it slows your app's startup down and also will cause it to fail when started in a situation where there is no network access.
Additionally Cordova/PhoneGap's Content Security Policy may be blocking remote script loads for security reasons - you don't state which PhoneGap/Cordova version you are using, but this may be a problem for you in Cordova 5. There's a tutorial on dealing with that here. You can configure around this by adjusting the Content Security Policy meta tag to allow script-src from other than "self" but I wouldn't recommend this.
When running in Cordova/PhoneGap you should also wait for the "deviceready" event before trying to do anything, to make sure that the framework is fully initialized and that you have access to call plugins.
Also instead of loading new pages you should architect your app so that it is a single page app and generates page fragments from templates as needed. Try looking at something like Handlebars for this unless you have another preferred solution. I have a complete demo app that uses this approach that you can look at the source for here.
I am in the middle of a project and this morning the less JS file (I am currently using the "less.min.js" JS file for the browser (Chrome) states in the console "failed to save". This is causing my "scripts.js" file to fail when functions are in the "$(window).load()". Interesting enough, however, Bootstrap is still working, as is my LESS CSS (all my styles are on the page as it should be).
I also have Web Essestials installed, and is set to auto-compile on save (this setting was set previous to the error).
<title>#title</title>
<link href="#Fingerprint.Tag("/Content/bootstrap/bootstrap.less")" rel="stylesheet/less">
<link href="#Fingerprint.Tag("/Content/styles.less")" rel="stylesheet/less" />
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src="#Fingerprint.Tag("/Scripts/modernizr.custom.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/jquery-1.9.1.min.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/bootstrap.min.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/less.min.js")"></script>
#*TODO: pre-compile less and remove script*#
<script src="#Fingerprint.Tag("/Scripts/json2.min.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/jquery.hoverIntent.min.js")"></script>
<script src="#Fingerprint.Tag("/Scripts/scripts.js")"></script>
I have checked my security settings for IIS and they seem to be fine (once again, these are all the same settings as I was using yesterday prior to the error).
XHR finished loading: GET "http://local.lenders-one.com/Content/bootstrap/v-635549376660341373/bootstrap.less".
less.js:408
XHR finished loading: GET "http://local.lenders-one.com/Content/v-635556102777513301/styles.less".
less.js:771
failed to save - less.js:771
The "Fingerprint" class is a utility class that applies fake folders for file caching. I removed the utility class from the javascript/LESS files and I was still receiving the error.
I am using LESS v2.0.0 - any help is appreciated.
The "failed to save" is not very descriptive, but this error is send when less.js fail to write the compiled CSS code to local storage. (in your case possible because the path is not right) (see: https://github.com/less/less.js/blob/master/lib/less-browser/cache.js).
Interesting enough, however, Bootstrap is still working, as is my LESS CSS (all my styles are >on the page as it should be).
Although caching fails the compiled code will be send to the browser.
(once again, these are all the same settings as I was using yesterday prior to the error).
setting less.env to development also disable the caching and so the error.
I created an Asp.Net MVC Internet Aplication and in my Index view of the Home Controller I have this
This is the first line, before the script results.
<script type="text/javascript" src="~/Script/Teste.js"></script>
<br />
This line comes after the script.
In my Teste.js I have this:
document.write("Yes! I am now a JavaScript coder!");
But nothing happens. If I change the src attribute and put some random name src="aaaa", despite the fact "aaaa" doesnt exist, I get no error in runtime.
EDIT
Also, check your path again. The default MVC templates in VS create a folder called Scripts, not Script. ("~/Scripts/teste.js")
Per the comment below, this was not the root cause of the issue, but in other cases can easily bite new JavaScript developers.
Most likely, your document.write function is firing before the document is ready, leading to the appearance that nothing is happening. Try the following in your Teste.js file
window.onload = function ()
{
document.write("Yes! I am now a JavaScript coder!");
//or even better as a test
alert("This alert was called");
}
Check the source of your page as well, it could be the document is being written to, you just can't see it due to markup/page styling.
As for you second issue, there will be no 'Runtime Exception' thrown if you reference a non-existent file. If you are using tools like Firebug or Chrome's developer tools, you should see a request to http://siteDomain/Scripts/aaaa.js with a response of 404, not found.
You generally should avoid using document.write() unless you absolutely have to use it for some reason... I don't think I've ever come across such a situation, and write a lot of Javascript.
Try this:
1) Put this in your HTML:
<script src="/scripts/teste.js"></script>
2) Put this in your JS:
alert('Yes! I am now a JavaScript coder!');
3) Open Chrome since it makes it easy to look for external resources loading and open the Network tab in Developer Tools (click the menu button at top-right, Tools > Developer Tools, Network tab).
4) Run your project and copy/paste the URL in the browser that comes up into this Chrome window, and hit enter.
When your page loads one of 2 things will happen:
A) You'll get the alert box you wanted or
B) You'll find out why it isn't loading because the Network tab will show the browser attempting to fetch teste.js and failing in some fashion, for example a 404, which would indicate you've got a typo in the path, or the script isn't where you thought it was, etc.
Put the following line at the very end of your document. There should not be anything after. Then try to load the page.
<script type="text/javascript" src="~/Script/Teste.js"></script>
Also, try pressing F12 once the page loads to see the source. Check if you script is there.
In MVC, the tilde is used to refer to the root URL of your application. However, it cannot normally parse this information. If you write:
<script src="~/Script/Teste.js"></script>
The lookup will fail, because the ~ means nothing special in HTML. If you're using Razor as your view engine (not ASPX), you need to wrap that call in Url.Content like so:
<script src="#Url.Content(~/Script/Teste.js)"></script>
Doing this will ensure a valid URL is provided to the browser.
With that in mind, you need to check that you have the file name and folder name both correct. You also need to ensure that the file is being deployed with your application. You can do this my opening the properties panel while the file is selected in the Solution Explorer and pressing F4.