Trong gần một thế kỷ, Betty Crocker là nguồn cung cấp hướng dẫn nấu ăn hiện đại và phát triển công thức đáng tin cậy cho người Mỹ. Ra mắt vào năm 1997, trang web BettyCrocker.com của họ hiện có hơn 12 triệu lượt truy cập mỗi tháng. Sau khi triển khai Wake Lock API, các chỉ số về ý định mua hàng của họ đã tăng khoảng 300% đối với người dùng wake lock so với tất cả người dùng.
Các ứng dụng iOS và Android đã ngừng hoạt động
Được phát hành rầm rộ vào năm 2014, gần đây, Betty Crocker đã gỡ bỏ các ứng dụng của mình khỏi Apple App Store và Cửa hàng Google Play sau khi các ứng dụng này bị giảm mức độ ưu tiên. Trong một thời gian dài, nhóm Betty Crocker đã ưu tiên thêm các tính năng mới vào trang web di động thay vì ứng dụng iOS/Android. Nền tảng kỹ thuật mà các ứng dụng iOS/Android được tạo ra đã lỗi thời và doanh nghiệp không có đủ nguồn lực để hỗ trợ việc cập nhật và duy trì các ứng dụng trong tương lai. Ứng dụng web cũng có lưu lượng truy cập lớn hơn nhiều, hiện đại hơn và dễ cải thiện hơn.
Tuy nhiên, các ứng dụng iOS/Android có một tính năng nổi bật mà người dùng rất yêu thích:
Mẹo nấu ăn dành cho thế hệ Millennials: ứng dụng di động @BettyCrocker sẽ không làm mờ hoặc khoá khi bạn đang làm theo một công thức. —@AvaBeilke
80% người dùng nấu ăn bằng thiết bị trong nhà bếp, nhưng việc màn hình bị mờ và khoá là một vấn đề. @BettyCrocker đã làm gì? Cập nhật ứng dụng của họ để KHÔNG làm mờ khi người dùng đang xem một công thức. –@KatieTweedy
Đưa tính năng quan trọng lên web bằng Wake Lock API
Khi nấu ăn bằng thiết bị, không gì khó chịu hơn việc phải chạm vào màn hình bằng tay bẩn hoặc thậm chí là mũi khi màn hình tắt. Betty Crocker tự hỏi làm cách nào họ có thể chuyển tính năng nổi bật của ứng dụng iOS/Android sang ứng dụng web. Đây là lúc họ biết đến Dự án Fugu và Wake Lock API.
Wake Lock API cung cấp một cách để ngăn thiết bị giảm độ sáng hoặc khoá màn hình. Tính năng này cho phép tạo ra những trải nghiệm mới mà cho đến nay, bạn cần có một ứng dụng iOS/Android. Wake Lock API giúp giảm nhu cầu về các giải pháp tạm thời có thể tiêu tốn nhiều năng lượng.
Yêu cầu khoá chế độ thức
Để yêu cầu khoá đánh thức, bạn cần gọi phương thức navigator.wakeLock.request() trả về một đối tượng WakeLockSentinel. Bạn sẽ dùng đối tượng này làm giá trị báo hiệu.
Trình duyệt có thể từ chối yêu cầu vì nhiều lý do (ví dụ: vì pin quá yếu), vì vậy, bạn nên bao bọc lệnh gọi trong một câu lệnh try…catch.
Giải phóng khoá chế độ thức
Bạn cũng cần có cách để giải phóng khoá đánh thức bằng cách gọi phương thức release() của đối tượng WakeLockSentinel.
Nếu muốn tự động giải phóng khoá đánh thức sau một khoảng thời gian nhất định, bạn có thể dùng window.setTimeout() để gọi release(), như trong ví dụ bên dưới.
// 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);
Việc triển khai
Với ứng dụng web mới, người dùng có thể dễ dàng xem một công thức, hoàn thành các bước và thậm chí rời đi mà không cần khoá màn hình. Để đạt được mục tiêu này, trước tiên, nhóm đã tạo một nguyên mẫu giao diện người dùng nhanh để chứng minh khái niệm và thu thập thông tin đầu vào về trải nghiệm người dùng.
Sau khi nhận thấy nguyên mẫu này hữu ích, họ đã thiết kế một thành phần Vue.js có thể dùng chung cho tất cả các thương hiệu của họ (BettyCrocker, Pillsbury và Tablespoon). Mặc dù chỉ có Betty Crocker có ứng dụng iOS và Android, nhưng 3 trang web này có chung một cơ sở mã, vì vậy, họ có thể triển khai thành phần này một lần và triển khai ở mọi nơi, như trong ảnh chụp màn hình bên dưới.
Khi phát triển thành phần dựa trên khung hiện đại của trang web mới, chúng tôi tập trung mạnh vào lớp ViewModel của mẫu MVVM.
Nhóm cũng lập trình với mục tiêu tương tác để bật chức năng trên các khung cũ và mới của trang web.
Để theo dõi khả năng xem và khả năng sử dụng, Betty Crocker đã tích hợp tính năng theo dõi số liệu phân tích cho các sự kiện cốt lõi trong vòng đời khoá đánh thức. Nhóm đã sử dụng tính năng quản lý để triển khai thành phần khoá đánh thức cho một trang web duy nhất trong lần triển khai sản xuất ban đầu, sau đó triển khai tính năng này cho các trang web còn lại sau khi theo dõi mức sử dụng và tình trạng của trang. Họ tiếp tục theo dõi dữ liệu phân tích dựa trên việc sử dụng thành phần này.
Để đảm bảo an toàn cho người dùng, nhóm đã tạo một chế độ buộc hết thời gian chờ để tắt khoá đánh thức sau một giờ không hoạt động. Giải pháp triển khai cuối cùng mà họ quyết định là một nút bật/tắt trong ngắn hạn trên tất cả các trang công thức trên trang web của họ. Về lâu dài, họ dự định cải tiến chế độ xem trang công thức.
Vùng chứa khoá chế độ thức
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');
}
},
},
};
Thành phần khoá chế độ thức
<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>
Kết quả
Thành phần Vue.js đã được triển khai trên cả 3 trang web và mang lại kết quả tuyệt vời. Trong khoảng thời gian từ ngày 10 tháng 12 năm 2019 đến ngày 10 tháng 1 năm 2020, BettyCrocker.com đã báo cáo các chỉ số sau:
- Trong số tất cả người dùng Betty Crocker có trình duyệt tương thích với Wake Lock API, 3,5% người dùng đã bật tính năng này ngay lập tức, đưa tính năng này vào top 5 hành động.
- Thời lượng phiên của những người dùng đã bật khoá đánh thức dài hơn 3,1 lần so với những người dùng chưa bật.
- Tỷ lệ trả lại của những người dùng đã bật khoá đánh thức thấp hơn 50% so với những người không sử dụng tính năng khoá đánh thức.
- Chỉ số về ý định mua hàng cao hơn khoảng 300% đối với người dùng khoá đánh thức so với tất cả người dùng.
3,1lần
Thời lượng phiên dài hơn
50%
Tỷ lệ thoát thấp hơn
300%
Chỉ báo về ý định mua rõ ràng hơn
Kết luận
Betty Crocker đã đạt được những kết quả tuyệt vời khi sử dụng Wake Lock API. Bạn có thể tự mình dùng thử tính năng này bằng cách tìm kiếm công thức nấu ăn yêu thích trên bất kỳ trang web nào của họ (BettyCrocker, Pillsbury hoặc Tablespoon) và bật nút Ngăn màn hình chuyển sang chế độ tối khi bạn nấu ăn.
Các trường hợp sử dụng khoá đánh thức không chỉ dừng lại ở các trang web về công thức nấu ăn. Các ví dụ khác là ứng dụng thẻ lên máy bay hoặc vé cần giữ màn hình ở trạng thái bật cho đến khi mã vạch được quét, ứng dụng kiểu ki-ốt liên tục giữ màn hình ở trạng thái bật hoặc ứng dụng trình bày dựa trên web ngăn màn hình chuyển sang chế độ ngủ trong quá trình trình bày.
Chúng tôi đã tổng hợp mọi thông tin bạn cần biết về Wake Lock API trong một bài viết toàn diện trên chính trang web này. Chúc bạn đọc và nấu ăn vui vẻ!