Per quasi un secolo, Betty Crocker è stata la fonte americana di istruzioni di cucina moderne e di sviluppo di ricette affidabili. Lanciato nel 1997, il loro sito BettyCrocker.com oggi riceve più di 12 milioni di visitatori al mese. Dopo aver implementato l'API Wake Lock, i loro indicatori di intenzione di acquisto erano circa il 300% più alti per gli utenti di Wake Lock rispetto a tutti gli utenti.
App per iOS e Android ritirate
Rilasciate con grande clamore nel 2014, Betty Crocker ha recentemente rimosso le sue app dall'Apple App Store e dal Google Play Store dopo che era stata data loro una priorità inferiore. Per molto tempo, il team di Betty Crocker ha preferito aggiungere nuove funzionalità al sito mobile anziché alle app per iOS/Android. La piattaforma tecnica su cui sono state create le app per iOS/Android era obsoleta e l'attività non disponeva delle risorse per supportare l'aggiornamento e la manutenzione delle app in futuro. Inoltre, l'app web aveva un traffico oggettivamente molto più elevato, era più moderna e più facile da migliorare.
Le app per iOS/Android avevano però una funzionalità eccezionale che gli utenti adoravano:
Suggerimento per i professionisti della cucina della generazione Y: 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'attenuazione e il blocco dello schermo sono un problema. Che cosa ha fatto @BettyCrocker? Ha aggiornato la sua app in modo che NON si attenui quando gli utenti sono in una ricetta. —@KatieTweedy
Portare la funzionalità killer sul web con l'API Wake Lock
Quando si cucina con un dispositivo, non c'è niente di più frustrante che dover toccare lo schermo con le mani sporche o persino con il naso quando lo schermo si spegne. Betty Crocker si è chiesta come poter trasferire la funzionalità principale delle sue app per iOS/Android all'app web. È stato allora che ha scoperto il Progetto Fugu e l'API Wake Lock.
L'API Wake Lock fornisce un modo per impedire al dispositivo di oscurare o bloccare lo schermo. Questa funzionalità consente nuove esperienze che, fino ad ora, richiedevano un'app iOS/Android. L'API Wake Lock riduce la necessità di soluzioni alternative approssimative e potenzialmente dispendiose in termini di energia.
Richiesta di un wakelock
Per richiedere un wake lock, devi chiamare il metodo navigator.wakeLock.request()
che restituisce un oggetto WakeLockSentinel. Utilizzerai questo oggetto come
valore sentinella.
Il browser può rifiutare la richiesta per vari motivi
(ad esempio, perché la batteria è troppo scarica),
quindi è buona norma racchiudere la chiamata in un'istruzione try…catch.
Rilasciare un wakelock
Devi anche avere un modo per rilasciare un wake lock,
che si ottiene chiamando il metodo release() dell'oggetto WakeLockSentinel.
Se vuoi rilasciare automaticamente il blocco di riattivazione 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 dovrebbero essere in grado di navigare facilmente in una ricetta, completare i passaggi e persino allontanarsi senza che lo schermo si blocchi. Per raggiungere questo obiettivo, il team ha prima creato un prototipo di front-end rapido come proof of concept e per raccogliere input sull'esperienza utente.
Dopo aver dimostrato l'utilità del prototipo, hanno progettato un componente Vue.js che potesse essere condiviso 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, quindi hanno potuto implementare il componente una sola volta e distribuirlo ovunque, come mostrato negli screenshot di seguito.
Durante lo sviluppo del componente basato sul framework modernizzato del nuovo sito, è stata prestata particolare attenzione al
livello ViewModel del pattern MVVM.
Il team ha anche programmato pensando all'interoperabilità
per abilitare la funzionalità sui framework legacy e nuovi del sito.
Per tenere traccia della visibilità e dell'usabilità, Betty Crocker ha integrato il monitoraggio dell'analisi per gli eventi principali nel ciclo di vita del blocco della riattivazione. Il team ha utilizzato la gestione delle funzionalità per eseguire il deployment del componente di riattivazione in un singolo sito per l'implementazione iniziale della produzione, e poi ha eseguito il deployment della funzionalità nel resto dei siti dopo aver monitorato l'utilizzo e l'integrità della pagina. Continuano a monitorare i dati di analisi in base all'utilizzo di questo componente.
Come meccanismo di sicurezza per gli utenti, il team ha creato un timeout forzato per disattivare il wake lock dopo un'ora di inattività. L'implementazione finale che hanno scelto è stata a breve termine un pulsante di attivazione/disattivazione su tutte le pagine delle ricette dei loro siti. A lungo termine, prevedono una visualizzazione della pagina delle ricette rinnovata.
Il container 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 su tutti e tre i siti e ha dato ottimi risultati. Nel periodo dal 10 dicembre 2019 al 10 gennaio 2020, BettyCrocker.com ha registrato le seguenti metriche:
- Di tutti gli utenti di Betty Crocker con un browser compatibile con l'API Wake Lock, il 3,5% ha attivato immediatamente la funzionalità, rendendola una delle prime 5 azioni.
- La durata della sessione per gli utenti che hanno attivato il blocco della riattivazione è stata 3,1 volte più lunga rispetto a quella degli utenti che non l'hanno attivato.
- La frequenza di rimbalzo per gli utenti che hanno attivato il blocco riattivazione era del 50% inferiore rispetto a quelli che non utilizzano la funzionalità di blocco riattivazione.
- Gli indicatori dell'intenzione di acquisto erano circa il 300% più alti per gli utenti con riattivazione rispetto a tutti gli utenti.
3.1×
Durata della sessione più lunga
50%
Frequenza di rimbalzo inferiore
300%
Indicatori di un'intenzione di acquisto più elevata
Conclusioni
Betty Crocker ha ottenuto risultati fantastici utilizzando l'API Wake Lock. Puoi provare la funzionalità in prima persona cercando la tua ricetta preferita su uno dei loro siti (BettyCrocker, Pillsbury o Tablespoon) e attivando l'opzione Impedisci allo schermo di oscurarsi mentre cucini.
I casi d'uso per i wake lock non si limitano ai siti di ricette. Altri esempi sono le app per carte d'imbarco o biglietti che devono mantenere lo schermo attivo fino a quando il codice a barre non viene scansionato, le app in stile chiosco che mantengono lo schermo attivo continuamente o le app di presentazione basate sul web che impediscono allo schermo di spegnersi durante una presentazione.
Abbiamo raccolto tutto ciò che devi sapere sull'API Wake Lock in un articolo completo su questo stesso sito. Buona lettura e buona cucina.