Không có gì tệ hơn khi nấu ăn bằng thiết bị di động mà màn hình thiết bị lại tắt giữa một bước trong công thức nấu ăn. Tìm hiểu cách trang web nấu ăn BettyCrocker.com sử dụng API Khoá chế độ thức để ngăn chặn điều này.
Các ứng dụng iOS và Android đã ngừng hoạt động
Được phát hành với nhiều sự kiện quảng bá vào năm 2014, gần đây, Betty Crocker đã xoá các ứng dụng của họ 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 dành cho thiết bị 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 trên đó đã lỗi thời và doanh nghiệp không có tài nguyên để 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 đáng kể, hiện đại hơn và dễ nâng cao 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 yêu thích:
Mẹo nấu ăn chuyên nghiệp dành cho thế hệ thiên niên kỷ: ứng dụng di động @BettyCrocker không làm mờ hoặc khoá khi bạn đang làm theo công thức nấu ăn. —@AvaBeilke
80% người dùng nấu ăn bằng thiết bị trong nhà bếp, nhưng việc làm mờ và khoá màn hình là một vấn đề. @BettyCrocker đã làm gì? Cập nhật ứng dụng để KHÔNG làm mờ khi người dùng đang xem công thức nấu ăn. —@KatieTweedy
Mang tính năng tuyệt vời này lên web bằng Wake Lock API
Khi nấu ăn bằng thiết bị, không gì bực bội hơn là 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 để 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ọ tìm hiểu về Dự án Fugu và Wake Lock API.
Wake Lock API cung cấp cách ngăn thiết bị giảm độ sáng hoặc khoá màn hình. Khả năng này mang đến những trải nghiệm mới mà cho đến nay, bạn cần có một ứng dụng iOS/Android. API khoá chế độ thức giúp giảm nhu cầu sử dụng các giải pháp hack và có thể tốn nhiều pin.
Yêu cầu khoá chế độ thức
Để yêu cầu khoá chế độ 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ẽ sử dụng đối tượng này làm giá trị sentinel.
Trình duyệt có thể từ chối yêu cầu vì nhiều lý do (ví dụ: do pin quá yếu), vì vậy, bạn nên gói lệnh gọi trong câu lệnh try…catch.
Giải phóng khoá chế độ thức
Bạn cũng cần có cách để nhả khoá chế độ thức. Bạn có thể thực hiện việc này bằng cách gọi phương thức release() của đối tượng WakeLockSentinel.
Nếu muốn tự động nhả khoá chế độ thức sau một khoảng thời gian nhất định, bạn có thể sử 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);
Cách triển khai
Với ứng dụng web mới, người dùng có thể dễ dàng xem công thức nấu ăn, hoàn thành các bước và thậm chí rời khỏi ứng dụng 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 ý kiến phản hồi về trải nghiệm người dùng.
Sau khi nguyên mẫu chứng minh được tính hữu ích, họ đã thiết kế một thành phần Vue.js có thể chia sẻ trên 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 cả ba trang web đều có cơ sở mã dùng chung, nhờ đó, họ có thể triển khai thành phần một lần và triển khai thành phần đó ở 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 khả năng 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 hữu dụng, Betty Crocker đã tích hợp tính năng theo dõi phân tích cho các sự kiện cốt lõi trong vòng đời của khoá chế độ thức. Nhóm đã sử dụng tính năng quản lý để triển khai thành phần khoá chế độ thức cho một trang web duy nhất để triển khai 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 trang. Họ tiếp tục theo dõi dữ liệu phân tích dựa trên mứ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 thời gian chờ bắt buộc để tắt khoá chế độ 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à trong ngắn hạn, một nút bật/tắt trên tất cả các trang công thức nấu ăn trên trang web của họ. Về lâu dài, họ muốn cải tiến chế độ xem trang công thức nấu ăn.
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ả ba 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 API khoá chế độ thức, 3,5% người dùng đã bật tính năng này ngay lập tức, khiến đây trở thành một trong 5 hành động hàng đầu.
- Thời lượng phiên của những người dùng đã bật khoá chế độ thức dài hơn 3,1 lần so với những người dùng không bật.
- Tỷ lệ thoát của những người dùng đã bật khoá chế độ thức thấp hơn 50% so với những người dùng không sử dụng tính năng khoá chế độ thức.
- Chỉ báo về ý định mua hàng cao hơn khoảng 300% đối với người dùng khoá chế độ 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 ý định mua cao hơn
Kết luận
Betty Crocker đã đạt được kết quả tuyệt vời khi sử dụng API khoá chế độ thức. Bạn có thể tự kiểm 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 bật/tắ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á chế độ thức không chỉ dừng lại ở các trang web công thức nấu ăn. Ví dụ khác: ứng dụng vé hoặc thẻ lên máy bay cần giữ màn hình bật cho đến khi quét mã vạch, ứng dụng kiểu ki-ốt giữ màn hình bật liên tục 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 khi trình bày.
Chúng tôi đã biên soạn tất cả những điều 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 sách và nấu ăn vui vẻ!
Lời cảm ơn
Ảnh người đang nhào bột do Julian Hochgesang cung cấp trên Unsplash.