Access snapshot cache - turbo

Hi! With Turbolinks I was using a little trick to prefetch pages on mouseover (so to make perceived responsiveness better for the user). So on mouseover the page is fetched and added to Turbolinks's cache. However some methods seem to have been removed from Turbo and I cannot find a way to access has/put methods on the snapshot cache from the Turbo object. Any workaround? From my experience prefetching pages really makes a big difference in UX, especially together with Turbo/Turbolinks. Thanks!

Asked Oct 03 '21 10:10
avatar vitobotta
vitobotta

6 Answer:

I think you can do this by accessing Turbo.navigator.view.snapshotCache.{get,put} Passing Snapshot instance to put method.

1
Answered Jan 15 '21 at 14:36
avatar  of DmitryBochkarev
DmitryBochkarev

Thanks @DmitryBochkarev, I should have checked objects more in depth in the hierarchy. In the meantime I solved in another way without using Turbo's cache but will try your suggestion to see if it works better. Thanks!

1
Answered Jan 15 '21 at 22:13
avatar  of vitobotta
vitobotta

Keen to see how you solved it though. I'm sure lots of people (like me) are interested in the solution.

1
Answered Jan 16 '21 at 02:34
avatar  of vwong
vwong

@vwong I borrowed code from instantpage.js and simplified it a bit with a couple of changes to make it work with Turbo, see https://gist.github.com/vitobotta/dc264d271fa07363622b7c2cd9352d5a#file-prefetching-js

1
Answered Jan 16 '21 at 09:43
avatar  of vitobotta
vitobotta

Thanks @vitobotta I like the idea of of using <link rel="prefetch" href="/the-link" />. I'll try this for now, barring any Turbo native solutions.

1
Answered Jan 16 '21 at 11:08
avatar  of vwong
vwong

@vwong apparently link prefetch is not supported by Safari, so I am gonna try again my previous code with @DmitryBochkarev 's suggestion

1
Answered Jan 16 '21 at 17:08
avatar  of vitobotta
vitobotta