How to Detect The Closing Of A Browser Tab

How to Detect The Closing Of A Browser Tab

Learn how to detect the closing of a browser tab. JavaScript/TypeScript, however, there is no tab/window way to identify whether the user has closed a tab and/or the browser window. You will learn a way to detect page reload, tab and window closing browser close actions effectively and also distinguish between them.

Sometimes, you need to do something right before the user closes a tab. It could be clearing cookies or sending an API call.

In JavaScript/TypeScript, however, there is no direct/standard way to identify whether the user has closed a tab and/or the browser window. I was surprised to find that there is no straightforward way to do so. In this article, you will learn a way to detect page reload, tab close and browser close actions effectively and also distinguish between them.

The examples I will be showing below are using Angular 10. If you are using another framework or JavaScript in general, the syntax would vary but the theory remains the same.

beforeunload

JavaScript provides an event handler called beforeunload. This event is called whenever the resources are removed/unloaded from the client.

This means this event will be triggered whenever the user either reloads the page, closes the tab or the browser window. It is enough if you are looking for just that. However, for most of the applications, we need to distinguish between a ‘close’ (tab or window) and a ‘reload’. Let’s see how we can do that.

// Angular Example for beforeunload event handler
@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event): void {
  // Do something
}

1) Identifying a Page Reload

We know so far, a page reload would also trigger beforeunload event. When the event is triggered we do not know what triggered it (reload, tab close or browser close). Within that event handler, we need to identify whether the page was reloaded or not.

Page reload can be identified using NavigationTiming API. You can read all about it  here.

Please note that window.performance.navigation is deprecated and hence, you should avoid using that. Use the properties provided by the NavigationTiming API instead.

javascript coding typescript programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Principles of Functional Programming in JavaScript That Will Make Your Coding Life Easier

Who else loves to write side-effects-free functions? I think we, as programmers, all do. Today, in this story, I will walk you through the basic principles of functional programming that will make your coding life easier.

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript. Bugs are born in many ways. Creating side effects is one of them. Some people say side effects are evil, some say they’re not.

Object-Oriented Programming with Javascript — using Typescript

Object-Oriented Programming With JavaScript — Using Typescript. TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure Object-oriented with classes, interfaces, and statically typed like C# or Java.

Who Else Wants to Write Clean JavaScript Code?

Who Else Wants to Write Clean JavaScript Code? 7 Tips to Make Your Coworkers Fall in Love With Your Code.

Code Formatting with Prettier in Visual Studio Code

Formatting code consistently is a pain, especially when working on a team. The beauty of modern-day web development is that the tooling has gotten so much better! In this article, we will look at setting up Prettier to automatically format your code in Visual Studio Code.