Come utilizzare AJAX per creare un'app per la programmazione HTML5 e CSS3 - dummies

Tutti vogliono fare app mobili in questi giorni. Ecco il grande segreto. Molte app sono scritte in HTML5, CSS e JavaScript. Sai già tutto ciò che ti serve per realizzare app che funzionano su dispositivi mobili. Ancora meglio, non è necessario imparare una nuova lingua o ottenere l'autorizzazione dall'app store o acquistare una licenza, come per le app native.

Ci sono un paio di trucchi meravigliosi che puoi fare per gli utenti iOS. Puoi progettare il tuo programma in modo che l'utente possa aggiungere un'icona direttamente al desktop. L'utente può quindi avviare il programma come qualsiasi altra app. Puoi anche fare in modo che il browser nasconda i normali accessori del browser in modo che il tuo programma non sembri eseguito in un browser!

Risulta che questi effetti sono abbastanza facili da fare.

Aggiungi un'icona al tuo programma

Le versioni moderne di iOS (il sistema operativo iPhone / iPad) hanno già la possibilità di memorizzare qualsiasi pagina web sul desktop. Basta visualizzare la pagina Web in Safari e fare clic sul pulsante Condividi. Troverai un'opzione per salvare la pagina web sul desktop. Puoi chiedere ai tuoi utenti di farlo e saranno in grado di avviare il tuo programma come una normale app.

Tuttavia, l'icona predefinita per un'app salvata è abbastanza brutta. Se vuoi un'icona carina, puoi salvare una piccola immagine come. png e metterlo nella stessa directory del tuo programma. Quindi, puoi aggiungere questa linea alla tua pagina (nell'intestazione) e quell'immagine apparirà sul desktop quando l'utente salva il tuo programma:

Come bonus aggiuntivo, l'iPhone o l'iPad regolano automaticamente l'immagine per assomigliare a Icona Apple, aggiungendo gli effetti appropriati alla versione installata di iOS (arrotondata e vetrosa in iOS6, piatta in iOS7).

Ovviamente, questa icona è un meccanismo solo Apple. Con la maggior parte delle versioni di Android, qualsiasi segnalibro che hai designato con il tuo browser principale può essere aggiunto al desktop, ma non esiste un'opzione icona personalizzata. La direttiva apple-touch-icon verrà semplicemente ignorata se utilizzi un altro sistema operativo.

Rimuovi la barra degli strumenti di Safari

Anche se il tuo programma sembra buono dalla schermata principale, quando l'utente attiva il programma è comunque ovvio che il programma è parte del browser web. Puoi nascondere facilmente la barra degli strumenti del browser con un'altra riga nell'intestazione:

Questo codice non farà nulla di diverso a meno che il programma non venga chiamato dal desktop. Tuttavia, in tal caso, nasconde la barra degli strumenti, facendo apparire il programma come un'applicazione completa. Come bonus aggiuntivo, esegue il programma in modalità a schermo intero, offrendoti un po 'più di spazio per il gioco.

Ancora una volta, questa è una soluzione specifica per Apple. Non esiste un modo semplice per ottenere lo stesso effetto sui dispositivi Android.

Memorizza il tuo programma offline

Ora il tuo programma è molto simile a un'app, tranne che viene eseguito solo quando sei connesso a Internet. HTML5 ha una meravigliosa funzione che ti consente di memorizzare un'intera pagina Web localmente la prima volta che viene eseguita.

Quindi, se l'utente tenta di accedere al programma e il sistema non può accedere online, viene eseguita la copia locale del gioco. In sostanza, il programma viene scaricato la prima volta che viene attivato e rimane sul dispositivo locale.

Questo è un effetto relativamente facile da ottenere:

• Rendi stabile il tuo programma: Prima di poter utilizzare il meccanismo di archiviazione offline, ti consigliamo di assicurarti che il tuo programma sia pronto per essere rilasciato. Come minimo, dovrai assicurarti di conoscere tutti i file esterni necessari al gioco.

• Usa solo risorse locali: Per questo tipo di progetto, non puoi fare affidamento su Internet esterno, quindi avrai bisogno di avere tutti i tuoi file locali. Questo significa che non puoi usare veramente PHP o file esterni. Avrai bisogno di avere una copia locale di tutto sul server.

• Costruisci un cahce. file manifest: Guarda la directory che contiene il tuo gioco e crea un nuovo file di testo chiamato.

• Scrivi la prima riga: La prima riga della cache. il file manifest deve contenere solo il testo CACHE MANIFEST (tutto in lettere maiuscole).

• Crea un elenco di tutti i file nella directory: Scrivi il nome di ogni file nella directory, un file per riga. Stai attento con le tue maiuscole e le tue lettere.

• Aggiungi l'attributo manifest: Il tag ha un nuovo attributo chiamato manifest. Utilizzalo per descrivere il server in cui è possibile trovare il manifest della cache:

• Carica normalmente la pagina: Avrai bisogno di caricare la pagina web una volta nel modo normale. Se tutto è impostato correttamente, il browser eseguirà tranquillamente una copia del file.

• Test offline: Il modo migliore per testare la memoria offline è disattivare temporaneamente l'accesso wireless sul computer e provare ad accedere al file. Se le cose funzionassero, dovresti essere in grado di vedere la tua pagina come se fossi ancora online.

• Controlla le impostazioni del server: Se la memoria offline non funziona, potrebbe essere necessario verificare con l'amministrazione del server. Il tipo MIME text / manifest deve essere configurato sul server. Potrebbe essere necessario chiedere all'amministratore del server di impostare questa opzione in. file htaccess per il tuo account:

  testo di addtype / cache-manifest. manifest
  

Si noti che può prendere il meccanismo manifest di cache diverse ore per riconoscere le modifiche, quindi quando apporti modifiche alla tua pagina, queste modifiche non vengono automaticamente aggiornate al browser locale. Ecco perché è meglio salvare l'archiviazione off-line per quasi la fine del ciclo di sviluppo del progetto.