Installation

Trois méthodes sont présentées ici pour installer Room dans vos pages Web ainsi que la compatibilité de Room avec avec les différents navigateurs.

Méthode recommandée

La méthode recommandée pour l’installation de Room dans vos pages Web est l’auto-hébergement.

Pour cela, commencer par télécharger le fichier JavaScript de Room correspondant à votre besoin depuis le tableau suivant :

Description	Fichier
Version ESM (source)	room-1.0.0.js
Version ESM (production)	room-1.0.0.min.js
Version non ESM (source)	room-nm-1.0.0.js
Version non ESM (production)	room-nm-1.0.0.min.js

Placez ensuite le fichier téléchargé dans un répertoire de votre site, comme par exemple /js/lib/.

Le référencement du fichier dans vos pages dépend de la version de Room que vous voulez utiliser.

Version ESM

En version ESM, nous conseillons grandement d’utiliser des cartes d’importation, vous pouvez donc copier le code suivant et le coller dans la partie <head> de vos pages en l’adaptant :

<script type="importmap">
	{
		"imports": {
			"Room": "/js/lib/room-1.0.0.min.js"
		}
	}
</script>

Certaines versions de navigateurs supportent les modules ECMAScript 6 mais ne supportent pas les cartes d’importation.

Pour régler cela, vous pouvez copier le code suivant et le coller juste après le code de la carte d’importation dans la partie <head> de vos pages. Ce code ne fait rien dans les navigateurs qui supportent les cartes d’importation :

<script>
	(function() {
		if (!(HTMLScriptElement.supports && HTMLScriptElement.supports("importmap"))) {
			var s = document.createElement("script");
			if ("noModule" in s) {
				s.src = "https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js";
				s.async = true;
				document.head.appendChild(s);
			}
		}
	})();
</script>

Pour terminer, vous pouvez également pré-charger le module (cf. l’attribut rel="modulepreload") en copiant le code suivant et en le collant à la suite des codes précédents dans la partie <head> de vos pages :

<link rel="modulepreload" href="/js/lib/room-1.0.0.min.js">

Ceci à l’avantage de non seulement pré-charger le module, mais aussi de le compiler et de le rendre prêt à utiliser et ceci est fait par le navigateur de manière asynchrone sans bloquer l’analyse du HTML et des CSS.

Dans le code de la carte d’importation et du pré-chargement, vous devez adapter le chemin d’accès au fichier JavaScript.

Avec la carte d’importation, vous pouvez alors écrire directement les lignes suivantes dans un de vos modules pour importer Room :

// Importation standard
import Room from "Room";

// Importation dynamique
const Room = await import("Room");

Sans carte d’importation, vous devez écrire dans vos modules un code qui est le suivant :

// Importation standard
import Room from "/js/lib/room-1.0.0.min.js";

// Importation dynamique
const Room = await import("/js/lib/room-1.0.0.min.js");

Et là, le chemin d’accès au fichier JavaScript est un problème, si demain vous voulez passer à la version 2.0.0 de Room, il faudra modifier tous vos modules pour changer le chemin, alors qu’avec la carte d’importation ce n’est à faire qu’une fois et sans modifier vos modules !

Version non ESM

En version non ESM, vous devez ajouter la ligne de code suivante dans la partie <head> de vos pages :

<script src="/js/lib/room-nm-1.0.0.min.js" defer>

Le référencement d’un script qui utilisent Room doit être placé après cette ligne et également avec l’attribut defer.

Les fonctions de Room en version non ESM sont accessibles avec la variable Room attachée à l’objet window du navigateur, vous pouvez par exemple écrire la ligne suivante dans un de vos scripts JavaScript :

Room.createData(0);

Méthode avec un CDN

La méthode avec un CDN est identique à la première méthode, la différence étant bien sûr que vous n’avez pas besoin de télécharger un des fichiers JavaScript de Room.

Vous pouvez donc reprendre exactement les mêmes exemples de codes donnés dans la méthode précédente mais en changeant le chemin d’accès au fichier JavaScript.

En version ESM, si vous utilisez le CDN jsDelivr, vous devez remplacer :
/js/lib/room-1.0.0.min.js
par :
https://cdn.jsdelivr.net/npm/room-js@1.0.0

En version non ESM, si vous utilisez le CDN jsDelivr, vous devez remplacer :
/js/lib/room-nm-1.0.0.min.js
par :
https://cdn.jsdelivr.net/npm/room-js@1.0.0/room-nm.min.js

Méthode avec NPM

Vous pouvez installer Room avec NPM.

Pour cela, dans un terminal et en étant dans le répertoire de votre projet, utilisez la ligne de commande suivante :

npm install room-js --save

Cette commande installe la version courante de Room, si vous voulez installer une version spécifique, utiliser la commande suivante :

npm install room-js@1.0.0 --save

Le paquet est installé dans le répertoire node_modules et se nomme room-js.

Il contient les 4 fichiers JavaScript de Room :

room.js : La version ESM et non minifié.
room.min.js : La version ESM minifié.
room-nm.js : La version non ESM et non minifié.
room-nm.min.js : La version non ESM minifié.

Il faut ensuite utiliser l’outil de construction de votre choix pour utiliser l’un des 4 fichiers du paquet.

Compatibilité

Room est compatible avec tous les navigateurs Web récents : Firefox, Safari, Chrome, Edge, Opera, etc. en version bureau comme mobile.

Room n’est pas compatible avec Internet Explorer et ne le sera jamais !

Le code de Room utilise la version ECMAScript 2019 de JavaScript et est normalement compatible à minima avec les versions :

69 de Chrome (4 septembre 2018),
79 de Edge (15 janvier 2020),
62 de Firefox (5 septembre 2018),
56 d’Opera (25 septembre 2018),
12 de Safari (17 septembre 2018),
69 de Chrome Android (4 septembre 2018),
62 de Firefox Android (5 septembre 2018),
48 d’Opera Android (8 novembre 2018),
12 de Safari iOS (17 septembre 2018),
10 de Samsung Internet (22 août 2019).

Ce qui correspond à la disponibilité de la méthode d’instance flat() des objets Array dans les différents navigateurs.

Les navigateurs pouvant être facilement mis à jour, il est peut probable que vos utilisateurs aient encore ces anciennes versions.

Une exception néanmoins avec Safari qui ne change de grande version grosso modo qu’avec une grande version de macOS ou d’iOS.

Sur macOS, la version 12 de Safari est supportée sur macOS Hight Sierra, donc Room peut fonctionner à minima avec Safari sur des Mac datant de 2010.

Sur iOS, la version 12 de Safari est supportée sur iOS 12, donc Room peut fonctionner à minima sur des iPhone 5s datant de 2013.

Dernière mise à jour : 03/11/2024 à 08:29