poll throttling + keep alive option

Author: joetannenbaum

packages/core/src/poll.ts

@@ -1,21 +1,48 @@
-class Poll {
-  protected polls: VoidFunction[] = []
+import { PollOptions } from './types'
 
-  add(interval: number, cb: VoidFunction): VoidFunction {
-    const id = setInterval(cb, interval)
+export class Poll {
+  protected id: number | null = null
+  protected inBackground = false
+  protected keepAlive = false
+  protected currentInterval: number
+  protected originalInterval: number
 
-    const stop = () => clearInterval(id)
+  constructor(interval: number, cb: VoidFunction, options: PollOptions) {
+    this.keepAlive = options.keepAlive || false
 
-    this.polls.push(stop)
+    this.currentInterval = interval
+    this.originalInterval = interval
 
-    return stop
+    this.start(interval, cb)
   }
 
-  clear() {
-    this.polls.forEach((stop) => stop())
+  public stop() {
+    if (this.id) {
+      clearInterval(this.id)
+    }
+  }
+
+  public isInBackground(hidden: boolean) {
+    this.inBackground = this.keepAlive ? false : hidden
 
-    this.polls = []
+    if (this.inBackground) {
+      // Throttle requests by 95% when the page is in the background
+      this.currentInterval = Math.round(this.originalInterval / 0.95)
+    } else {
+      this.currentInterval = this.originalInterval
+    }
   }
-}
 
-export const poll = new Poll()
+  protected start(interval: number, cb: VoidFunction) {
+    this.id = window.setInterval(() => {
+      if (this.currentInterval === interval) {
+        cb()
+        return
+      }
+
+      // The visibility has changed, so we need to adjust the interval
+      this.stop()
+      this.start(this.currentInterval, cb)
+    }, interval)
+  }
+}

packages/core/src/polls.ts

@@ -0,0 +1,36 @@
+import { Poll } from './poll'
+import { PollOptions } from './types'
+
+class Polls {
+  protected polls: Poll[] = []
+
+  constructor() {
+    this.setupVisibilityListener()
+  }
+
+  public add(interval: number, cb: VoidFunction, options: PollOptions): VoidFunction {
+    const poll = new Poll(interval, cb, options)
+
+    this.polls.push(poll)
+
+    return () => poll.stop()
+  }
+
+  public clear() {
+    this.polls.forEach((poll) => poll.stop())
+
+    this.polls = []
+  }
+
+  protected setupVisibilityListener() {
+    document.addEventListener(
+      'visibilitychange',
+      () => {
+        this.polls.forEach((poll) => poll.isInBackground(document.hidden))
+      },
+      false,
+    )
+  }
+}
+
+export const polls = new Polls()

packages/core/src/router.ts

@@ -5,7 +5,7 @@ import { isFormData, objectToFormData } from './formData'
 import { History } from './history'
 import { navigationType } from './navigationType'
 import { page as currentPage } from './page'
-import { poll } from './poll'
+import { polls } from './polls'
 import { Request } from './request'
 import { RequestStream } from './requestStream'
 import { Scroll } from './scroll'
@@ -18,6 +18,7 @@ import {
   Method,
   Page,
   PendingVisit,
+  PollOptions,
   ReloadOptions,
   RequestPayload,
   RouterInitParams,
@@ -49,7 +50,7 @@ export class Router {
     })
 
     currentPage.on('newComponent', () => {
-      poll.clear()
+      polls.clear()
       this.loadDeferredProps()
     })
 
@@ -123,8 +124,8 @@ export class Router {
     this.syncRequestStream.cancelInFlight()
   }
 
-  public poll(interval: number, options: ReloadOptions = {}): VoidFunction {
-    return poll.add(interval, () => this.reload(options))
+  public poll(interval: number, requestOptions: ReloadOptions = {}, options: PollOptions = {}): VoidFunction {
+    return polls.add(interval, () => this.reload(requestOptions), { keepAlive: options.keepAlive || false })
   }
 
   public visit(

packages/core/src/types.ts

@@ -188,6 +188,10 @@ export type VisitOptions = Partial<
 
 export type ReloadOptions = Omit<VisitOptions, 'preserveScroll' | 'preserveState'>
 
+export type PollOptions = {
+  keepAlive?: boolean
+}
+
 export type VisitHelperOptions = Omit<VisitOptions, 'method' | 'data'>
 
 export type RouterInitParams = {

playgrounds/vue3/resources/js/Pages/Poll.vue

@@ -40,12 +40,16 @@ const { stop } = usePoll(
 )
 
 onMounted(() => {
-  const stopUserPolling = router.poll(1000, {
-    only: ['users'],
-    onFinish() {
-      userPollCount.value++
+  const stopUserPolling = router.poll(
+    1000,
+    {
+      only: ['users'],
+      onFinish() {
+        userPollCount.value++
+      },
     },
-  })
+    { keepAlive: true },
+  )
 
   setTimeout(() => {
     console.log('stopping user polling')