Tu e i tuoi utenti volete app web mobile che reagiscano e scorrano agevolmente al tocco. Svilupparli dovrebbe essere facile, ma purtroppo il modo in cui i browser web mobile reagiscono agli eventi di tocco durante lo scorrimento viene lasciato come dettaglio di implementazione nella specifica TouchEvent. Di conseguenza, gli approcci possono essere suddivisi all'incirca in quattro categorie. Questa situazione espone una tensione fondamentale tra l'omogeneità dello scorrimento e il mantenimento del controllo dello sviluppatore.
Quattro modelli diversi di elaborazione degli eventi touch?
Le differenze di comportamento tra i browser si suddividono in quattro modelli.
Normale elaborazione sincrona degli eventi
Gli eventi Touchmove vengono inviati durante lo scorrimento e ogni aggiornamento dello scorrimento viene bloccato fino al completamento della gestione del tocco. Questa è la più semplice da comprendere e la più potente ma cattiva per le prestazioni di scorrimento, perché significa che ogni frame durante lo scorrimento deve essere bloccato sul thread principale.
Browser: browser Android (Android 4.0.4, 4.3), Safari per dispositivi mobili (quando si scorre div)
Elaborazione touchmove asincrona
Gli eventi Touchmove vengono inviati durante lo scorrimento, ma lo scorrimento può procedere in modo asincrono (l'evento touchmove viene ignorato dopo l'inizio dello scorrimento). Ciò può comportare una "doppia gestione" degli eventi, ad esempio se si continua a scorrere dopo che il sito web ha fatto qualcosa con touchmove e si chiama preventDefault sull'evento, comunicando al browser di non gestirlo.
Browser: Safari per dispositivi mobili (durante lo scorrimento del documento), Firefox
Spostamento del tocco eliminato durante lo scorrimento
Gli eventi Touchmove non vengono inviati dopo l'inizio dello scorrimento e non riprendono fino a dopo l'evento touchend. In questo modello, è difficile distinguere tra un tocco fisso e uno scorrimento.
Browser: browser Samsung (eventi di spostamento del mouse inviati)
Annullamento tocco all'avvio dello scorrimento
Non è possibile in entrambi i modi (fluidità di scorrimento e controllo dello sviluppatore) e questo modello rende chiaro il compromesso tra lo scorrimento continuo e la gestione degli eventi, in modo simile alla semantica della specifica Eventi puntatore. Alcune esperienze che potrebbero richiedere il tracciamento del dito, come il pull per aggiornare, non sono possibili.
Browser: Chrome Desktop M32 e versioni successive, Chrome Android
Perché cambiare?
Chrome per Android utilizza attualmente il vecchio modello di Chrome: touchcancel all'avvio dello scorrimento, che migliora le prestazioni dello scorrimento, ma crea confusione per gli sviluppatori. In particolare, alcuni sviluppatori non sono a conoscenza dell'evento touchcancel o non sanno come gestirlo. Questo ha causato l'interruzione dell'accesso ad alcuni siti web. Ancora più importante, un'intera classe di effetti e comportamenti di scorrimento dell'interfaccia utente, come pull-to-refresh, barre nascoste e agganci sono difficili o impossibili da implementare bene.
Anziché aggiungere funzionalità specifiche hardcoded per supportare questi effetti, Chrome punta a concentrarsi sull'aggiunta di primitive della piattaforma che consentano agli sviluppatori di implementare questi effetti direttamente. Vedi Una piattaforma web razionale per un'esposizione generale di questa filosofia.
Il nuovo modello di Chrome: il modello Throttled Async Touchmove Model
Chrome sta introducendo un nuovo comportamento progettato per migliorare la compatibilità con il codice scritto per altri browser durante lo scorrimento, nonché per attivare altri scenari che dipendono dalla ricezione di eventi touchmove durante lo scorrimento. Questa funzionalità è attivata per impostazione predefinita e puoi disattivarla con il seguente flag: chrome://flags\#touch-scrolling-mode.
Il nuovo comportamento è:
- Il primo touchmove viene inviato in modo sincrono per consentire l'annullamento dello scorrimento
- Durante lo scorrimento attivo
- gli eventi touchmove vengono inviati in modo asincrono
- throttled a 1 evento ogni throttled oppure se viene superata una regione dello slop di throttled CSS
- Event.cancelable è false
- In caso contrario, gli eventi touchmove vengono attivati in modo sincrono, come di consueto quando lo scorrimento attivo viene terminato o non è possibile perché è stato raggiunto il limite di scorrimento
- Un evento touch-end si verifica sempre quando l'utente solleva il dito
Puoi provare questa demo in Chrome per Android e attivare/disattivare il flag chrome://flags\#touch-scrolling-mode per vedere la differenza.
Facci sapere la tua opinione
Il modello Async Touchmove Model ha il potenziale per migliorare la compatibilità tra browser e abilitare una nuova classe di effetti per i gesti tattili. Ci interessa sapere cosa pensano gli sviluppatori e vedere le cose creative che puoi fare con questo strumento.