diff --git a/packages/svelte/src/reactivity/window/index.js b/packages/svelte/src/reactivity/window/index.js index bea636e0e203..d986d8456dba 100644 --- a/packages/svelte/src/reactivity/window/index.js +++ b/packages/svelte/src/reactivity/window/index.js @@ -96,6 +96,21 @@ export const screenTop = new ReactiveValue( } ); +/** + * `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined` + */ +export const online = new ReactiveValue( + BROWSER ? () => navigator.onLine : () => undefined, + (update) => { + const unsub_online = on(window, 'online', update); + const unsub_offline = on(window, 'offline', update); + return () => { + unsub_online(); + unsub_offline(); + }; + } +); + /** * `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`. * Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level, diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 8c921fd37e57..5d9874c8a3b2 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -1995,6 +1995,10 @@ declare module 'svelte/reactivity/window' { * `screenTop.current` is a reactive view of `window.screenTop`. On the server it is `undefined` */ export const screenTop: ReactiveValue; + /** + * `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined` + */ + export const online: ReactiveValue; /** * `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`. * Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,