Tidak ada yang lebih buruk saat memasak dengan perangkat seluler selain layarnya mati di tengah langkah resep. Pelajari cara situs memasak BettyCrocker.com menggunakan Wake Lock API untuk mencegah hal ini terjadi.
Aplikasi iOS dan Android yang sudah dihentikan
Dirilis dengan banyak kemeriahan pada tahun 2014, Betty Crocker baru-baru ini mengeluarkan aplikasi mereka dari Apple App Store dan Google Play Store setelah aplikasi tersebut tidak diprioritaskan. Sejak lama, tim Betty Crocker lebih suka menambahkan fitur baru ke situs seluler, bukan aplikasi iOS/Android. Platform teknis tempat aplikasi iOS/Android dibuat sudah usang, dan bisnis tidak memiliki sumber daya untuk mendukung update dan pemeliharaan aplikasi ke depannya. Aplikasi web juga secara objektif memiliki traffic yang jauh lebih besar, lebih modern, dan lebih mudah untuk ditingkatkan.
Namun, aplikasi iOS/Android memiliki satu fitur unggulan, yang disukai pengguna mereka:
Tips pro memasak milenial: aplikasi seluler @BettyCrocker tidak akan meredup atau terkunci saat Anda mengikuti resep. —@AvaBeilke
80% orang memasak menggunakan perangkat di dapur, tetapi peredupan dan penguncian layar menjadi masalah. Apa yang dilakukan @BettyCrocker? Mengupdate aplikasi mereka agar TIDAK meredup ketika pengguna sedang membuka resep. —@KatieTweedy
Menghadirkan fitur hebat ke web dengan Wake Lock API
Saat memasak menggunakan perangkat, tidak ada yang lebih menjengkelkan daripada harus menyentuh layar dengan tangan yang berantakan atau bahkan hidung Anda saat layar mati. Betty Crocker bertanya pada diri sendiri bagaimana cara mem-porting fitur penting dari aplikasi iOS/Android mereka ke aplikasi web. Ini adalah saat dia mempelajari Project Fugu dan Wake Lock API.
Wake Lock API menyediakan cara untuk mencegah perangkat meredupkan atau mengunci layar. Kemampuan ini memungkinkan pengalaman baru yang, hingga saat ini, memerlukan aplikasi iOS/Android. Wake Lock API mengurangi kebutuhan akan solusi yang rumit dan berpotensi boros daya.
Meminta penguncian layar saat aktif
Untuk meminta penguncian layar saat aktif, Anda harus memanggil metode navigator.wakeLock.request()
yang menampilkan objek WakeLockSentinel. Anda akan menggunakan objek ini sebagai nilai sentinel.
Browser dapat menolak permintaan karena berbagai alasan
(misalnya, karena baterai terlalu lemah),
jadi sebaiknya gabungkan panggilan dalam pernyataan try…catch.
Melepaskan penguncian layar saat aktif
Anda juga memerlukan cara untuk melepaskan penguncian layar saat aktif,
yang dilakukan dengan memanggil metode release() dari objek WakeLockSentinel.
Jika ingin otomatis melepaskan penguncian layar saat aktif setelah jangka waktu tertentu berlalu,
Anda dapat menggunakan window.setTimeout() untuk memanggil release(), seperti yang ditunjukkan pada contoh di bawah.
// 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);
Implementasi
Dengan aplikasi web baru ini, pengguna harus diizinkan untuk membuka resep, menyelesaikan langkah-langkah, dan bahkan berjalan dengan mudah tanpa penguncian layar. Untuk mencapai tujuan ini, tim pertama-tama membuat prototipe front-end cepat sebagai bukti konsep dan untuk mengumpulkan masukan UX.
Setelah prototipe terbukti bermanfaat, mereka mendesain komponen Vue.js yang dapat dibagikan ke semua merek mereka (BettyCrocker, Pillsbury, dan Tablespoon). Meskipun hanya Betty Crocker yang memiliki aplikasi iOS dan Android, ketiga situs tersebut memiliki code base bersama, sehingga dapat menerapkan komponen satu kali dan men-deploy komponennya di mana saja, seperti yang ditunjukkan pada screenshot di bawah.
Saat mengembangkan komponen berdasarkan framework modern situs baru,
ada fokus yang kuat pada
lapisan ViewModel pola MVVM.
Tim juga memprogram dengan mempertimbangkan interoperabilitas
untuk mengaktifkan fungsi pada framework situs lama dan baru.
Untuk melacak visibilitas dan kegunaan, Betty Crocker mengintegrasikan pelacakan analisis untuk peristiwa inti dalam siklus proses penguncian layar saat aktif. Tim memanfaatkan pengelolaan fitur untuk men-deploy komponen penguncian layar saat aktif ke satu situs untuk peluncuran produksi awal, lalu men-deploy fitur tersebut ke seluruh situs setelah memantau penggunaan dan kondisi halaman. Mereka terus memantau data analisis berdasarkan penggunaan komponen ini.
Sebagai alat pengaman bagi pengguna, tim membuat waktu tunggu paksa untuk menonaktifkan penguncian layar saat aktif setelah tidak aktif selama satu jam. Dalam jangka pendek, mereka menggunakan tombol untuk beralih di semua halaman resep di situs mereka. Dalam jangka panjang, mereka membayangkan tampilan halaman resep yang diperbarui.
Penampung penguncian layar saat aktif
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');
}
},
},
};
Komponen penguncian layar saat aktif
<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>
Hasil
Komponen Vue.js telah diterapkan di ketiga situs tersebut dan memberikan hasil yang luar biasa. Selama periode dari 10 Desember 2019 hingga 10 Januari 2020, BettyCrocker.com melaporkan metrik berikut:
- Dari semua pengguna Betty Crocker yang browsernya kompatibel dengan Wake Lock API, 3,5% di antaranya langsung mengaktifkan fitur ini, yang menjadikannya tindakan 5 teratas.
- Durasi sesi untuk pengguna yang mengaktifkan penguncian layar saat aktif adalah 3,1× lebih lama dibandingkan pengguna yang tidak mengaktifkan.
- Rasio pantulan untuk pengguna yang mengaktifkan penguncian layar saat aktif 50% lebih rendah daripada mereka yang tidak menggunakan fitur penguncian layar saat aktif.
- Indikator niat membeli sekitar 300% lebih tinggi untuk pengguna penguncian layar saat aktif dibandingkan dengan semua pengguna.
3,1×
Durasi sesi lebih lama
50%
Rasio pantulan lebih rendah
300%
Indikator niat membeli lebih tinggi
Kesimpulan
Betty Crocker telah mendapatkan hasil yang fantastis dengan menggunakan Wake Lock API. Anda dapat menguji fitur ini sendiri dengan menelusuri resep favorit di salah satu situs mereka (BettyCrocker, Pillsrry, atau Tablespoon) dan mengaktifkan tombol Cegah layar Anda menjadi gelap saat memasak.
Kasus penggunaan untuk penguncian layar saat aktif tidak berhenti di situs resep. Contoh lainnya adalah boarding pass atau aplikasi tiket yang harus menjaga layar tetap aktif hingga kode batang dipindai, aplikasi bergaya kios yang membuat layar terus aktif, atau aplikasi presentasi berbasis web yang mencegah layar tidur selama presentasi.
Kami telah mengumpulkan semua yang perlu Anda ketahui tentang Wake Lock API dalam artikel komprehensif di situs ini. Selamat membaca, dan selamat memasak!
Ucapan terima kasih
Foto Adonan orang disediakan oleh Julian Hochgesang di Unsplash.