深入探索精彩應用程式的全新模式,包括剪貼簿模式、檔案模式和應用程式模式。
無論您建構的是下一代影片編輯應用程式、令人上癮的單字遊戲,還是未來的線上社群網路應用程式,都需要一些基本構件:
- 影片編輯應用程式可能會允許使用者儲存編輯過的影片。
- 您的遊戲可能會允許使用者與好友分享遊戲進度。
- 線上社群媒體應用程式很可能會允許使用者貼圖片到貼文中。
沒有通用的方式實現這些模式
以上只是這類模式的幾個例子,還有許多其他例子。但所有這些都有一些共同點:沒有任何通用的方式可以實現這些功能。
分享進度
舉例來說,並非所有瀏覽器都會導入 Web Share API,因此在某些情況下,您必須改用其他方法,例如 Twitter 的 Web Intents,或是將內容複製到剪貼簿,這是在未導入 Web Share API 時,Wordle 所選擇的方法。呼,我好不容易才收到這封信:
Wordle 471 6/6
⬛⬛⬛⬛🟨
🟩⬛⬛⬛🟨
🟩🟩🟩⬛⬛
🟩🟩🟩⬛⬛
🟩🟩🟩🟩⬛
🟩🟩🟩🟩🟩
儲存檔案
在儲存方面,首選做法是使用 File System Access API,這樣您就能取得 FileSystemFileHandle
,讓您實作真正的 save, edit, save flow。其次最佳的做法是改用傳統的 <a download>
,這同樣可讓使用者儲存資料,但缺點是每次下載都會建立新檔案,因此會產生 my-video.mp4
、my-video (1).mp4
、my-video (2).mp4
等。
貼上圖片
結束本教學課程的示例,並非所有瀏覽器都支援將圖片貼到網頁應用程式,因此您可以改用拖曳和放置 API,或顯示檔案挑選器,雖然不如 Async 剪貼簿 API 那麼優雅,但至少可以運作。
新模式
完成這項操作後,新的模式部分如下:
剪貼簿模式
剪貼簿模式:與系統剪貼簿相關的所有內容,例如複製和貼上各種內容。
檔案模式
檔案模式:與檔案和目錄相關的所有操作,包括儲存、開啟、拖曳及放置、接收或分享。
網頁應用程式模式
網頁應用程式模式:涵蓋所有與進階應用程式功能相關的內容,例如提供應用程式捷徑、定期在背景同步處理資料、顯示應用程式徽章等等。
意見回饋
希望這些模式能協助您打造出色的應用程式,也期待收到您的意見回饋!
您可以透過推文向 @ChromiumDev 提供意見,也可以回報問題。無論是哪一種情況,請標記 @tomayac
,確保我能看到。
特別銘謝
我要感謝Joe Medley,他協助我審查及編輯這些模式。感謝 Pete LePage、Ewa Gasperowicz、Rachel Andrew、Ken Pascal 和 Matthias Rohmer 提供技術和組織方面的支援,並鼓勵我們完成這項工作。我們要感謝各個模式的作者,包括 Harry Theodoulou、Tony Conway、Palances Liao、Cecilia Cong、François Beaufort 和 Joe Medley,才能完成整個模式專案。