應用程式網域
為示範應用於網頁應用程式的精簡應用程式程式設計方法,我需要具備一個足夠但功能完整的應用程式構想。高強度間歇訓練 (HIIT) 是一種心血管運動策略,會在短時間緊張的劇烈運動上切換,且強度較低的恢復期。許多 HIIT 訓練都會使用 HIIT 計時器,例如,這是 YouTube 頻道 The Body Coach TV 提供的 30 分鐘線上課程。
![含綠色高強度計時器的高強度間歇訓練線上課程。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-example-project/image/hiit-training-online-sess-ed5b035be1093.png?authuser=3&hl=zh-tw)
![高強度間歇訓練線上課程,搭配紅色低強度計時器。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-example-project/image/hiit-training-online-sess-a0dd5340756f1.png?authuser=3&hl=zh-tw)
HIIT 時間範例應用程式
在這個章節中,我建立了一個名為「HIIT 時間」的基本範例,讓使用者能定義和管理各種計時器,且一律包含高強度和低強度的計時器,並選擇其中一個用於訓練課程。這是回應式應用程式,內含導覽列、分頁標籤列和三個頁面:
- 健身:健身期間的有效頁面。它可讓使用者選擇其中一個計時器,並且有三個進度環:組合的數量、有效期間及休息期間。
- 計時器:管理現有的計時器,並讓使用者建立新計時器。
- 偏好設定:可讓您切換音效和語音輸出功能,並選取語言和主題。
以下螢幕截圖為應用程式對應用程式留下印象。
應用程式結構
如上所述,應用程式包含一個以格狀排列的導覽列、分頁標籤列和三個頁面。系統會將導覽列和分頁標籤列視為含有 <div>
容器的 iframe,兩者之間有三個網頁 iframe,但只有兩個 iframe 會一直顯示,且取決於分頁列中的目前選取的項目。指向 about:blank
的最終 iframe 會針對動態建立的應用程式內頁面提供該頁面,用於修改現有的計時器或建立新的計時器。這個模式稱為多頁單頁應用程式 (MPSPA)。
![Chrome 開發人員工具檢視畫面顯示應用程式的 HTML 結構圖,當中包含六個 iframe:一個用於導覽列、一個分頁標籤列,以及應用程式各頁面三個分組的 iframe,並有用於動態網頁的最終預留位置 iframe。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-example-project/image/chrome-devtools-view-the-9da043317ba5b.png?authuser=3&hl=zh-tw)
元件型 lit-html 標記
每個頁面的結構都是 lit-html Scaffold,會在執行階段動態評估。針對 lit-html 的背景,這是安全、生動、可擴展的 JavaScript 範本程式庫。因此,心理程式設計模型會直接以輸出為導向,因此直接在 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>
![三個按鈕和進度環。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-example-project/image/three-buttons-a-progress-df2f6a20c093.png?authuser=3&hl=zh-tw)
程式設計模型
每個頁面都有對應的 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();
},
},
});
![以 iframe 形式導入應用程式內頁面。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-example-project/image/in-app-page-realized-an-25ec73e15af7f.png?authuser=3&hl=zh-tw)
樣式
頁面樣式會在專屬範圍的 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;
}
![HIIT 時間應用程式偏好設定頁面,以格狀版面配置顯示表單。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-example-project/image/hiit-app-preferences-pag-3d83359174159.png?authuser=3&hl=zh-tw)
螢幕 Wake Lock
運動期間,螢幕不應關閉。 在支援這項功能的瀏覽器中,HIIT 時間會透過螢幕 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 時間應用程式。您可以在新視窗中使用示範功能,或直接在下方 iframe 嵌入內容 (模擬行動裝置) 中播放。
特別銘謝
本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 審查。