cache a part of web page using browser caching - html

I'm using yii framework in my web app.
I have huge size website Main Navigation Menu. It's a separate file named as Menu.html.
After some parsing using php it is rendered on the browser.
So the structure is something like:
{header}
{parsingMethod(menu.html)}
{middle content}
{footer}
So, on each hit the menu is parsed and rendered.
Is there a way that, once menu is loaded on client; it stored in browser cache. so that after consecutive hit it dose not load from server each time??
Although, I'm using Memcached to store menu.html so that application don't need to read menu.html file from disk each time. But I want to save this Memcached hit also once the menu is loaded on client.
Any help is greatly appreciated!
Thanks
Ashu

As far as I understand HTML5 appcache, there is no way to cache a certain part of a page. If you don't want to go through parsing and rendering the menu on each request, you can still make use of Yii's fragment caching.

Related

How to emulate the behavior of master page in Net.Core and VS Code

When building an MVC project, there's a shared folder automatically provided in which I have Layout.cshtml page that's used like the holder or master page (as it was called in Web Forms). So, all the banners, navbars, footers etc. go in there, while the acutal pages being developed refer to it in the source code and got pasted together upon rendition. This far I'm following.
Now, I have a set up and AspNet website using Yeoman and the only thing I have is wwwroot directory in which I put the file start.html. (It's the same as index.html - I just wanted to try out if I have full control over default files.)
I'm unsure how to proceed. I.e. I'd like the links on the start.html to point to files like uno.html, duo.html etc. and read those into a designated part of the landing page (i.e. start.html).
Is it doable without using the magic of templates? I want to have full control over the rendition process.
There's no point googling it, I noticed, because anything I've got the last two hours leads to how to create master page not to how to emulate master page.
Well, the static files middleware is just for that: static files.
You roughly have two options:
Do everything client sided, i.e. rather than having normal links use javascript/ajax calls and embed the content of the static file in your start.html using javascript.
It should work, but has several down-sites like it requires javascript to work (not a big issue these days, except for the paranoids who use no-script browser extensions) and that web crawler still may have issues properly indexing ajax heavy web pages
Wait until ASP.NET Core 1.2 (scheduled for Q1-Q2 2017), which will add Razor Pages. Pages rendered with Razor template engine, but without the need of a controller.
1.2
WebSockets
SignalR
Razor Pages (Views without MVC controllers)
Web API security
If you don't wanna wait, try RazorLight, which is 3rd party open source library for rendering Razor views.
But all except the first one require some "magic template engine".
You could of course write an server-sided includes (SSI) middleware which would be based on UseStaticFiles middleware and parse the file and include the html files server sided before returning it. There is nothing out of the box for it as far as I know.

How to prevent viewing website code

I have a website that has a lot of data and that is sensitive to the website so I made a code that prevents right clicks but if you are using Safari it is easy to see the data I need to hide the info also so safari cant view it ether.
Client side, you cannot secure your code from view. Firebug will still show the code. You should have sensitive data on the Server.
You can't.
If the data is sufficiently sensitive that people shouldn't be able to view it, don't put it on a web site.
I m not sure if there is a completely safe solution.
if its images, use flash to load them dynamically.
yet people who knows swf-bin specs can decompile your swf files and find out the real image path.
if its data & text.
as much I can do is to
1: use pure js to render all views.
use XMLHttpRequest/ActiveXObject to load data and import these ajax js code # runtime.
compress your js/css code before deploy
here is one of my mockups
2: on the server side
check the request header to drop command line request.
exchange cookie/session key for each time.
BUT, this will make google-bots don't know how to inspect your site.
so DON'T do that on your landing page.

Exclude page self by appcache

I have an appcache (with NETWORK *). So now I visit my page with <html manifest="/cache.appcache">. Then the page itself is cached as all the images are. But I want the page self to not be cached. How can I do this? I thought NETWORK * would do the trick.
Regards,
Kevin
The appcache manifest always caches the master page.
If you are using Chrome check the cached files for your page here: chrome://appcache-internals
A workaround could be to put a hidden iframe somewhere on your page, which contains the appcache file to cache offline content. (take a look at "Preventing the application cache from storing masters with an iframe" here: http://labs.ft.com/2012/11/using-an-iframe-to-stop-app-cache-storing-masters/ )
A better solution could be to write your page to fetch new content from your server when it is opened - if the server cannot be reached, it can serve the last known content from the HTML5 local storage.
I have tried the iframe work around, and find it ripe with errors. Most browsers cache the data for the iframe where the page cannot get it.
Instead make the page's content load via AJAX. Basically have a blank html page with the manifest and javascript which pulls and adds its content from the server. This way only the blank html is cached, and content is always updated from the server.
Converting a page to this method can be very difficult, but it works. Making sure the appropriate javascript gets run at the correct time, probably requires some detangling. Moving around server code which won't be called when pulling from cache to the new ajax method.
Note: no need to pull conditional content from the server if the condition is in the query string, different query strings make a separate cache

How to force caching of 10mb+ images so they never get reloaded?

I have a site which has 10mb+ of images (1000+ pngs) that have to be loaded before it starts. My current approach is loading every image in a hidden tag. How can I ensure that a client that accesses the site once/month, for example, will never have to download it all again?
No way. Client may have cache disabled, or he clears it every single minute
Compressed textures/generated textures/reused textures are how you should do it. You can't cache 10mb of images for a month reliably. If you need it for the game, then simply have a loading bar beforehand.
It sounds like you want to use an application cache. This means dealing with the page and its images as an application, with a cache manifest (.appcache file) listing them and the HTML document containing an <html manifest="..."> tag. See e.g. A Beginner's Guide to Using the Application Cache.

Loading Different HTML Pages in a Main HTML Page using HTML5 Websockts

i have a situation where i want to load different webpages in a browser where the URL will be passed over the web-sockets.
Now the problem is, if inside one html page which is connected to the sockets server, it receives a command to redirect to another url, the socket connection is lost and it is not possible for the new page unless it has this socket functionality built in it.
One idea is to use a main page with inlineFrame where i keep changing the pages while main page remains connected to the socket server.
I want to know, is there more efficient way of doing this task where i am supposed to received url commands over the socket but idea is to avoid iFrames??
It sounds like your main page is acting like a web browser. It gets a new URL and then loads a real page based on that. You need something to maintain state and control which page is loading and the only way to maintain state with WebSockets is to keep that page open and the connection established.
The only solution I can see is the IFRAME one that you have suggested.
Great question!
I was thinking about this too.
To fix all the links do something on the server or client side
Loop this (code is sketchy, but its the right idea):
DOMObj = Your Data Object with page content
i=0
linkArray[i] = DOMObj.getElementsByTag('a').firstChild[i]
DOMObj.getElementsByTag('a').firstChild[i].href = "href='serverLoad(linkArray[i])'"