iOS 5 per Web Dev aggiornamenti su Safari Mobile

Gli sviluppatori nativi di iOS non sono gli unici con qualcosa di cui essere entusiasti quando si tratta di sviluppare per iOS 5. Una nuova versione di Safari Mobile è stata rilasciata insieme al più recente sistema operativo, e gli sviluppatori web mobili ora hanno molte nuove funzionalità da sperimentare con . Leggi le modifiche in questo articolo!


Un aumento di 86 punti

Con ogni nuova versione di iOS, Apple ha svolto un lavoro fenomenale di aggiornamento della comunità di sviluppo nativa sulle modifiche all'SDK. Hanno rilasciato una panoramica di alto livello delle modifiche, delle note di rilascio ufficiali e persino delle differenze API complete.

Se solo gli sviluppatori web potessero essere così fortunati! Le informazioni sulle modifiche a Mobile Safari sono state molto più difficili da trovare. Per essere onesti, alcune informazioni sono state rilasciate ufficialmente. È possibile controllare l'aggiornamento a livello consumer di Safari 5, un aggiornamento di alto livello per sviluppatori e una nota di supporto tecnico oscuramente chiamata HT4922. Tuttavia, nessuno di questi documenti discute in modo specifico le modifiche rilevanti per iOS e nessuno di essi raggiunge il livello di approfondimento tecnico che sarebbe utile per gli sviluppatori (se si conosce un documento aggiuntivo non elencato qui, si prega di lasciare un collegamento nei commenti). Questa mancanza di informazioni è sorprendente se solo per una ragione: molto è cambiato in Safari 5.1 su iOS 5.

Lo scopo di questo articolo è quello di fornire il registro delle modifiche più completo possibile per Mobile Safari 5.0 a 5.1. Ho tentato di farlo semplicemente segnalando i miei esperimenti tra dispositivi iOS che eseguivano ciascuna versione. I miei test finora sono stati semplici: ho appena caricato HTML5Test.com su ciascuna versione di Safari e ho preso nota delle modifiche.

Secondo il test HTML 5, Mobile Safari 5.1 ha registrato un aumento del punteggio di 86 punti rispetto a Mobile Safari 5.0.

Ovviamente, come suggerisce il nome, il sito di test sta solo testando le modifiche all'HTML 5 e alle specifiche correlate. Mostra anche chiaramente una dichiarazione di non responsabilità che afferma che non tutte le nuove modifiche HTML 5 sono state testate (dopo tutto, la specifica HTML 5 è ancora in fase di scrittura!) E che i risultati potrebbero non essere del tutto accurati. Ciò nonostante, sembra un metodo efficace per ottenere una rapida panoramica di ciò che è cambiato tra le versioni del browser e sono felice di poter condividere i miei risultati con questo test con la community.


Piattaforma di test

I risultati discussi in questo articolo sono stati ottenuti testando un iPhone 3GS con iOS 4.3.5 con Safari 5.0 e un iPhone 4 con iOS 5.0 con Safari 5.1. Questi risultati sono stati ulteriormente confermati su un iPad con iOS 4.3.5 con Safari 5.0 e un iPad 2 con iOS 5.0 con Safari 5.1. Sono stato contento di scoprire che sia la versione per iPhone che per iPad di Safari sono state testate allo stesso modo.

L'agente utente completo visualizzato su iPhone 3GS:

Mozilla / 5.0 (iPhone; U; CPU iPhone OS 4_3_5 come Mac OS X; it-it) AppleWebKit / 533.17.9 (KHTML, come Gecko) Versione / 5.0.2 Mobile / 8L1 Safari / 6533.18.5

L'intero user-agent visualizzato sull'iPad della prima generazione:

Mozilla / 5.0 (iPad; U; CPU iPhone OS 4_3_5 come Mac OS X; it-it) AppleWebKit / 533.17.9 (KHTML, come Gecko) Versione / 5.0.2 Mobile / 8L1 Safari / 6533.18.5

L'agente utente completo visualizzato su iPhone 4:

Mozilla / 5.0 (iPhone, CPU, iPhone OS 5_0 come Mac OS X) AppleWebKit / 534.46 (KHTML, come Gecko) Versione / 5.1 Mobile / 9A334 Safari / 7534.48.3

L'agente utente completo visualizzato su iPad 2:

