Technique Docs

Appearance

👵 Guide Spécifique Legacy 34 (Chrome 34) ​

Ce document détaille les contraintes et les solutions mises en œuvre pour supporter les navigateurs datant de 2014, spécifiquement Chrome 34 (souvent rencontré sur d'anciens boîtiers Android ou Smart TVs).

🚫 Contraintes Techniques (Chrome 34) ​

Chrome 34 ne supporte nativement aucune des syntaxes ES6+ modernes. Sans une transpilation rigoureuse, l'application échoue avec des erreurs de type :

  • Uncaught SyntaxError: Unexpected token . (Optional chaining ?.)
  • Uncaught SyntaxError: Unexpected token ? (Nullish coalescing ??)
  • Erreurs sur les modules ES6, classes, fonctions fléchées, etc.

🚀 Utilisation du Build ​

Pour générer cette version spécifique :

bash
npm run build:legacy34

Cette commande génère l'application dans le dossier legacy-build/ avec une transpilation complète vers ES5 (via esbuild/Vite).

🧪 Stratégie de Polyfilling ​

Pour éviter d'alourdir le build moderne, les polyfills lourds sont chargés de manière conditionnelle.

1. Détection dans le Code ​

Nous utilisons la constante __IS_LEGACY_34__ injectée par Vite :

javascript
if (typeof __IS_LEGACY_34__ !== 'undefined' && __IS_LEGACY_34__) {
	// Comportement spécifique ou chargement de polyfills additionnels
}

2. Polyfills Chargés ​

Le build legacy34 inclut automatiquement via les imports de vite.config.ts :

  • regenerator-runtime/runtime (pour async/await)
  • core-js/stable/promise
  • core-js/stable/symbol
  • core-js/stable/array
  • core-js/stable/object

3. Chargement Dynamique ​

Dans src/routes/+layout.ts, nous pouvons importer dynamiquement des polyfills si nécessaire pour ne pas impacter le chargement initial sur les machines performantes.

🛠️ Dépannage et Tests ​

Validation Locale ​

  1. Builder : npm run build:legacy34
  2. Tester : npm run preview:legacy34
  3. Vérifier les erreurs de syntaxe dans la console des outils de développement d'un ancien Chrome.

Erreurs Courantes ​

  • Uncaught ReferenceError: Promise is not defined : Vérifiez que les polyfills core-js sont bien inclus dans le bundle final.
  • APIs DOM manquantes : Chrome 34 ne supporte pas IntersectionObserver ou ResizeObserver. Si vous utilisez ces APIs, prévoyez un fallback ou un polyfill externe.

Retour à l'index des Builds | Retour à l'accueil