Pause Polling in Background Tabs in Inertia.js v3.9

The Inertia.js team released v3.9.0 with a background option that pauses polling while a tab is hidden, a type property on the navigate event that identifies history restores, a prefetch cache flush when history is cleared, and fixes for the browser's back button.

#Pause Polling in Background Tabs

Pascal Baljet added a background option to usePoll() and router.poll(). Before this release, a poll in a hidden tab ran on every 10th interval unless you set keepAlive, and there was no way to stop it completely. The new option takes three values that control polling in a hidden tab:

• The default, throttle, keeps the previous behavior and runs every 10th interval
• Setting pause stops polling until the tab is visible again
• Setting continue keeps polling at the full interval

import { usePoll } from '@inertiajs/vue3'
 
usePoll(5000, {}, { background: 'pause' })

With pause, the poll sends a request as soon as the tab becomes visible if one was due while it was hidden. Otherwise it waits for the rest of the current interval, so switching between tabs quickly does not send a request on each switch.

The keepAlive option still works but is deprecated. Use background: 'continue' instead. The release also fixes polls that start while the tab is already hidden, which used to run at the full interval until the next visibility change.

See #3292 for more details.

#Detect History Restores in the navigate Event

Pascal Baljet also added a type property to the navigate event detail. Its value is initial for the first page load (including a reload), visit for a regular Inertia visit, and history when the browser's back or forward button restores the page from history.

A page restored from history shows the props it had when the user left it, and those props can be out of date. Before this release, there was no public way to tell a history restore apart from a regular visit. You can now reload specific props when that happens:

import { router } from '@inertiajs/vue3'
 
router.on('navigate', (event) => {
  if (event.detail.type === 'history') {
    router.reload({ only: ['messages'] })
  }
})

A full page load that the browser restores from history, for example when the user goes back from a non-Inertia page, reports history too, because its props come from the history state.

See #3291 for more details.

#Prefetch Cache Flushed When History Is Cleared

Calling router.clearHistory(), or returning a response with Inertia::clearHistory(), cleared the encrypted history entries but left the prefetch cache in place. After a user logged out and pressed the back button, Inertia served the visit from the prefetch cache and showed the protected page again until the cache entry expired. Clearing history now flushes the prefetch cache. A prefetch request that is still in flight during the flush is not cached when it completes, and the same applies to router.flushAll().

See #3307 for more details.

#Back Button Fixes

Mohammed Sohail fixed a case where pressing the back button left the previous page on screen at the restored URL. If a deferred prop, poll, or partial reload response had arrived and Inertia was still resolving the page component when the user pressed back, that pending update replaced the restored page. A history restore now cancels any page update that is still resolving. This follows a history restore fix in v3.8 for back and forward navigation across a deploy.

Gianpiero Puleo fixed useRemember restoring state from an earlier page on new visits. A remembered value from the first decrypted history entry could fill in a missing key on later fresh visits. In a page with tabs, for example, a cleared selection could come back after switching tabs.

See #3274 and #3302 for more details.

#InfiniteScroll Requests After Navigation

Pascal Baljet fixed <InfiniteScroll> requests that started after a navigation had begun. The router did not cancel these requests, and their callbacks threw errors on the new page. When the navigation went to the same URL with a different query string, such as a new sort order or filter, the old response was merged into the new list. The component now cancels its in-flight request when it unmounts and ignores callbacks from a response that had already arrived.

See #3308 for more details.

#Release Notes

You can see the complete list of changes below and the diff between 3.8.0 and 3.9.0 on GitHub. The following release notes are directly from the GitHub release:

#v3.9.0

• [3.x] Drain tasks added while the queue is settling by @gianpieropuleo in #3276
• [3.x] Let a history restore supersede a page update that is still resolving by @thecrazybob in #3274
• [3.x] Add type to the navigate event detail by @pascalbaljet in #3291
• [3.x] Handle QuotaExceededError in history.replaceState by @danielperez9430 in #3280
• [3.x] Preserve sourcemaps in Vite entry transforms by @fouteox in #3257
• [3.x] Flush the prefetch cache when clearing history by @pascalbaljet in #3307
• [3.x] Discard <InfiniteScroll> requests that outlive the component by @pascalbaljet in #3308
• [3.x] Add background option to pause polling in background tabs by @pascalbaljet in #3292
• [3.x] Fix Svelte <Form> error when a focused field unmounts by @pascalbaljet in #3309
• [3.x] Bump dependencies by @pascalbaljet in #3310
• [3.x] Stop useRemember from restoring an earlier page's state on new visits by @gianpieropuleo in #3302
• [3.x] Fix <InfiniteScroll> error when unmounting right after its items change by @pascalbaljet in #3312