Mozilla / 5.0 (iPad; CPU OS 5_0 come Mac OS X) AppleWebKit / 534.46 (KHTML, come Gecko) Versione / 5.1 Mobile / 9A334 Safari / 7534.48.3


Safari 5.1 Risultati del test HTML 5

Regole di analisi: 11/11, +10 punti

Sono stati assegnati ulteriori 10 punti per l'inclusione del tokenizer HTML 5 e della costruzione di alberi HTML 5. I dettagli tecnici di questo test vanno oltre lo scopo di questo articolo, ma posso dire che la specifica HTML 5 definisce una fase di tokenizzazione seguita da una fase di costruzione dell'albero nell'analisi dei documenti HTML 5. L'aumento di questo punto implica che Safari 5.1 aderisca a questo processo mentre 5.0 non lo ha fatto.

Oltre ai 10 punti guadagnati in questa categoria e aggiunti al totale, Safari 5.1 ha anche ottenuto 2 punti bonus aggiuntivi per l'aggiunta di SVG e MathML in linea. Tieni d'occhio entrambe queste tecnologie!

Tela: 20/20, +0 punti

Nessun cambiamento. Questo è stato pienamente supportato per un po 'di tempo.

Video: 21/31, +0 punti

Nessuna modifica è stata segnalata nella categoria dei video, ma Mobile Safari non raggiunge ancora un punteggio perfetto. Che cosa manca? Supporto per il formato Ogg Theora e WebM e supporto per i sottotitoli.

Audio: 20/20, +0 punti

Nessun cambiamento. Mobile Safari ha supportato il Audio elemento per un po 'di tempo, ma manca ancora del supporto WebM e Ogg Vorbis (questo probabilmente non arriverà presto).

Elementi: 22/28, +8 punti

Un significativo aumento di 8 punti è stato raggiunto per questa sezione.

Nuovi elementi includono:

  • elemento figura
  • elemento di figcaption
  • segno

Altri miglioramenti in questa categoria includono:

  • dati non visibili personalizzati
  • attributo nascosto

Moduli: 75/98, +39 Punti

Questo aumento di 39 punti nella categoria delle forme è tra gli aggiornamenti più interessanti!

Molte delle modifiche implementate si applicano al genere attributo dell'elemento di input. I nuovi valori di attributo di tipo che ora influiscono sui controlli del modulo visualizzati dall'interfaccia utente del browser includono:

  • mese
  • Data
  • tempo
  • appuntamento
  • datetime-locali
  • gamma

Questa è una grande vittoria per gli sviluppatori web che hanno come target iOS. Mobile Safari ora visualizzerà a UIPicker con i vari componenti temporali quando si imposta l'attributo type su uno qualsiasi dei valori relativi alla data / ora e a UISlider viene ora visualizzato per il valore dell'intervallo. Le app Web stanno diventando sempre più native.

Viene inoltre segnalato il supporto per questi aggiornamenti aggiuntivi:

  • l'attributo richiesto per selezionare elementi
  • attributi di tipo challenge e key dell'elemento keygen
  • elemento di uscita

Altre modifiche in questa sezione includono l'aggiunta del :non valido selettore, il modulo, FormAction, formEnctype, formMethod, e formTarget proprietà sui campi e controllo proprietà sulle etichette.

Interazione dell'utente: 17/36, +17 punti

I punti in questa categoria sono stati assegnati per miglioramenti agli attributi di modifica HTML, proprietà e metodi. In particolare, gli attributi contentEditable e designMode, la proprietà isContentEditable e i metodi execCommand, queryCommandEnabled, queryCommandIndeterm, queryCommandState, queryCommandSupported e queryCommandValue.

Storia e navigazione: 5/5, +0 punti

Nessun cambiamento. La cronologia delle sessioni era già disponibile.

Microdati: 0/15, +0 punti

Nessun cambiamento e nessun supporto ancora. Per leggere quello che ci manca, controlla questo riferimento.

Applicazioni Web: 15/20, -4 punti

Stranamente, il sito di test riporta una perdita di 4 punti in questa sezione, con gestori di schemi personalizzati e gestori di contenuti personalizzati elencati come non più supportati.

Sicurezza: 5/10, +0 punti

Nessun cambiamento. Stiamo ancora aspettando il supporto iFrame senza soluzione di continuità.

Geolocalizzazione: 15/15, +0 punti

Nessun cambiamento qui in quanto il supporto per la geolocalizzazione è disponibile da diverso tempo.

