優質應用程式的全新模式

深入探索精彩應用程式的全新模式,包括剪貼簿模式、檔案模式和應用程式模式。

無論您建構的是下一代影片編輯應用程式、令人上癮的單字遊戲,還是未來的線上社群網路應用程式,都需要一些基本構件:

  • 影片編輯應用程式可能會允許使用者儲存編輯過的影片。
  • 您的遊戲可能會允許使用者與好友分享遊戲進度。
  • 線上社群媒體應用程式很可能會允許使用者圖片到貼文中。

以上只是這類模式的幾個例子,還有許多其他例子。但所有這些都有一些共同點:沒有任何通用的方式可以實現這些功能。

分享進度

舉例來說,並非所有瀏覽器都會導入 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.mp4my-video (1).mp4my-video (2).mp4 等。

貼上圖片

結束本教學課程的示例,並非所有瀏覽器都支援將圖片貼到網頁應用程式,因此您可以改用拖曳和放置 API,或顯示檔案挑選器,雖然不如 Async 剪貼簿 API 那麼優雅,但至少可以運作。

新模式

完成這項操作後,新的模式部分如下:

剪貼簿模式

剪貼簿模式:與系統剪貼簿相關的所有內容,例如複製和貼上各種內容。

檔案模式

檔案模式:與檔案和目錄相關的所有操作,包括儲存、開啟、拖曳及放置、接收或分享。

網頁應用程式模式

網頁應用程式模式:涵蓋所有與進階應用程式功能相關的內容,例如提供應用程式捷徑、定期在背景同步處理資料、顯示應用程式徽章等等。

意見回饋

希望這些模式能協助您打造出色的應用程式,也期待收到您的意見回饋! 您可以透過推文向 @ChromiumDev 提供意見,也可以回報問題。無論是哪一種情況,請標記 @tomayac,確保我能看到。

特別銘謝

我要感謝Joe Medley,他協助我審查及編輯這些模式。感謝 Pete LePageEwa GasperowiczRachel AndrewKen PascalMatthias Rohmer 提供技術和組織方面的支援,並鼓勵我們完成這項工作。我們要感謝各個模式的作者,包括 Harry TheodoulouTony ConwayPalances LiaoCecilia CongFrançois BeaufortJoe Medley,才能完成整個模式專案。