Non c'è niente di peggio dello schermo di un dispositivo mobile quando cucini durante il passaggio di una ricetta. Scopri come il sito di cucina BettyCrocker.com ha utilizzato l'API Wake Lock per evitare questo problema.
Le app per iOS e Android ritirate
Rilasciato molto fanfara nel 2014, Di recente Betty Crocker ha rimosso le sue app dall'Apple App Store e dal Google Play Store dopo che ne era stata ridotta la priorità. Per molto tempo il team di Betty Crocker ha preferito aggiungere nuove funzioni al sito per dispositivi mobili. anziché le app per iOS/Android. La piattaforma tecnica su cui erano state create le app per iOS/Android era obsoleta e l'azienda non disponeva delle risorse per supportare l'aggiornamento e la manutenzione delle app in futuro. L'app web era oggettivamente più grande dal punto di vista del traffico, più moderno e più facile da migliorare.
Le app per iOS/Android avevano però una funzionalità definitiva che piaceva agli utenti:
Suggerimento avanzato per i millennial: l'app mobile @BettyCrocker non si attenua o si blocca quando stai seguendo una ricetta. - @AvaBeilke
L'80% delle persone cucina con un dispositivo in cucina, ma l'oscuramento e il blocco dello schermo sono un problema. Che cosa ha fatto @BettyCrocker? È stata aggiornata l'app per NON attenuarsi quando gli utenti sono in una ricetta. -@KatieTweedy
La funzionalità killer sul web con l'API Wake Lock
Quando cucini con un dispositivo, non c'è niente di più frustrante che dover toccare lo schermo con le mani sporche o persino il naso quando lo schermo si spegne. Betty Crocker si è chiesto come avrebbe potuto trasferire la funzionalità killer delle sue app per iOS/Android all'app web. È in questo momento che hanno scoperto Project Fugu e API Wake Lock.
L'API Wake Lock fornisce un modo per impedire che il dispositivo di oscurare o bloccare lo schermo. Questa funzionalità consente nuove esperienze che, fino a oggi, richiedevano un'app per iOS/Android. L'API Wake Lock riduce la necessità di soluzioni alternative complicate e potenzialmente affamate di energia.
Richiesta di wakelock
Per richiedere un wakelock, devi chiamare il metodo navigator.wakeLock.request()
che restituisce un oggetto WakeLockSentinel. Utilizzerai questo oggetto come
valore sentinel.
Il browser può rifiutare la richiesta per vari motivi
(ad esempio perché il livello della batteria è troppo basso),
quindi è buona norma aggregare la chiamata in un'istruzione try…catch.
Rilascio di un wakelock
Devi anche trovare un modo per rilasciare un wakelock,
che si ottiene chiamando il metodo release() dell'oggetto WakeLockSentinel.
Se vuoi rilasciare automaticamente il wakelock dopo un determinato periodo di tempo,
puoi utilizzare window.setTimeout() per chiamare release(), come mostrato nell'esempio riportato di seguito.
// The wake lock sentinel.
let wakeLock = null;
// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// Request a wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 5000);
L'implementazione
Con la nuova app web, gli utenti devono essere abilitati a navigare facilmente tra una ricetta, completare i passaggi e persino uscire senza bloccare lo schermo. Per raggiungere questo obiettivo, il team ha innanzitutto realizzato un rapido prototipo di front-end come proof of concept e per raccogliere input UX.
Quando il prototipo si è rivelato utile, hanno progettato una Componente Vue.js che possono essere condivisi tra tutti i loro brand (BettyCrocker, Pillsbury e Tablespoon). Anche se solo Betty Crocker aveva app per iOS e Android, I tre siti hanno un codebase condiviso, in modo da poter implementare il componente una sola volta ed eseguirne il deployment ovunque, come mostrato negli screenshot di seguito.
Quando sviluppi il componente in base al framework modernizzato del nuovo sito,
una grande attenzione
Livello ViewModel del pattern MVVM.
Il team ha inoltre programmato l'interoperabilità
per attivare funzionalità nei framework nuovi e precedenti del sito.
Per tenere traccia della visibilità e dell'usabilità, Betty Crocker ha integrato il monitoraggio analitico per gli eventi principali nel ciclo di vita del wakelock. Il team ha utilizzato la gestione delle funzionalità per eseguire il deployment del componente di wakelock in un unico sito per l'implementazione iniziale in produzione, e quindi il deployment della funzionalità negli altri siti, dopo aver monitorato l'utilizzo e l'integrità della pagina. Continua a monitorare i dati di analisi in base all'utilizzo di questo componente.
Per sicurezza degli utenti, il team ha creato un timeout forzato per disattivare il wakelock dopo un'ora di inattività. L'implementazione finale su cui si sono stabiliti è stata nel breve termine un'opzione di attivazione/disattivazione su tutte le pagine di ricette dei siti. Sul lungo periodo, l'azienda prevede di rinnovare la visualizzazione della pagina delle ricette.
Il container di wakelock
var wakeLockControl = () => {
return import(/* webpackChunkName: 'wakeLock' */ './wakeLock');
};
export default {
components: {
wakeLockControl: wakeLockControl,
},
data() {
return {
config: {},
wakeLockComponent: '',
};
},
methods: {
init: function(config) {
this.config = config || {};
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
this.wakeLockComponent = 'wakeLockControl';
} else {
console.log('Browser not supported');
}
},
},
};
Il componente wakelock
<template>
<div class="wakeLock">
<div class="textAbove"></div>
<label class="switch" :aria-label="settingsInternal.textAbove">
<input type="checkbox" @change="onChange()" v-model="isChecked">
<span class="slider round"></span>
</label>
</div>
</template>
<script type="text/javascript">
import debounce from 'lodash.debounce';
const scrollDebounceMs = 1000;
export default {
props: {
settings: { type: Object },
},
data() {
return {
settingsInternal: this.settings || {},
isChecked: false,
wakeLock: null,
timerId: 0,
};
},
created() {
this.$_raiseAnalyticsEvent('Wake Lock Toggle Available');
},
methods: {
onChange: function() {
if (this.isChecked) {
this.$_requestWakeLock();
} else {
this.$_releaseWakeLock();
}
},
$_requestWakeLock: async function() {
try {
this.wakeLock = await navigator.wakeLock.request('screen');
//Start new timer
this.$_handleAbortTimer();
//Only add event listeners after wake lock is successfully enabled
document.addEventListener(
'visibilitychange',
this.$_handleVisibilityChange,
);
window.addEventListener(
'scroll',
debounce(this.$_handleAbortTimer, scrollDebounceMs),
);
this.$_raiseAnalyticsEvent('Wake Lock Toggle Enabled');
} catch (e) {
this.isChecked = false;
}
},
$_releaseWakeLock: function() {
try {
this.wakeLock.release();
this.wakeLock = null;
//Clear timer
this.$_handleAbortTimer();
//Clean up event listeners
document.removeEventListener(
'visibilitychange',
this.$_handleVisibilityChange,
);
window.removeEventListener(
'scroll',
debounce(this.$_handleAbortTimer, scrollDebounceMs),
);
} catch (e) {
console.log(`Wake Lock Release Error: ${e.name}, ${e.message}`);
}
},
$_handleAbortTimer: function() {
//If there is an existing timer then clear it and set to zero
if (this.timerId !== 0) {
clearTimeout(this.timerId);
this.timerId = 0;
}
//Start new timer; Will be triggered from toggle enabled or scroll event
if (this.isChecked) {
this.timerId = setTimeout(
this.$_releaseWakeLock,
this.settingsInternal.timeoutDurationMs,
);
}
},
$_handleVisibilityChange: function() {
//Handle navigating away from page/tab
if (this.isChecked) {
this.$_releaseWakeLock();
this.isChecked = false;
}
},
$_raiseAnalyticsEvent: function(eventType) {
let eventParams = {
EventType: eventType,
Position: window.location.pathname || '',
};
Analytics.raiseEvent(eventParams);
},
},
};
</script>
Risultati
Il componente Vue.js è stato implementato in tutti e tre i siti e ha generato ottimi risultati. Nel periodo dal 10 dicembre 2019 al 10 gennaio 2020, BettyCrocker.com ha registrato le seguenti metriche:
- Tra tutti gli utenti di Betty Crocker con un browser compatibile con l'API Wake Lock, Il 3,5% di loro ha attivato immediatamente la funzionalità, rendendola una delle prime 5 azioni.
- La durata della sessione per gli utenti che hanno attivato il wakelock è stata 3,1 volte più lunga rispetto agli utenti che non lo hanno fatto.
- La frequenza di rimbalzo degli utenti che hanno attivato il wakelock è stata inferiore del 50% rispetto a coloro che non usano la funzionalità di wakelock.
- Gli indicatori di intenzione di acquisto erano circa il 300% più alti per gli utenti di wakelock rispetto a tutti gli utenti.
3,1×
Durata della sessione maggiore
Il 50%
Frequenza di rimbalzo più bassa
300%
Indicatori di intenzione di acquisto più elevati
Conclusioni
Betty Crocker ha ottenuto risultati fantastici utilizzando l'API Wake Lock. Puoi testare la funzionalità in autonomia cercando la tua ricetta preferita su uno qualsiasi dei suoi siti (BettyCrocker, Pillsbury o Tablespoon) e attivando l'opzione Evita che lo schermo si spenga mentre cucini.
I casi d'uso per i wakelock non si fermano ai siti di ricette. Altri esempi sono le app per carte d'imbarco o biglietti che devono mantenere lo schermo attivo fino alla scansione del codice a barre, app in stile kiosk che mantengono lo schermo sempre acceso, o app per presentazioni basate sul web che impediscono la sospensione dello schermo durante una presentazione.
Abbiamo raccolto tutto ciò che devi sapere sull'API Wake Lock in un articolo completo su questo sito. Buona lettura e buona cucina!
Ringraziamenti
Foto della persona che impasta l'impasto per gentile concessione di Juliana Hochgesang su Unsplash.