Question posted in
Some documentation to get you started can be found here.

Show the cached webpage when visited on even number visit, fetch on odd number visit in front-end – Apache

I’m developing a website. For some performance reason, I want to cache the webpage when the user visited first time and to show the same cache data when visited again. But if the same user visited the page one more time(3rd time) again. I want to show newly fetched content from sever.

While using Twitter and Facebook. I have noticed that they are showing the cached data when I visit the previously visited pages. But When try to visit the page again. They fetch data from the server.

Can anyone know-what Facebook and twitter does. Or anyone knows what is the architecture behind it.

I don’t want to cache the page in the server or using Memcache. I want it to do on front-end or by the browser or by the headers.

Clear explanation:

let take example https://example.com website.

if I visit the page for the first time. It has to be cached.

If I visit the same page again. the page has to show from cache.

If I visit the same page again. The webpage needs to be fetched from data.

Don’t suggest me a Service worker or PWA thing. Service worker only caches the data which was sent from the server.

what I need is, the webpage should be cached after the addition/manipulation of DOM in my page.

Is there any way I could achieve this via apache or by the browser or by javascript?

Thanks in advance.

EDIT:

Functionality I want, like in this video?

Youtube Link: https://www.youtube.com/watch?v=XWE_JzWs_No&feature=youtu.be

Functionality Description : When the user click back button. I want to go to the previous page with the state(up-to they scrolled) where they left.

Tags:

2

Answers


  1. 0

    One solution that I can think of is to use persistent storage in your browser, maybe IndexDB. You can store the visit count here. On the basis of visit count you can either send back the cache response from service worker in even request or store the fetch and update cache on service worker in odd request.

    Login or Signup to reply.
  2. 0

    After understanding the question and the clarifying comment

    Actually, I’m using pagination on my page. I’m appending data in the page by fetching data in ajax request. I simply need the whole fetched HTML content should be there when I visit that page again.

    Your best bet is to use localstorage, each time you fetch the page requested by the user set it to the localstorage with a identifier on what that page is. This way you will have snapshots of the page stored along with url identifiers.

    So, in the following flow.

    1. User visits your landing page.
    2. They scroll and fetch page 2
    3. Try to store the url identifier, e.g:/page2 via history.pushState or #page2
    4. Write a key with the url and the state of the page
    5. Now when the page is loaded, check for the hash or path and load the corresponding limit.

    Caveats

    1. Localstorage maxes out between 5-10mb but if your results are in JSON, you could store more snapshots
    2. Restoring scroll behavior to exact position to dock is another challenge you will get into, this can be done by noting the scroll position and restoring it.
    3. A lot comes down to what you are fetching, e.g: if you play inline videos like Twitter that autoplay, you may have to re-issue those events.

    Final word

    If you can, choose a library that handles some of this behavior – You can see an example here https://infinite-scroll.com/demo/full-page/page5.html – Keep scrolling and you will see pagexx.html changing in your browser – This means the back button has a unique identifier to restore to.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search