7

Pre-Caching Other Folders and

Files for Faster Navigation

In this chapter, the last of this section, we are going to look at speeding up our Dropbox file
explorer further by introducing, even more, caching to the app. So far, we have built an app

that can query the Dropbox API, and return files and folders. From there, we added folder
navigation, including updating the URL for link sharing and being able to use the back and

forward buttons. With that in place, in Chapter 6, Caching the Current Folder Structure Using

Vuex, we introduced Vuex for storing the current folder path and the contents of the folders

we had visited.

This chapter is going to look at:

Pre-caching not only the folder the user is currently in but also the child folders.

This will be done by looping through the folders in the current display and

checking if they have been cached yet. If not, we can gather the data from the

API.

Storing the parent folder's contents, should the user have entered via a direct

URL. This will be done by utilizing the breadcrumb path to traverse up the tree.

Cache the download links for the files. This currently requires an API for every

file encountered, regardless of whether the folder has been cached by our code or

not.

With these improvements, we can ensure the app only contacts the API once for every item,

rather than the countless times it was originally doing.