Partials: Browser Support Fallback Script

Browser Support Fallback Script

Table of Contents

Supported options
Examples
Translations
Troubleshooting

Function name: getBrowserSupportFallbackScript()

The Porsche Design System components rely on dedicated JavaScript features like IntersectionObserver, MutationObserver, customElements and others. If any of the requirements are not met, a blocking overlay is displayed which recommends the user to update the browser.

Therefore, we provide a ready to use partial in all @porsche-design-system/components-{js|angular|react|vue} packages which needs to be injected before the closing </body> of your index.html.

Force display of browser support fallback

Supported options#

Option

Description

Type

Default

cdn

Decides from which CDN the resources are loaded.

'auto' | 'cn'

'auto'

format

Defines the output format of the partial. By default, it returns a html string.
For jsx it returns a jsx element. For sha256 it returns a SHA-256 hash of the innerHTML to use in a Content Security Policy (CSP).

'html' | 'jsx' | 'sha256'

'html'

When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project included.

Examples#

Project integration differs based on the project setup. The following showcases the most common ways.

<!-- index.html -->
<body>
  <!--PLACEHOLDER_BROWSER_SUPPORT_FALLBACK_SCRIPT-->
</body>

<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
  "prestart": "yarn replace",
  "replace": "placeholder='<!--PLACEHOLDER_BROWSER_SUPPORT_FALLBACK_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getBrowserSupportFallbackScript())') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: Force using China CDN -->
  "replace": "placeholder='<!--PLACEHOLDER_BROWSER_SUPPORT_FALLBACK_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getBrowserSupportFallbackScript({ cdn: \"cn\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
}

Output

The result of this partial looks like this:

<script>
!function(){if(["IntersectionObserver","MutationObserver","customElements"].some((e=>
!(e in window)))){const e=document.createElement("script");e.src="https://cdn.ui.porsche.com/porsche-design-system/fallbacks/browser-support.1a10176.js",document.body.appendChild(e)}}();
</script>

// Alternative: Force using China CDN
<script>
!function(){if(["IntersectionObserver","MutationObserver","customElements"].some((e=>
!(e in window)))){const e=document.createElement("script");e.src="https://cdn.ui.porsche.cn/porsche-design-system/fallbacks/browser-support.1a10176.js",document.body.appendChild(e)}}();
</script>

Translations#

Automatic translations for the following languages are provided:

'de' | 'ru' | 'fr' | 'en' | 'it' | 'pt' | 'es' | 'ja' | 'ko' | 'zh' | 'nl' | 'pl' | 'cs' | 'da' | 'et' | 'fi' | 'lt' | 'lv' | 'no' | 'sl' | 'sv' | 'tr' | 'uk'

As soon as the Browser Support Fallback script initializes, it looks for the obligatory lang attribute defined in the html tag. Support is given for the following formats, e.g.:

lang="en"

lang="en_US"

lang="en-US"

If none of these languages can be found, it will fall back to en.

Troubleshooting#

There always might be a case where something goes wrong. Here are some possible answers:

Q: Why does the translation not get recognized automatically? A: Mostly this is a result of false order of script loading and setting translation key by the application. It's required that the lang attribute in the html tag is defined with the correct value before the Browser Support Fallback script gets initialized. A: The translation key is not part of the provided keys (see "Translations") A: The translation key has not the correct format (see "Translations")

Q: Why are there no implementation guidelines for my JS framework? A: Implementing a third party script can be done in many ways regarding the setup of your application. So there isn't a solely true way to integrate it in a specific framework. Just one rule of thumb: It should be initialized as late as possible.