Cache API with MVC Views

Question

I have a basic MVC form and I've been trying to use the Javascript Cache API to cache all my css, js, html files so that when users (people in the field) do not have reliable access, they can still use my web form. Obviously I'm using IndexedDB and service workers as well to check for a connection and save locally when a connection is not available, syncing when it is available.

I've gone through some tutorials and everything seems straightforward when dealing with caching actual, physical files (css, html, js). MVC is weird though since you're routing. I created the basix Index, Create, Edit, Details views. When I create an array of URL's to cache such as

var urlsToCache = [

'/App/Details',
'/App/Edit',
'/App/Create',
'/App/Index',

'/App/Content/bootstrap.css',
'/App/Content/site.css',
'/App/Scripts/jquery-1.10.2.js',
'/App/Scripts/jquery.form.js',
'/App/sw.js',
'/App/Scripts/bootstrap.js',

] .. everything caches except for DETAILS and EDIT. Index and create cache fine. I'm actually surprised the latter two cache at all since they aren't physical files. I'm assuming Details and Edit don't cache because they don't work without querystring parameters.

Is it POSSIBLE to cache these two views at all? Or does anyone know of anything on NuGet that addresses this situation?

I knowthat when if I'm offline, I won't be able to retrieve form number X on the server anyways.. But I would like users, while offline, to be able to edit forms they created while offline, so I would still need the code for Edit and Details available offline. The only thing I can think of is to have the Edit and Details page not accept any parameters and initially load blank.so they'll be cachable. Then in the onload, have code in the service worker return a list of available form ID's available offline and when one is selected, return the data that way with an ajax call. Seems brutal. — Brian Lorraine, Jan 10 '19 at 20:06
.. or keep it so there's still an ID parameter, but update my controller to allow null values in the parameter and just return a blank view... — Brian Lorraine, Jan 10 '19 at 20:19

Brian Lorraine · Answer 1 · 2019-01-10T21:04:54.283

I changed this in the GET method for my Edit action to return an empty Model if there was no ID

if (id == null)
{
//return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
return View();
}

This allowed me to load the Edit page without a querystring variable and not get an error message. The page loads with no data but it allows me to cache it. At this point I suppose I would have to tell my service worker to check if the page is online. If it is, route the request normally, else query the local storage and manually plug the values into the fields.

So let this be a lesson to anyone creating Offline-enabled apps with MVC and using Cache API. Get rid of the lines that return bad request errors in your CRUD views if ID numbers aren't passed. Just pass back a blank model to the view (return View()). This allows you to cache your pages. And you'll obviously need to write code to handle the offline retrieval and presentation in code that executes when the page loads, but it will still allow you to utilize the MVC/Razor features when online.

One thing to note: "/App/Edit" will cache. If you load "/App/Edit/2", it won't match a url in your cache so you'll get an offline message. However, you can easily modify your Index page to send the ID via post. Just have a form on the page that goes to the Edit action and change the link to an underlined span with an onclick that sets the value of a hidden field to the ID. You'll have to pass another hidden field to let it know that it needs to retrieve instead of update (since the controller has different GET AND POST actions for Edit. The GET action is useless, but keep it for caching. You're retrieval that you normall would do int the GET is now going to be done in the POST with an if statement to check for your hidden field flag.

Cache API with MVC Views

1 Answers1