Test if prerender works locally? - html

I am using the following tag to prerender:
<link rel="prerender" href="//address.se/sv/get-started.html">
I am running the website locally at the moment. Is there any test I can run (perhaps via the chrome inspector) to see if my browser finds and prerenders the file?

Yes you can test if prerender is happening locally, though it is little harder and requires tools beyond the regular developers tools.
Notice that at the time this question was asked, prerender was doing something different than what it does now, previously it used to prerender the whole page in a hidden renderer process, now it does something less powerful than that (NoState Prefetch)
To check what has been pre-rendered:
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

Related

Close a game in Godot

I'm creating a web game using Godot.
For close the game, i tried to use `get_tree().quit()`.
If I use it on the IDE, it works. When i tried it on my server (after exported the project) it doesn't work.
I'm sure that Exporting setting are okay.
How can I close the game?
And, how can I add an hypertext link (similar to html `` tag)?
Thanks for your answer and sorry for my bad English
Exit the game
On the web, using
get_tree().quit()
Should work. That is, it should stop the runtime. The game will not continue running. It does not close the browser tab. In fact, browsers have restriction on scripts closing tabs.
Note: Make sure you are using Godot 3.2.3 or newer (see #39604). I tried it, it works.
Making a link
You can a LinkButton, which is a button that looks like an hyperlink. And you want to connect its "pressed" signal to a script where you use OS.shell_open, for example:
OS.shell_open("https://example.com")
Note: This result in a new tab in web exports. On the desktop it opens the default browser.
Navigating the browser
Since you ask about closing the game, and about making a link, I'll venture to guess that what you actually want is to navigate (leaving the game and going to another page), you can accomplish that with JavaScript.eval, for example:
JavaScript.eval("window.location.href='https://example.com'")
Note: This can only work on a web export.
Detecting Web Build
You can use OS.get_name to identify the platform.
For example, you can do this:
if OS.get_name() == "HTML5":
JavaScript.eval("window.location.href='https://example.com'")
else:
OS.shell_open("https://example.com")
Which will navigate the browser if this is a web build, but if it isn't, it will try to open the default browser.

Depricated rel="prerender" in Chrome

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

What is the mechanism of gulp.browersync? Such as cssinject and sync-scroll for multiple browsers

gulp.browersync is like black magic to me. I want to understand the technique it used.
In css-injection, how does the browser know css file is changed? Why can it redraw the page without refresh? Why is it not the case for .html/.js update?
When there are multiple browsers open the sync-ed page, if scroll down in one, others follow. Why? What actions can be sync-ed, and what not? It is really amazing.
To my understading Browsersync is a service that does a few things...
The black magic occurs when it injects a Javascript file in your page (see the source code of your page). How? It's listening connections in a specific port (creating a proxy server) and then modifiying your page.
The injected JS listens to the commands that the service is sending, through techniques like web sockets... or simple async requests for older browsers I think...
For example, when you move your mouse, it send to the other pages a similar command to replicate the state...
Also Browsersync, if running, keeps watching the files you specify to watch, CSS files for example... and sends the needed commands if those files are changed.
Many automation tools like Grunt or Gulp could integrate with it to get the coolest development workflow you can imagine... Testing multiple devices, rebuilding caches and more...
And yes... it's like black magic :D
See Browsersync requests in action here: https://webmshare.com/ovwGg
I am also new to browsersync, what I found so far is listed below:
BrowserSync is an automation tool that makes web development faster.
BrowserSync lets you launch a local web server around the working directory so the target page and its related files can instantly be accessed on all devices connected to your home network by pointing them to a localhost URL. Furthermore, it supports live reloading, so any changes you make to the page or its CSS triggers a refresh of the browser on all connected devices for you to preview.
BrowserSync is like a LiveReload (it watches for changes you make to a web page and automatically updates the browser), except that it also works across multiple devices.
BrowserSync that being able to scroll inside one browser and see that action mirrored in all others.
The Action Sync feature (enabled by default) will copy scroll position, clicks and form inputs from one browser to all of the others that are connected.
Some useful links:
https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development
http://www.javascriptkit.com/howto/mobilefriendly2.shtml
http://www.creativebloq.com/web-design/test-your-sites-multiple-devices-81516496
I have one issue faced during working with browsersync, if anyone here interested to answer can visit the link: How to sync the actions performed on webpage using Browsersync?.

How to See What Processes are Running on Website

I have a site/web-based application I'm working on and everything is running smoothly but recently when I've loaded up the pages (I use Google Chrome), the tab in the browser has the little 'loading' circle image that never ends. It's as if it's still loading the process and running something but nothing seems evident.
Nothing shows up in the developer console (error, warnings, etc.) and the actually speed of the page isn't affected when you click around. Also, there's no message at the bottom of the browser that says 'Resolving host...' or 'Loading www.example.com...', etc. I do have some AJAX going on on the site but not sure if that's the culprit.
Is there any way with developer tools to determine what processes are running on the page at the moment so I can begin to troubleshoot? Thanks for your help!
You can use fiddler tool to see what ajax requests are being generated and how much is time taken for every request.

Local WebSite: run default browser

I need to create a brochure-cd from a website I did. All resources are html, images and xml, so i don't have any problem at all in accessing file system. My question is: once I open my index.html page in browser, how can I set the params of the window (eg: show addressbar, show statusbar, etc)
Thanks
(If you have an alternative idea of how run an html based brochure on CD just let me know)
EDIT: Specs changed, I've just knewn I must write xml and upload file, too. Any idea? I'm considering Adobe Air, but would be amazing if I can compile a whole .NET website into an exe..... Anything similar?
The only way you can set these is when you open the page, not after it's already present. So, you will probably have to have a start page, which then opens your new page, with the parameters you want.
Be warned though, if you have any JavaScript, many browsers won't allow scripts to run locally, or will present a nasty warning message before it will execute.
You may look into having a small desktop application on the CD that launches an instance of a browser inside of itself, assuming you can run the browser on every machine this will be run on. This will probably give you the look you're after.
I think you can't. You can only set params of a window you create. So you'll have to run a script on load that creates a new window and then closes the initial window.
There is however no way that this script is executed without warnings, if at all.
An alternative would be to develop an executable that is able to display the page, but that might not be easy, especially when you want to be browser and platform independent.