應用程式網域
如要展示迷你應用程式的程式設計方式如何套用至網頁應用程式，我需要一個小巧但夠完整的應用程式構想。高強度間歇訓練 (HIIT) 是一種心血管運動策略，交替進行短時間的劇烈無氧運動和較緩和的恢復期。許多 HIIT 訓練都會使用 HIIT 計時器，例如 The Body Coach TV YouTube 頻道提供的這項 30 分鐘的線上訓練。
高強度間歇訓練時間範例應用程式
在本章中，我建構了這類 HIIT 計時器應用程式的基本範例，並命名為「HIIT Time」，可讓使用者定義及管理各種計時器 (一律包含高強度和低強度間歇)，然後選取其中一個進行訓練。這是一個回應式應用程式，包含導覽列、分頁列和三個頁面：
- 運動：運動期間的有效頁面。使用者可以選取其中一個計時器，並查看三種進度環：組數、運動時間和休息時間。
- 計時器：管理現有計時器，並允許使用者建立新的計時器。
- 偏好設定：可切換音效和語音輸出，以及選取語言和主題。
以下螢幕截圖可讓您瞭解應用程式。
應用程式結構
如上所述，這個應用程式包含導覽列、分頁列和三個頁面，以格狀排列。
導覽列和分頁列會以 iframe 形式實作，兩者之間有 <div> 容器，其中包含另外三個頁面 iframe，其中一個會根據分頁列中的有效選取項目顯示。最終 iframe 會指向 about:blank，用於動態建立應用程式內網頁，修改現有計時器或建立新計時器時需要用到。我將這種模式稱為多頁單頁應用程式 (MPSPA)。
以元件為基礎的 lit-html 標記
每個網頁的結構都會以 lit-html 支架的形式呈現，並在執行階段動態評估。
lit-html 是 JavaScript 的高效能、具表現力且可擴充的 HTML 範本程式庫。直接在 HTML 檔案中使用，心理程式設計模型會直接以輸出內容為導向。程式設計師會編寫最終輸出內容的範本，然後 lit-html 會根據您的資料動態填補空白處，並連結事件監聽器。應用程式會使用第三方自訂元素，例如 Shoelace 的 <sl-progress-ring> 或名為 <human-duration> 的自行實作自訂元素。
由於自訂元素具有宣告式 API (例如進度環的 percentage 屬性)，因此可與 lit-html 搭配使用，如下方清單所示。
<div>
<button class="start" @click="${eventHandlers.start}" type="button">
${strings.START}
</button>
<button class="pause" @click="${eventHandlers.pause}" type="button">
${strings.PAUSE}
</button>
<button class="reset" @click="${eventHandlers.reset}" type="button">
${strings.RESET}
</button>
</div>
<div class="progress-rings">
<sl-progress-ring
class="sets"
percentage="${Math.floor(data.sets/data.activeTimer.sets*100)}"
>
<div class="progress-ring-caption">
<span>${strings.SETS}</span>
<span>${data.sets}</span>
</div>
</sl-progress-ring>
</div>
程式設計模型
每個頁面都有對應的 Page 類別，可透過提供事件處理常式的實作項目，以及每個頁面的資料，填入 lit-html 標記。這個類別也支援 onShow()、onHide()、onLoad() 和 onUnload() 等生命週期方法。網頁可存取資料儲存庫，用於分享可選用的網頁狀態和全域狀態。
所有字串都集中管理，因此內建國際化功能。
瀏覽器會處理路徑，基本上不需要任何費用，因為應用程式只會切換 iframe 可見度，並針對動態建立的網頁變更預留位置 iframe 的 src 屬性。下方範例顯示關閉動態建立頁面的程式碼。
import Page from '../page.js';
const page = new Page({
eventHandlers: {
back: (e) => {
e.preventDefault();
window.top.history.back();
},
},
});
樣式
頁面樣式會透過專屬的範圍 CSS 檔案，在每個頁面中套用。
這表示元素通常可以直接透過元素名稱定址，因為不會與其他網頁發生衝突。全域樣式會新增至每個網頁，因此不必重複宣告 font-family 或 box-sizing 等中央設定。主題和深色模式選項也是在這裡定義。
下方的清單顯示「偏好設定」頁面的規則，該頁面會在格線中列出各種表單元素。
main {
max-width: 600px;
}
form {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0.5rem;
margin-block-end: 1rem;
}
label {
text-align: end;
grid-column: 1 / 2;
}
input,
select {
grid-column: 2 / 3;
}
螢幕 Wake Lock
運動期間螢幕不應關閉。 在支援的瀏覽器上，「HIIT Time」會透過Wake Lock功能實現這點。以下程式碼片段顯示如何執行這項操作。
if ('wakeLock' in navigator) {
const requestWakeLock = async () => {
try {
page.shared.wakeLock = await navigator.wakeLock.request('screen');
page.shared.wakeLock.addEventListener('release', () => {
// Nothing.
});
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// Request a screen wake lock…
await requestWakeLock();
// …and re-request it when the page becomes visible.
document.addEventListener('visibilitychange', async () => {
if (
page.shared.wakeLock !== null &&
document.visibilityState === 'visible'
) {
await requestWakeLock();
}
});
}
測試應用程式
您可以在 GitHub 取得 HIIT Time 應用程式。您可以在新視窗中試用這個範例，也可以直接在下方的 iframe 嵌入內容中操作，模擬行動裝置。
特別銘謝
本文由 Joe Medley、 Kayce Basques、 Milica Mihajlija、 Alan Kent 和 Keith Gu 審查。