Objecte navigator

L'objecte navigator de JavaScript és un objecte del BOM (Browser Object Model) que proporciona informació sobre el navegador de l'usuari i l'estat del sistema on s'executa. És el teu punt d'accés per obtenir dades sobre quin programari està utilitzant l'usuari (el nom i la versió del navegador) i quines capacitats té el dispositiu (geolocalització, connexió a Internet, etc.).

Pots accedir-hi mitjançant window.navigator o, simplement, navigator.

Propietats de navigator

Les propietats principals de navigator es divideixen en informació bàsica (compatibilitat) i informació avançada (estat del sistema/capacitats).

Propietats d'informació i compatibilitat (Legacy)

Aquestes propietats solien ser molt usades, però avui dia estan desaconsellades per a la detecció de navegadors específica a causa de la suplantació (spoofing) i la manca de precisió. Són de només lectura.

 

Propietats de capacitat i estat del sistema (Modernes)

Aquestes propietats accedeixen a funcionalitats i estats específics del dispositiu o el navegador.

Mètodes de navigator

A diferència de location i history, navigator té pocs mètodes directes a l'objecte base. La majoria de les funcionalitats s'implementen mitjançant mètodes dels sub-objectes (com navigator.geolocation o navigator.mediaDevices).

Exemples i casos d'ús

1. Detecció de connexió Online/Offline

Aquest és un cas d'ús molt important per a les aplicacions offline.

function comprovarEstatConnexio() {
    if (navigator.onLine) {
        console.log("Estàs connectat a Internet. Sincronitzant dades...");
    } else {
        console.log("Estàs fora de línia. Les dades es desaran localment.");
    }
}

// També pots utilitzar esdeveniments per reaccionar als canvis
window.addEventListener('online', () => {
    console.log("Connexió RESTABLIDA.");
});
window.addEventListener('offline', () => {
    console.log("Connexió PERDUDA.");
});

2. Geolocalització (navigator.geolocation)

Permet obtenir la posició de l'usuari amb el seu consentiment.

function obtenirPosicio() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            // Funció d'èxit
            (posicio) => {
                const latitud = posicio.coords.latitude;
                const longitud = posicio.coords.longitude;
                console.log(`Posició: ${latitud}, ${longitud}`);
            },
            // Funció d'error
            (error) => {
                console.error(`Error de geo-localització: ${error.code}`);
            }
        );
    } else {
        console.error("El teu navegador no suporta la geolocalització.");
    }
}

3. Detecció de llengua i configuració

Per oferir la versió correcta de la pàgina.

const idiomaPreferit = navigator.language; // Ex: 'ca-ES'
const idiomaBase = idiomaPreferit.split('-')[0]; // Ex: 'ca'

if (idiomaBase === 'ca') {
    console.log("Mostrant contingut en català.");
} else if (idiomaBase === 'es') {
    console.log("Mostrant contingut en castellà.");
} else {
    console.log("Utilitzant l'anglès com a idioma per defecte.");
}

4. Detecció de dispositius tàctils

Per oferir controls més grans o una interfície diferent.

// La propietat 'maxTouchPoints' és un bon indicador, però hi ha altres mètodes
const esTactil = navigator.maxTouchPoints > 0;

if (esTactil) {
    document.body.classList.add('interficie-tactil');
    console.log("Interfície optimitzada per a tàctil.");
} else {
    console.log("Interfície per a ratolí/teclat.");
}

5. Accedir càmera navigator.mediaDevices (Càmera i Micròfon). 

L'objecte mediaDevices proporciona accés als dispositius d'entrada multimèdia (càmera i micròfon) mitjançant l'API MediaDevices. El mètode clau és getUserMedia(), que sol·licita permís a l'usuari.

// Obté l'element <video> del DOM
const videoElement = document.getElementById('myVideo');

function activarCamera() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // Sol·licita accés al vídeo
        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
            .then(stream => {
                // Connecta el flux de vídeo a l'element <video>
                videoElement.srcObject = stream;
                videoElement.play();
                console.log("Càmera activada correctament.");
            })
            .catch(error => {
                // Gestió d'errors (p. ex., usuari denega el permís)
                console.error("No s'ha pogut accedir a la càmera: ", error);
            });
    } else {
        console.error("El navegador no suporta MediaDevices API.");
    }
}

// Cas d'ús: En una aplicació de videoconferència o un escàner de codis QR.
// Però caldria afegir un `<button onclick="activarCamera()">Activar Càmera</button>`

6. Porta-retalls navigator.clipboard 

L'API Clipboard permet llegir i escriure text al porta-retalls del sistema de manera asíncrona, requerint el permís de l'usuari en la majoria dels casos per raons de seguretat. Exemple: Escriure (Copiar) al Porta-retalls

const textACopiar = "Aquesta és l'URL que vull compartir.";

