SharePoint Framework: How to detect if running on modern or classic page?

Question

We see some differences in our SPFx web part behavior depending on which page type it is placed on (modern vs. classic). Classic pages behave somewhat differently.

I'd like to detect which page type the web part runs on. Is there an "official, modern" way to do this, ideally baked into the framework? If not, what would you suggest?

Answer 1

You can make use of the EnvironmentType enum that is available via the sp-core-library.

The code for that would be as below:

Add the below import statement.

import { Environment, EnvironmentType } from '@microsoft/sp-core-library';

In your method, you can detect it as below:

if(Environment.type == EnvironmentType.ClassicSharePoint){
    //do some stuff on classic page
}else if(Environment.type === EnvironmentType.SharePoint){
    //do some stuff on modern page
}else if(Environment.type === EnvironmentType.Local){
    //do some stuff on SharePoint workbench page
}

Reference - Environment Type enum

Answer 2

You can possibly play around and look for "CanvasControl" on the page (may be through jquery) to identify if it is a modern page or a classic page.

Another lengthier approach would be to look for the contents of managed property for canvascontent1 field. Here is the reference for it

Data for all web parts is stored in one page field in the content type, and that translates to one managed property in search – here are the details: Field name = “CanvasContent1” Managed property = “CanvasContent1OWSHTML”