Come utilizzare la direttiva di riscrittura dal modulo Nginx

Ogni browser ha il suo timbroGrazie a questo, sul nostro sito potremo identificare da dove arriva una richiesta e da quale browser è stata fatta, come ben sappiamo, il browser Internet Explorer ha sempre portato grattacapi agli sviluppatori web (anche se negli ultimi tempi ha migliorato), perché saremo in grado di identificarti e mostrarti regole alternative per risolvere questi piccoli problemi.

Per averci servito?Immaginiamo di avere un sito come Facebook, dove ogni giorno accedono milioni di persone, ma non tutte lo fanno dallo stesso tipo di dispositivi, ci sono persone che entrano dal proprio pc desktop, altre da tablet, altre dal proprio cellulare, eccetera. Ogni dispositivo ha un browser (o più) e ha un agente, se possiamo identificarlo allora possiamo servire il contenuto in modo appropriato, poiché la visualizzazione non è la stessa per tutti, ogni dispositivo verrà visto in un modo, e ogni browser può interpretare le regole in modo diverso (anche se questo sta diventando sempre più basso).

Abbiamo discusso che ogni browser ha un agente che ci consente di identificarlo, di seguito è riportato un breve Codice JavaScript per ottenere l'agente del browser dove viene utilizzato:

 Ottieni user-agent 

Il codice dello script è stato incorporato nell'HTML per comodità. Se apriamo il codice precedente nel browser Google Chrome vediamo quanto segue:

INGRANDIRE

E se ora lo facciamo in Internet Explorer:

INGRANDIRE

Hai verificato che è stato aperto da Windows per eseguire le 2 acquisizioni precedenti, se lo apriamo da Mozilla Firefox in Linux vediamo quanto segue:

Se vuoi un codice in una lingua per il server, di seguito è riportato un codice da vedere come ottenere l'agente in PHP, ricorda che JavaScript è possibile per l'utente disabilitarlo:

Passiamo ora a ciò che ci interessa di più, per questo inizieremo guardando un esempio di ciò di cui abbiamo discusso finora con la nostra pagina: Solvetic.

Controllo Solvetico

Se entriamo in Solvetic dal nostro PC, utilizzando il browser Google Chrome vedremo il seguente aspetto, completo, a colpo d'occhio vediamo tutto ampio, area per accedere e registrarsi:

Ma se entriamo da Google Chrome su un cellulare Android, ovviamente non tutto il contenuto entra nello schermo, è qualcosa che deve essere preso in considerazione, non è molto piacevole dover far scorrere il dito per vedere le parti del screen (al giorno d'oggi pochi siti sono così, fortunatamente), di seguito lascio l'immagine di come appare Solvetic sui dispositivi mobili:

Come possiamo vedere, si adatta allo schermo, ora abbiamo i menu in alto, se clicchiamo sul lato sinistro (le 3 barre) vedremo le opzioni per andare agli articoli, tutorial, ecc.

E se clicchiamo sull'icona a destra (aspetto del pulsante on/off) abbiamo le opzioni per accedere o registrarsi.

Ora vedremo un modo per ottenere una pagina da servire, a seconda del dispositivo che ci visita.

Come ottenere il risultato?

Esistono diversi modi per ottenere questo risultato, ci sono script che vengono inseriti direttamente nell'applicazione o abbiamo anche framework come Bootstrap, ma possiamo anche ottenere un risultato simile da Nginx, poiché riconoscendo l'agente del browser possiamo fare una riscrittura e inviare all'utente a un'altra parte dell'applicazione senza modificare l'URL che vede.

Se vuoi conoscere Nginx ti lasciamo un link qui sotto, dove puoi anche scaricarlo:

Per ottenere ciò dobbiamo prima identificare l'agente del browser, se è uno di quelli che vogliamo inserire la regola usiamo un semplice condizionale e applichiamo la regola ad esso, facciamo tutto questo nel nostro blocco di posizione.

Diamo un'occhiata al seguente codice di esempio per ottenere ciò, puoi vedere quanto è breve:

 posizione / {if ($ http_user_agent ~ * '(iPhone | iPod)') {riscrivi ^. + http://m.example.com/$uri; }}}

Come vediamo nel codice, identifichiamo l'agente del browser, se corrisponde a quello che abbiamo designato (in questo caso iPhone o iPod) facciamo una riscrittura, questa può essere ampia o specifica come richiede la nostra logica, per il esempio è più facile da capire con una sola condizione.

Come possiamo vedere, è abbastanza facile identificare l'agente del browser ed è ancora più facile usarlo a nostro favore, come abbiamo detto prima dobbiamo avere un'idea chiara di cosa vogliamo fare per utilizzare il strumenti e ottenere il beneficio desiderato.

Per concludere il tutorial, commenta che utilizzando il responsive design otterrai che l'aspetto della tua pagina web si adatti allo schermo dei dispositivi senza ulteriori complicazioni.