如何打造行動裝置友善的網頁應用程式

行動裝置友善的網頁應用程式，是一個在手機上像應用程式一樣運作的網站：版面符合窄螢幕、觸控目標夠大、透過行動數據載入迅速，並且能加入主畫面成為漸進式網頁應用程式（PWA）。對多數新應用程式來說，這是實際可行的第一版：一套程式碼、一個連結，不需要經過商店審核。不過它確實有其限制，特別是在 iPhone 的推播通知與深層裝置存取方面。本指南會坦白說明，什麼時候你才需要原生應用程式。

三種「行動版」的做法

PWA 就是加了幾項額外功能的響應式網頁應用程式，因此你不必在前兩者之間二選一。先做響應式，再讓它可以安裝。想深入比較的話，可以參考原生應用程式與漸進式網頁應用程式的比較。

網頁應用程式在手機上能做什麼，不能做什麼

瀏覽器能做的比很多人想像的多：

• 相機與照片上傳，透過標準的檔案輸入欄位。
• 位置資訊，需經使用者同意。
• 安裝到主畫面，並以全螢幕啟動，附帶圖示。
• 離線使用，透過 Service Worker（瀏覽器在背景執行的腳本）快取頁面與資料。
• 推播通知，但 iPhone 有一個限制。Apple 的 WebKit 團隊表示，網頁推播已在 iOS 與 iPadOS 16.4 推出，適用於加入主畫面的網頁應用程式。使用者必須先安裝應用程式，然後允許通知。

原生應用程式仍然較有優勢的地方：

• 深層裝置功能，例如背景定位、藍牙配件、健康資料與主畫面小工具。瀏覽器的支援有限，而且因平台而異。
• App Store 的探索能力。 如果人們會在商店搜尋你，你就必須上架。
• 大量的離線作業，例如在背景同步大型資料集。
• 對效能要求高的圖形，例如高強度的遊戲。

如果上述這些都不是你的應用程式的核心，網頁應用程式很可能就足夠了。

以手機為優先的設計

先設計手機版面，再讓它延展到大螢幕；反過來做通常會讓手機畫面變得擁擠。

版面

• 單欄排列：小螢幕上只用一欄。側邊欄改為底部導覽列或選單。
• 不需左右滑動。寬表格改為卡片，或在自己的容器內捲動。
• 文字不需縮放也能讀：內文約 16px。

觸控

• 大的點擊目標。通常最小約 44 × 44 像素。目標之間要留有空間。
• 主要操作位於拇指範圍內，在高螢幕手機上靠近畫面底部。
• 不要使用只能靠滑鼠懸停才出現的功能。懸停才顯示的提示與選單在觸控螢幕上不存在。
• 正確的鍵盤。電子郵件欄位應叫出電子郵件鍵盤，電話欄位應叫出數字鍵盤。請設定正確的輸入類型。

速度

• 小尺寸的圖片，並依合理尺寸提供，進入畫面時才載入。
• 減少笨重的函式庫。每一個都會增加行動數據的下載時間。
• 骨架畫面或清楚的載入狀態，讓應用程式不會看起來像是卡住了。

安全區域與網址列

在現代手機上，內容可能會被瀏覽器的瀏海或底部的主畫面指示器遮住，特別是在全螢幕安裝的應用程式中。請要求加入安全區域的內距。另外也要注意全高版面，因為網址列出現或消失時，版面可能會跳動。

讓它可以安裝（PWA）

要能安裝，網頁應用程式需要：

1. 網頁應用程式清單（manifest）：一個小檔案，包含應用程式名稱、短名稱、圖示、主題色，以及開啟方式（通常是全螢幕的 "standalone"）。
2. 圖示，尺寸符合各平台的要求，包括適用於 Apple 裝置的圖示。
3. HTTPS，任何正確託管的應用程式本來就有。
4. Service Worker，如果你想支援離線或推播。

接著告訴使用者如何安裝。Android 瀏覽器通常會跳出安裝提示或選單項目；在 iPhone 上則是點選「分享」按鈕，然後選擇「加入主畫面」。附上簡短的「安裝此應用程式」說明與這些步驟，會很有幫助。

