Không có gì tệ hơn khi màn hình tắt khi nấu ăn bằng thiết bị di động ở giữa bước công thức. Hãy tìm hiểu cách trang web nấu ăn BettyCrocker.com dùng API Wake Lock để ngăn chặn điều này xảy ra.
Các ứng dụng iOS và Android đã ngừng hoạt động
Được phát hành để khơi dậy sự hào hứng vào năm 2014, Gần đây, Betty Crocker đã gỡ bỏ ứng dụng của mình khỏi Apple App Store và Cửa hàng Google Play sau khi bị giảm mức độ ưu tiên. 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ì ứ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ó các nguồn lực để hỗ trợ việc cập nhật và duy trì ứng dụng trong tương lai. 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ễ nâng cao 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 các ứng dụng này yêu thích:
Mẹo nấu ăn chuyên nghiệp dành cho thế hệ Y: ứng dụng di động @BettyCrocker không giảm độ sáng hoặc khoá khi bạn đang theo dõi một công thức. –@AvaBeilke
80% mọi người nấu ăn bằng thiết bị trong bếp, nhưng việc giảm độ sáng màn hình và khóa là một vấn đề. @BettyCrocker đã làm được những 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 xem công thức. —@KatieTweedy
Đưa tính năng "sát thủ" lên web bằng API Wake Lock
Không còn gì khó chịu hơn khi nấu ăn bằng thiết bị so với việc phải chạm vào màn hình bằng bàn tay lộn xộn hay thậm chí là mũi khi màn hình tắt. Betty Crocker tự hỏi làm thế nào họ có thể chuyển tính năng nổi bật trong ứng dụng iOS/Android của mình sang ứng dụng web. Đây là khi họ biết về Project Fugu và API Khoá chế độ thức.
API khoá chế độ thức đưa ra một cách ngăn thiết bị làm mờ hoặc khoá màn hình. Khả 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 giúp giảm nhu cầu tìm kiếm các giải pháp đột phá và có thể tốn năng lượng.
Yêu cầu khóa 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 một
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.
Mở khoá chế độ thức
Bạn cũng cần có cách nào đó để mở khoá chế độ thức,
bạn có thể thực hiện bằng cách gọi phương thức release() của đối tượng WakeLockSentinel.
Nếu bạn muốn tự động mở khóa 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ụ dưới đây.
// 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 phải được cho phép dễ dàng điều hướng qua một công thức, hoàn thành các bước và thậm chí có thể rời đi mà không phải khoá màn hình. Để đạt được mục tiêu này, trước tiên, Kooapps xây dựng một nguyên mẫu giao diện người dùng nhanh 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 có tính hữu ích, họ thiết kế một Thành phần Vue.js có thể được chia sẻ cho tất cả các thương hiệu của họ (BettyCrocker, Pillsbury và Tablespoon). Mặc dù chỉ Betty Crocker có ứng dụng iOS và Android, cả 3 trang web đều có cơ sở mã dùng chung, để 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 dưới đây.
Khi phát triển thành phần này dựa trên khung hiện đại hoá của trang web mới,
có sự tập trung mạnh mẽ vào
Lớp ViewModel của mẫu MVVM.
Nhóm cũng đã lập trình với ý tưởng về khả năng tương tác
để bật chức năng trên các khung cũ và khung 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 đối với các sự kiện chính trong vòng đời khoá chế độ thức. Đội ngũ này sử dụng quy trình quản lý tính năng để triển khai thành phần khoá chế độ thức vào một trang web duy nhất để triển khai trong giai đoạn đầ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 việ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, đội ngũ này đã tạo một thời gian chờ bắt buộc để tắt khóa chế độ thức sau một giờ không hoạt động. Triển khai cuối cùng mà họ quyết định trong thời gian ngắn, đó là 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 xem trang công thức nấu ăn được cải tiế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 thời gian từ ngày 10/12/2019 đến ngày 10/01/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ố đó bật tính năng này ngay lập tức, khiến nó trở thành 5 hành động hàng đầu.
- Thời lượng phiên đối với người dùng đã bật khóa chế độ thức lâu hơn 3,1 lần so với người dùng không có.
- Tỷ lệ thoát cho người dùng đã bật khóa chế độ thức thấp hơn 50% so với những người không sử dụng tính năng khóa chế độ thức.
- Các chỉ báo về ý định mua của người dùng tính nă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 đã thu được kết quả tuyệt vời khi sử dụng API Wake Lock. Bạn có thể tự kiểm tra 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 của mình 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 tối khi đang nấu ăn.
Các trường hợp sử dụng khóa 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 thẻ lên máy bay hoặc vé cần luôn bật màn hình cho đến khi quét mã vạch, các ứng dụng kiểu kiosk luôn bật màn hình 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 đã tổng hợp mọi thông tin 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 thật vui và nấu ăn vui vẻ!
Xác nhận
Ảnh người nhào bột Julian Hochgesang trên Unsplash.