function copiarAlPortaRetalls(text) {
    if (navigator.clipboard) {
        // Utilitza el mètode asíncron writeText
        navigator.clipboard.writeText(text)
            .then(() => {
                alert(`"${text}" copiat al porta-retalls!`);
            })
            .catch(err => {
                console.error('No s\'ha pogut copiar el text: ', err);
            });
    } else {
        // Fallback per a navegadors antics (utilitzant document.execCommand)
        console.warn("Clipboard API no suportada. Utilitzant mètode antic.");
    }
}

// Cas d'ús: Implementar un botó de "Copiar enllaç" o "Copiar codi" fàcil.
// copiarAlPortaRetalls(textACopiar);

7. Gestió emmagatzematge navigator.storage

L'emmagatzemament persistent en el context d'una aplicació web es refereix a la capacitat d'una pàgina web o una aplicació web progressiva (PWA) de sol·licitar al navegador que protegeixi les dades emmagatzemades localment (com les bases de dades IndexedDB, l'API Cache o Web Storage) per evitar que siguin eliminades automàticament pel navegador en situacions de baixa memòria o d'espai d'emmagatzematge limitat. A diferència de l'emmagatzemament normal, que es considera "millor esforç" (best effort) i pot ser esborrat sense previ avís, l'emmagatzemament persistent (navigator.storage.persist()) garanteix que les dades crucials d'una aplicació (com el contingut offline o la configuració d'usuari) romanguin segures al dispositiu de l'usuari a llarg termini, millorant la fiabilitat de l'experiència offline.

L'objecte storage proporciona mètodes per gestionar l'emmagatzematge del lloc web, com ara el càlcul de la quota d'emmagatzematge i la sol·licitud d'emmagatzematge persistent. Exemple: Comprovar la Quota d'Emmagatzematge

function comprovarQuota() {
    if (navigator.storage && navigator.storage.estimate) {
        // Utilitza el mètode estimate() per obtenir l'ús actual i la quota total
        navigator.storage.estimate()
            .then(estimacio => {
                const usMB = (estimacio.usage / 1024 / 1024).toFixed(2);
                const quotaMB = (estimacio.quota / 1024 / 1024).toFixed(2);
                
                console.log(`Ús actual: ${usMB} MB`);
                console.log(`Quota total: ${quotaMB} MB`);
                
                const percentatgeUs = ((estimacio.usage / estimacio.quota) * 100).toFixed(2);
                console.log(`Usat: ${percentatgeUs}%`);
            });
    } else {
        console.warn("El mètode navigator.storage.estimate() no està disponible.");
    }
}

// Cas d'ús: Aplicacions web progressives (PWA) que necessiten emmagatzemar dades 
// grans offline (IndexedDB, Cache API) i comprovar si tenen espai per guardar-les.
// comprovarQuota();

8. Informació navegador (navigator.userAgent) 

La cadena userAgent és un identificador enviat pel navegador a cada servidor web, i actua com el "document d'identitat" digital del client. La seva estructura és històricament complexa i sovint poc precisa a causa de les necessitats de compatibilitat (spoofing). En una cadena userAgent típica, hi podem trobar diverses seccions clau que proporcionen informació sobre:

Informació del navegador i motor de renderització

La major part de la cadena se centra en identificar el programari utilitzat per l'usuari per visualitzar el contingut web:

Informació del SSOO i Plataforma

Aquesta secció especifica l'entorn de programari i hardware on s'executa el navegador:

Exemple userAgent

Aquí hi ha un exemple típic de cadena userAgent desglossada:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Casos d'Ús: Històricament, es feia servir per oferir contingut específic a cada navegador o dispositiu, però avui dia s'utilitza principalment per a anàlisi i logging de trànsit web i errors. Per detectar funcionalitats (com la càmera o la geolocalització), és molt més recomanable utilitzar la detecció de característiques (p. ex., comprovant si navigator.geolocation existeix).

La propietat userAgent retorna la cadena que el navegador envia al servidor per identificar-se. Tot i que està desaconsellada per a la detecció de funcionalitats (és millor fer detecció de característiques, no de navegadors!), segueix sent útil per a registres i certes necessitats. Exemple: Analitzar la Cadena userAgent

const userAgentString = navigator.userAgent;
let missatge = `La cadena de l'agent d'usuari és: ${userAgentString}`;

// Cas d'ús: Detecció simple (i sovint imprecisa) de mòbil.
// NOTA: Per a detecció de mòbil, és millor fer-ho basat en mitjans CSS o altres propietats
// com navigator.maxTouchPoints.

if (userAgentString.includes('Mobi') || userAgentString.includes('Android')) {
    missatge += "\nSembla que l'usuari està utilitzant un dispositiu mòbil.";
} else {
    missatge += "\nSembla que l'usuari està utilitzant un escriptori.";
}

console.log(missatge);

// Cas d'ús: Enviar aquesta informació al servidor juntament amb els logs d'error
// per entendre l'entorn on s'ha produït un problema.