Quando si cucina con un dispositivo mobile non c'è niente di peggio dello spegnimento dello schermo durante un passaggio della ricetta. Scopri come il sito di cucina BettyCrocker.com ha utilizzato l'API Wake Lock per evitare che ciò accadesse.
Le app per iOS e Android ritirate
Rilasciata in seguito a una molta fanfara nel 2014, Betty Crocker ha recentemente rimosso le sue app dall'App Store di Apple e dal Google Play Store dopo che erano state ridotte la priorità. Per molto tempo, il team di Betty Crocker ha preferito aggiungere nuove funzionalità al sito mobile anziché alle app per iOS e Android. La piattaforma tecnica su cui erano state create le app per iOS/Android era obsoleta e l'attività non aveva le risorse per supportare l'aggiornamento e la manutenzione delle app in futuro. Inoltre, l'app web era oggettivamente molto più grande in termini di traffico, più moderna e più facile da migliorare.
Tuttavia, le app per iOS/Android avevano una funzione killer molto apprezzata dagli utenti:
Suggerimento avanzato per la cucina per i millennial: l'app mobile @BettyCrocker non si attenua né si blocca quando segui una ricetta. – @AvaBeilke
L'80% delle persone cucina con un dispositivo in cucina, ma l'oscuramento e il blocco dello schermo sono un problema. Cosa ha fatto @BettyCrocker? App aggiornata in modo che NON venga attenuata quando gli utenti si trovano in una ricetta. –@KatieTweedy
Porta la funzionalità killer sul web con l'API Wake Lock
Quando cucini con un dispositivo, non c'è niente di più frustrante del dover toccare lo schermo con mani sporche o addirittura con il naso quando lo schermo si spegne. Betty Crocker si è chiesta come è stato possibile trasferire la killer delle sue app per iOS/Android sull'app web. In seguito, è venuta a conoscenza di Project Fugu e dell'API Wake Lock.
L'API Wake Lock consente di impedire al dispositivo di oscurare o bloccare lo schermo. Questa funzionalità consente nuove esperienze che, fino a questo momento, richiedevano un'app per iOS/Android. L'API Wake Lock riduce la necessità di soluzioni alternative ingannevoli e potenzialmente fatali di energia.
Richiesta di un wakelock
Per richiedere un wakelock, devi chiamare il metodo navigator.wakeLock.request() che restituisce un oggetto WakeLockSentinel. Utilizzerai questo oggetto come valore Sense.
Il browser può rifiutare la richiesta per vari motivi (ad esempio perché il livello della batteria è troppo basso), quindi è buona norma includere la chiamata in un'istruzione try…catch.
Rilascio di un wakelock
Devi anche poter 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 seguente.
// 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 attraverso una ricetta, completare i passaggi e persino uscire senza il blocco schermo. Per raggiungere questo obiettivo, il team ha creato un rapido prototipo front-end come proof of concept e per raccogliere input UX.
Dopo che il prototipo si è rivelato utile, l'azienda ha progettato un componente Vue.js da condividere tra tutti i brand (BettyCrocker, Pillsbury e Tablespoon). Anche se solo Betty Crocker disponeva di app per iOS e Android, i tre siti hanno un codebase condiviso, quindi sono stati in grado di implementare il componente una sola volta e di implementarlo ovunque, come mostrato negli screenshot di seguito.
Durante lo sviluppo del componente in base al framework modernizzato del nuovo sito, si è concentrata l'attenzione sul livello ViewModel del pattern MVVM.
Il team ha inoltre programmato l'interoperabilità
per abilitare la funzionalità sui framework precedenti e nuovi del sito.
Per tenere traccia di visibilità e usabilità, Betty Crocker ha integrato il monitoraggio di analisi 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 singolo sito per l'implementazione iniziale in produzione, quindi ha eseguito il deployment della funzionalità nel resto dei siti dopo aver monitorato l'utilizzo e l'integrità delle pagine. Continuano a monitorare i dati di analisi in base all'utilizzo di questo componente.
Come sicurezza per gli utenti, il team ha creato un timeout forzato per disabilitare il wakelock dopo un'ora di inattività. Nel breve periodo, l'implementazione finale è stata l'attivazione di un pulsante su tutte le pagine delle ricette dei siti. Sul lungo periodo, prevedono una rinnovata visualizzazione di pagina delle ricette.
Il contenitore del 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 prodotto ottimi risultati. Nel periodo compreso tra il 10 dicembre 2019 e il 10 gennaio 2020, BettyCrocker.com ha riferito le seguenti metriche:
- Di tutti gli utenti di Betty Crocker con un browser compatibile con l'API Wake Lock, il 3,5% ha attivato la funzionalità immediatamente, il che lo rende una delle 5 principali azioni.
- La durata della sessione per gli utenti che hanno attivato il wakelock è stata 3,1 volte maggiore rispetto a quella per gli utenti che non l'hanno attivato.
- La frequenza di rimbalzo per gli utenti che hanno abilitato il wakelock era inferiore del 50% rispetto a chi non utilizzava la funzionalità di wakelock.
- Gli indicatori di intenzione di acquisto sono stati di circa il 300% più elevati per gli utenti di wakelock rispetto a tutti gli utenti.
3,1×
Durata della sessione maggiore
Il 50%
Riduci la frequenza di rimbalzo
Il 300%
Indicatori più elevati dell'intenzione di acquisto
Conclusioni
Betty Crocker ha ottenuto risultati fantastici usando l'API Wake Lock. Puoi testare autonomamente la funzionalità cercando la tua ricetta preferita su uno qualsiasi dei loro siti (BettyCrocker, Pillsbury o Tablespoon) e attivando l'opzione Impedisci che lo schermo si spenga mentre cucini.
I casi d'uso per i wakelock non si riferiscono ai siti di ricette. Altri esempi sono le app per carte d'imbarco o per i biglietti che devono mantenere lo schermo attivo fino alla scansione del codice a barre, le app in stile kiosk che mantengono lo schermo sempre attivo o le app di presentazione basate sul web che impediscono allo schermo di dormire 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
La foto della persona che impasta la pasta è gentilmente concessa da Julian Hochgesang su Unsplash.