Guide to clearing the application cache for a particular page within a Single Page Application

In our Angular and MVC project, we have implemented two pages - an Online page and an Offline page in a Single Page Application (SPA) setup. The Offline page should load when the network connection is lost, and an error should be displayed when trying to access the Online page without an internet connection. To achieve this, we created a Manifest file and added it to the Layout HTML so that the application gets cached.

The issue arises when the network connection is lost and the Online page does not load due to the application cache. The solution is to remove the application cache from the browser to allow for the Offline page to function properly. We attempted to remove the cache using an MVC controller, but were unsuccessful:


    filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
    filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);
    filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
    filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    filterContext.HttpContext.Response.Cache.SetNoStore();
javascriptc#asp.netangularjsasp.net-mvc

Answer №1

To prevent caching, apply the [NoCache] attribute to the specific controller or action.

[Authorize]
[NoCache]

public class LeaveController : Controller
{

Answer №2

Here is a solution that can be implemented in .NET Core 2.0:

[Authorize]
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public class LeaveController : Controller
{
...

For .NET 4.7, you can use the following approach:

[AuthorizeNoCache]
public class LeaveController : Controller
{

...

If you choose to utilize the [AuthorizeNoCaching] attribute, you will need to add the following code:

class AuthorizeNoCaching : AuthorizeAttribute
{
    ////https://stackoverflow.com/questions/10011780/prevent-caching-in-asp-net-mvc-for-specific-actions-using-an-attribute?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
    public override void OnAuthorization(AuthorizationContext filterContext)
    {
        //filterContext.HttpContext.Response.Cache.SetAllowResponseInBrowserHistory(false);  //We want them to be able to see the pages they've been to in the browser history for now.
        //https://stackoverflow.com/questions/866822/why-both-no-cache-and-no-store-should-be-used-in-http-response
        filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        filterContext.HttpContext.Response.Cache.SetNoStore();
        filterContext.HttpContext.Response.Cache.SetExpires(DateTime.Now);
        filterContext.HttpContext.Response.Cache.SetValidUntilExpires(true);
        base.OnAuthorization(filterContext);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Error: Heroku, mLab, and Node.js - Application Issue with Mongoose

As a beginner in the world of Node.js and Heroku, I am attempting to host my first application on Heroku but encountering deployment issues. To guide me through this process, I have been following a tutorial which can be found here: https://scotch.io/tutor ...

javascriptnode.jsmongodbherokumongoose

Nodejs functions properly on a local machine, however, it encounters issues when deployed on a VPS

My nodejs/javascript code seems to be running fine on my local pc, but when I try to run it on my vps, it's not working properly. Even though I have the same node_modules installed and the code is identical. Here's a snippet of my code for refere ...

javascriptnode.js

When using Vue2, pushing a string to an array simply replaces the existing string instead of appending it

My current task involves manipulating a local data array by adding and removing strings within a method. However, I have noticed that my logic always results in the array containing only a single string passed to the updateIdArr method. Even after removin ...

javascriptvue.js

Determine if a mobile application has been installed using Vue.js

I am currently developing a web application and have implemented a check to determine whether the user is accessing it from a mobile device or laptop. Let's consider the link as: my-site.com In addition to the web version, my site also offers a mobi ...

javascriptandroidvue.jsconditional-statements

Installing Vue JavaScript using the npm command

Embarking on my journey as a Vue JS learner, I took the plunge to install Vue and delve into creating web applications using it. So, I globally added npm Vue. npm install --global vue-cli This action resulted in: npm WARN deprecated [email protected]: T ...

javascriptvue.jsnpmnpm-install

Exchanging items through Drag and Drop

My current project involves using drag and drop functionality to allow students to rearrange pieces of an image that has been jumbled up. They can drag these pieces onto a grid to recreate the original image. Both the jumbled up grid and the reconstructio ...

javascripthtml

What makes React.js such a challenging skill to master?

Why am I struggling? After dedicating 6 months to learning React.js, I find myself overwhelmed by the multitude of chapters and feeling lost. Could you kindly share your journey with React.js in a step-by-step manner? Your advice would be greatly apprecia ...

javascriptreactjsvue.js

Retrieve a particular item by combining data from two separate objects within a collection using a LINQ select statement

In my list, there may be various objects like these: ObjectFirst { id = 1; mode = Constants.Active; } ObjectSecond { id = 2; mode = Constants.Passive; } Is it possible to create a single LINQ query that selects the object with "mode = Constants.Active" ...

c#.netlinq

Converting JSON to CSV using JavaScript

While utilizing this script (which is functioning properly), I encountered an issue where I needed to exclude certain columns (specifically columns 1, 2, 3, and 9) from the extraction process. Here's what I've got so far: $(document).ready(funct ...

javascriptjqueryjsoncsv

Save this page for later by using JavaScript to create a

Does anyone have a solution as to why window.location.href does not save the current webpage URL as a bookmark? Thank you ...

javascript

Unable to execute any actions on object in JavaScript

I currently have two functions in my code: getRawData() and getBTRawData(). The purpose of getBTRawData() function is to retrieve data from Bluetooth connected to a mobile device. On the other hand, getRawData() function takes the return value from getB ...

javascriptangulartypescriptbluetoothrxjs

Implementing updates to a website from a database without the need for a page refresh

I am eager to delve into the world of AJAX and have identified a seemingly straightforward challenge that I believe will serve as an informative learning experience. Imagine a scenario where users are continuously adding new entries to a database table. ...

phpjavascriptmysqlajax

changing the css transformation into zoom and positioning

My goal is to incorporate pinch zoom and panning using hardware-accelerated CSS properties like transform: translate3d() scale3d(). After completing the gesture, I reset the transform and switch to CSS zoom along with absolute positioning. This method ensu ...

javascriptcssmulti-touchcss-transformshammer.js

Displaying angular ng-messages only when the field has been touched

Nothing too out of the ordinary here. I need my input to be validated with each keystroke. If the validation fails, I want the error message to display right away, without waiting for the blur event to trigger the $touched function. I assumed this was th ...

javascriptangularjsangular-materialng-messages

Is it possible for me to activate a function on a different component using my header?

Hi there, I'm curious about how Vue routing and the tree structure work together. In my setup, I have a parent router that contains both my router-view and header at the same level. I want to be able to trigger some functions from my header component ...

javascripteventsvue.jsvuejs2

Enhancing tooltips in a multi-series chart with Highcharts - incorporating suffixes

Apologies for my lack of experience once again. I am now looking to enhance my tooltip by adding a suffix to indicate % humidity and °C for temperature. While the code derived from ppotaczek with some tweaks is working well, I've been struggling to a ...

javascriptmysqlhighchartstooltip

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...

javascriptjqueryhtmlcssajax

Use the npm-search feature to show only the name and description columns in the search results

After running the command npm search packagename, I noticed that the results are shown in 6 columns: name, description, author, date, version, and keywords. Is there a way to customize npm-search so that it only displays the name and description columns? ...

javascriptjsonnpm

Can an infowindow be automatically closed based on specific criteria?

Show the infowindow only when hovering over the marker. It should disappear when moving the mouse away from the marker. The infowindow should stay open only if you click on the marker, and can be closed by clicking the close button on the infowindow. ...

javascriptangularjsgoogle-maps

Automatically calculate the sum of numbers as the user inputs values dynamically, regardless of the number of inputs. Notify the user if they enter anything other than numbers

HTML Table with Dynamically Adding Rows <table> <thead> <th>Item</th> <th>Cost</th> </thead> <tbody id="items-list"> <tr> <td>Item 1</td> ...

javascriptjquery