Nota: la geolocalizzazione non fa parte delle specifiche ufficiali di HTML 5, ma è spesso associata ai siti Web HTML 5. Leggi le specifiche ufficiali di geolocalizzazione.

WebGL: 9/25, +1 punto

Questa versione ci avvicina di un punto al supporto WebGL con l'aggiunta del supporto DataView.

Nota: WebGL non fa parte delle specifiche HTML 5 ufficiali, ma è spesso associato ai siti Web HTML 5. Leggi su WebGL qui.

Comunicazione: 25/25, +0 punti

Nessun cambiamento qui. Sia 5.0 che 5.1 offrono supporto per la messaggistica tra documenti e gli eventi inviati dal server.

File: 0/20, +0 punti

Nessuna modifica su questo fronte, e questo è un grande punto di frustrazione per molti sviluppatori web che desiderano accedere all'API FileReader e all'API FileSystem.

Nota: questa non è una parte ufficiale delle specifiche HTML 5.

Conservazione: 15/20, +0 punti

Nessun cambiamento. Il supporto per IndexedDB è ancora in sospeso, ma almeno lo storage locale è disponibile da un po '.

Nota: questa non è una parte ufficiale delle specifiche HTML 5, ma è una tecnologia strettamente correlata spesso discussa con i siti Web HTML 5. Leggi la bozza di lavoro di archiviazione web completa.

Lavoratori: 15/15, +15 punti

Il test HTML riporta un aumento di 15 punti con supporto sia per i lavoratori Web che per i lavoratori condivisi.

Nota: questa non è una parte ufficiale delle specifiche HTML 5, ma è una tecnologia strettamente correlata spesso discussa con i siti Web HTML 5. Leggi la bozza di lavoro full web worker.

Multimedia locale: 0/20, +0 punti

Nessuna modifica qui, sfortunatamente. La grande caratteristica che molti sviluppatori Web desiderano in questa categoria è l'accesso alla fotocamera del dispositivo.

Nota: questo non fa parte delle specifiche ufficiali di HTML 5.

Notifiche: 0/10, +0 punti

Nessun suggerimento di notifiche web con questa versione.

Nota: questo non fa parte delle specifiche ufficiali di HTML 5. Leggi la bozza di lavoro delle notifiche web complete.

Altro: 6/6, +0 punti

I punti per la selezione del testo e per scorrere nella vista erano stati precedentemente assegnati con Safari 5.0.


Oltre il test HTML 5

Il sito Web HTML 5 Test verifica una vasta gamma di problemi di supporto del browser, ma ci sono molte cose a cui non presta attenzione. Gli esempi includono correzioni di bug, miglioramenti delle prestazioni e modifiche di CSS o JavaScript. C'era un buon numero di questo tipo di aggiornamenti anche in questa versione.

Se desideri conoscere ulteriori miglioramenti di Safari 5.1, ti consiglio vivamente di leggere questo post sul blog di David Calhoun.

Alcune modifiche aggiuntive che altri utenti del Web hanno già indicato includono:

position: fixed

Questa proprietà CSS ora funziona come la maggior parte degli sviluppatori Web si aspetterebbe. Per vederlo in azione, guarda questo video di YouTube dal post di David di cui sopra:

overflow: scroll

Come sopra. Questa impostazione è stata ottimizzata per rispettare le aspettative degli sviluppatori. Leggi il post di David per tutti i dettagli e guarda questo video di YouTube che ha originariamente pubblicato per mostrare il nuovo comportamento:


Errori? omissioni?

Quanto sopra sono i risultati che sono stato finora in grado di trovare dal test HTML 5 e da molte altre risorse sul web. Se sei a conoscenza di altre modifiche importanti o interessanti che non ho seguito qui, fammelo sapere nei commenti. Allo stesso modo, se trovi errori, non esitare a correggere questo post.


Fai sentire la tua voce. Vota nei commenti!

Come puoi vedere da quanto sopra, iOS 5 ha sicuramente portato con sé un numero significativo di modifiche e miglioramenti a Mobile Safari. Mobiletuts + coprirà alcune di queste nuove funzionalità e molti altri argomenti relativi allo sviluppo web mobile nei prossimi post. Facci sapere che tipo di contenuti ti piacerebbe vedere coperto lasciando un commento su questo post. Se esiste un miglioramento specifico di Safari 5.1 che vorresti fosse trattato in modo più dettagliato, dicci sotto!