Không có gì tệ hơn khi nấu ăn bằng thiết bị di động hơn là màn hình tắt ở giữa bước công thức. Tìm hiểu cách trang web nấu ăn BettyCrocker.com sử dụng API Wake Lock để ngăn điều này xảy ra.
Ứng dụng iOS và Android đã ngừng hoạt động
Phát hành để thực sự được ưa chuộng vào năm 2014, gần đây, Betty Crocker đã gỡ ứ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 đó không được ưu tiên nữa. Từ lâu, 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ì các ứng dụng dành cho iOS/Android. Nền tảng kỹ thuật dùng để tạo ứng dụng iOS/Android đã 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ì ứng dụng. Về mặt khách quan, ứng dụng web cũng có lưu lượng truy cập lớn hơn, 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 sát thủ mà người dùng yêu thích:
Mẹo nấu ăn chuyên nghiệp dành cho thế hệ Y: ứng dụng di động của @BettyCrocker không tắt hoặc khoá khi bạn đang làm theo một công thức nào đó. – @AvaBeilke
80% mọi người nấu ăn bằng thiết bị trong nhà bếp, nhưng việc giảm độ sáng màn hình và khoá là một vấn đề. @BettyCrocker đã làm gì? Cập nhật ứng dụng của họ thành KHÔNG làm tối khi người dùng đang nấu ăn. —@KatieTweedy
Đưa tính năng thường trực tuyến lên web với Wake Lock API
Khi nấu ăn bằng thiết bị, chẳng có gì khó chịu hơn việc phải chạm vào màn hình với đôi tay lộn xộn hay thậm chí là mũi khi màn hình tắt. Betty Crocker tự hỏi bản thân làm thế 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ọ tìm hiểu về Project Fugu và API khoá chế độ thức.
API khoá chế độ thức cung cấp một cách để ngăn thiết bị làm mờ hoặc khoá màn hình. Tính năng này mang lại các trải nghiệm mới mà cho đến nay yêu cầu phải có ứng dụng iOS/Android. API Wake Lock API làm giảm nhu cầu giải quyết các vấn đề tấn công hoặc ngốn 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ề đố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 (chẳng hạn như vì pin quá yếu). Vì vậy, bạn nên gói lệnh gọi trong một câu lệnh try…catch.
Phát hành khoá chế độ thức
Bạn cũng cần một cách để phát hà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 mở 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);
Quá trình triển khai
Với ứng dụng web mới, người dùng phải dễ dàng di chuyển qua công thức nấu ăn, hoàn thành các bước và thậm chí là 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 xây dựng một nguyên mẫu nhanh giao diện người dùng để làm bằng chứng về 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 nguyên mẫu trở nên hữu ích, họ đã thiết kế một thành phần Vue.js có thể dùng chung cho mọi thương hiệu của mình (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ọ chỉ cần triển khai thành phần này một lần rồi triển khai ở mọi nơi, như minh hoạ trong ảnh chụp màn hình dưới đây.
Khi phát triển thành phần dựa trên khung hiện đại hoá của trang web mới, chúng tôi đặc biệt chú trọng đến lớp ViewModel của mẫu MVVM.
Nhóm này cũng đã lập trình với mục tiêu cân nhắc khả năng tương tác để kích hoạ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 số liệu phân tích cho các sự kiện chính trong vòng đời khoá chế độ thức. Nhóm đã sử dụng tính năng quản lý tính năng để triển khai thành phần khoá chế độ thức cho một trang web duy nhất để phát hành chính thức ban đầu, và 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ọ sẽ 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 phát triển đã 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. Cách triển khai cuối cùng mà họ đã thiết lập là nút bật/tắt ngắn hạn 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 những 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 Wake Lock, 3,5% trong số họ đã bật tính năng này ngay lập tức, khiến dịch vụ này nằm trong nhóm 5 hành động hàng đầu.
- Thời lượng phiên của người dùng đã bật tính năng khoá chế độ thức dài hơn 3,1 lần so với người dùng không bật.
- Tỷ lệ thoát của người dùng đã bật tính năng 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.
- Các chỉ báo về ý định mua của người dùng khoá chế độ thức cao hơn khoảng 300% so với tất cả người dùng.
3,1×
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 Wake Lock API. Bạn có thể tự kiểm thử tính năng này bằng cách tì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) rồi bật nút chuyển Ngăn màn hình tối đi khi bạn nấu.
Các trường hợp sử dụng khoá chế độ thức không dừng lại ở các trang web về công thức nấu ăn. Có thể kể đến một số ví dụ khác như ứng dụng thẻ lên máy bay hoặc ứng dụng vé cần giữ màn hình cho đến khi quét mã vạch, ứng dụng kiểu kiosk giữ màn hình liên tục bật hoặc ứng dụng trình bày dựa trên nền tảng web ngăn màn hình chuyển sang chế độ ngủ trong khi thuyết trình.
Chúng tôi đã tổng hợp mọi điều bạn cần biết về API Wake Lock trong một bài viết toàn diện trên chính trang web này. Chúc bạn đọc vui vẻ và nấu ăn vui vẻ!
Xác nhận
Ảnh người nhào bột của Julian Hochgesang trên Unsplash.