離線支援是 PWA 較複雜的部分。快取應用程式的頁面，讓它在沒有網路時也能開啟，相對簡單。但讓使用者離線修改資料，並在之後同步，則需要大量工作。只有在使用者確實需要時，才值得這麼做。

一個有效的第一個提示詞

幫我建立一個網頁應用程式，讓我們的清潔團隊查看今天的工作並標記完成。以手機為優先設計：單欄版面、大的點擊目標、主要操作按鈕固定在底部附近、沒有只能用滑鼠懸停操作的控制項、不需左右滑動，電話與電子郵件欄位使用正確的鍵盤。每筆工作顯示地址（點擊可在地圖中開啟）、客戶電話（點擊可直接撥打）、檢查清單，以及可以拍照的「標記完成」按鈕。管理者在筆電上登入以指派工作；在寬螢幕上，改用表格顯示而不是卡片。讓它成為可安裝的 PWA，包含清單檔、圖示與獨立顯示模式，並快取應用程式外殼，使其在沒有訊號時也能開啟。資料存在資料庫。

建置步驟

1. 先建置手機版面，使用範例資料，並在手機尺寸的預覽中檢查。
2. 在真實手機上測試，如果使用者同時有 iPhone 與 Android，至少各測一台。模擬器會漏掉像是螢幕鍵盤遮住輸入欄位這類問題。
3. 只用一隻拇指走完主要任務。如果有任何步驟需要雙手或縮放，就要修正。
4. 加入清單檔與圖示，然後在兩個平台上安裝，檢查圖示、名稱與啟動畫面。
5. 決定離線策略。先以「沒有訊號時也能開啟，並顯示清楚的訊息」為目標；只有在需要時才加入離線編輯。
6. 在慢速網路下檢查速度。瀏覽器的開發者工具可以模擬慢速網路。
7. 最後才加入通知，而且不一定要做。對於沒有安裝應用程式的使用者，請規劃電子郵件作為備援。

常見錯誤

• 只在大螢幕電腦上設計。 每做一步都要在手機寬度檢查每個畫面。
• 表格溢出畫面。 在小螢幕上，把列改為卡片。
• 點擊目標太小，連結彼此太靠近。
• 表單與鍵盤互相干擾：輸入類型錯誤、欄位被鍵盤遮住、沒有「下一步」的流程。
• 以為 iPhone 的推播可以在瀏覽器分頁中運作。 必須先把應用程式安裝到主畫面。
• 承諾了做不出來的 App Store 應用程式。 如果商店很重要，請另外規劃。
• 把網站包裝一下就當成應用程式。 Apple 的 App Review Guidelines 要求應用程式必須超越單純重新包裝的網站；單薄的包裝有被拒絕的風險。

何時需要原生應用程式

在以下情況，請考慮做原生應用程式（或在網頁應用程式之後規劃原生版本）：

• 商店上架是顧客找到你的主要管道。
• 你依賴背景定位、藍牙、健康資料、小工具，或其他瀏覽器無法穩定提供的裝置功能。
• 你的應用程式必須在很長一段時間內完全離線運作。
• 你的使用者期待如此。有些族群就是不會使用不在商店裡的東西。

上架商店本身有其成本與步驟。根據 Apple 與 Google Play 各自網站的說明，截至 2026 年 9 月，Apple 開發者計畫每年 99 美元，Google Play 開發者帳號則是一次性的 25 美元，而且每次發布都要經過審核。許多團隊會先用行動版網頁應用程式來驗證人們是否真的需要這項產品，待確定後才投入原生開發。如何用 AI 打造應用程式涵蓋了這個第一階段的完整流程。

用 Mythex 建置

Mythex 建置的是網頁應用程式：你在對話中描述應用程式，然後在桌機的即時預覽中檢查，也可以在可調整大小的手機尺寸框中查看。文件中有一份響應式行動版提示詞，可用來修正小螢幕的版面。你可以像請求其他功能一樣，請它加入 PWA 清單與圖示，然後發布成可在任何手機上開啟的公開連結。在 Pro 方案中，Mythex 還能把應用程式包裝成 Android 與 iPhone 應用程式，送到 Google Play 內部測試與 TestFlight。若要開始，可參考 AI 網頁應用程式建置工具，或瀏覽應用程式範本。如果想看實際案例，可以閱讀如何打造習慣追蹤應用程式。

常見問題