Create ScandiPWA App
ScandiPWA DocsCreate Magento AppGitHub
  • Create ScandiPWA App
  • Getting Started
    • Getting Started
    • Folder structure
    • Supported Browsers & Features
    • Updating to New Releases
  • Themes
    • Themes
    • File overrides
  • Extensions
    • Extensions
    • Installation
    • Application plugins
      • Plugin Templates
    • Build configuration plugins
    • Plugins for HTML and PHP
    • File provision
    • Module preference
  • Building your app
    • Proxying requests to server
    • Internationalization
    • Creating production build
  • Deploying your app
    • Storefront
    • Magento theme
Powered by GitBook
On this page
  • Supported Language Features
  • Supported Styling Options
  • Configuring Supported Browsers
  • Missing a feature?

Was this helpful?

  1. Getting Started

Supported Browsers & Features

PreviousFolder structureNextUpdating to New Releases

Last updated 4 years ago

Was this helpful?

By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use .

Watch out!

Some themes, for example, the@scandipwa/scandipwadoes not support Internet Explorer at all. Therefore, if your parent theme is @scandipwa/scandipwa,you won't be able to enjoy ScandiPWA in the Internet Explorer.

Supported Language Features

This project supports a superset of the latest JavaScript standard. In addition to syntax features, it also supports:

  • (ES2016).

  • (ES2017).

  • (ES2018).

  • (stage 4 proposal)

  • (part of stage 3 proposal).

  • , and .

Learn more about .

While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide if any of these proposals change in the future.

Note that this project includes no by default.

If you use any other ES6+ features that need runtime support (such as Array.from() or Symbol), make sure you are , or that the browsers you are targeting already support them.

Supported Styling Options

This project also supports:

  • CSS

To enable CSS Grid prefixing, add /* autoprefixer grid: autoplace */ to the top of your CSS file.

Configuring Supported Browsers

Here is an example browserslist that is specified in package.json:

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

Watch out!

The browserlist does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers you are supporting.

Missing a feature?

This project allows you to create extensions to its own build configuration. You can always add a missing feature to your project by following the build extension guide.

()

Support for new CSS features like the , , , and are automatically poly-filled to add support for older browsers.

prefixing is disabled by default, but it will not strip manual prefixing. If you'd like to opt-in to CSS Grid prefixing, .

By default, the generated project includes a configuration in your package.json file to target a broad range of browsers based on global usage (> 0.2%) for production builds, and modern browsers for development. This gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production.

The browserslist configuration controls the output JavaScript so that the emitted code is compatible with the browsers specified. The production list will be used when creating a production build by running the build script, and the development list will be used when running the start script. You can use to see the browsers supported by your configured browserslist.

react-app-polyfill
ES6
Exponentiation Operator
Async/await
Object Rest/Spread Properties
Dynamic import()
Class Fields and Static Properties
JSX
Flow
TypeScript
different proposal stages
codemods
polyfills
including the appropriate polyfills manually
PostCSS
Autoprefixer
SASS
all property
break properties
custom properties
media query ranges
CSS Grid Layout
first familiarize yourself about its limitations
browserslist
https://browserl.ist