pwa-starter-kit uses fairly recent browsers APIs, from new JavaScript language features, to new DOM specs:
- Custom Elements
- Shadow DOM
- Custom CSS properties
- JS modules
- Dynamic JS modules via
import() - Promise
fetch()classsyntax- Object rest/spread properties
async/await
At the time of writing, Chrome 60, Safari 11.1, and iOS 11.3 natively support all of these features, out of the box. To run pwa-starter-kit on other browsers, you need to use a combination of polyfills and transpilation (e.g. babel).
This step is automated by the npm run build script for you, but in case you want to roll your own building and bundling strategy, here is an overview of what is needed and where:
| Feature | Action needed | On what browsers |
|---|---|---|
| Custom Elements | Polyfill | IE11, Edge, Firefox, Safari<11 |
| Shadow DOM | Polyfill | IE11, Edge, Firefox, Safari<11 |
| Class syntax | Transpile (babel), extra adapter for Custom Elements/Shadow DOM | IE11 |
| Promises | Polyfill | IE11 |
fetch() |
Polyfill | IE11, iOS <10.2 |
| Object rest/spread properties | Transpile (babel) | IE11, Edge, Safari<11.1 |
| JS modules | Polyfill | IE11, Firefox, iOS <10.3 |
Dynamic JS modules (import()) |
Polyfill, a module loader (webpack) | |
async/await |
Transpile (babel) | IE11 |