可以保存檔案的待辦事項離線應用程式：Todo List / Todo List: An Offline To-Do List Application That Allows for File Storage.

7月 08, 2023 JavaScript , PWA , Work 4 Comments Edit Copy Download

這篇要介紹我開發的PWA Todo List專案。此專案以開發一個完整的待辦事項工具為目標，不僅可以保存檔案，又不需要雲端帳號，因此容易整合到既有的系統架構上。

使用說明 / Usage

• 線上展示：https://pulipulichen.github.io/PWA-Todo-List/ 
• GitHub保存庫：https://github.com/pulipulichen/PWA-Todo-List 

PWA Todo List是一個網頁應用程式，採用了PWA的技術，您可以簡單地把它安裝到你的電腦上。除了作為基本的待辦事項之外，PWA Todo List另一個主要功能在於能夠嵌入到各種平台中，而且不需要額外的帳號或伺服器即可使用，因為所有資料都保存在使用者自己的瀏覽器裡。

然而需要注意的是，PWA Todo List並不具備連線同步的功能。在電腦開啟PWA Todo List，它會將資料保存在該電腦的瀏覽器裡；在手機開啟PWA Todo List，它會將資料保存在手機的瀏覽器裡。手機跟電腦兩者之間不會同步。

特色 / Features

完整的待辦事項功能 / Fully funtional todo list

您可以用PWA Todo List進行各種待辦事項的常見操作，包括建立待辦事項和勾選已完成的待辦事項。你也可以對單一待辦事項進行更細部的設定，例如在待辦事項設定是否重要的星號、撰寫多行的詳細內容、記錄地點、上傳圖片和檔案、設定優先順序和到期日。PWA Todo List也支援待辦事項的管理，包括匯出備份和匯入重建。

PWA Todo List也支援拖曳匯入與上傳，操作起來非常簡單且直覺。你可以使用拖曳方式將圖片和其他檔案放入待辦清單中，也可以輕易地移除檔案。而檔案實際上保存在使用者的瀏覽器中，以離線的方式儲存。

你也可以使用拖曳網址的方式新增待辦事項。

PWA Todo List還支援更換背景圖片的功能。選擇一個可以讓你專心的背景，好好開始規劃你的工作吧！

可離線運作的檔案保存功能 / Offline file storage

PWA Todo List除了網頁運作的基本元件之外，待辦事項以及附加在待辦事項上的檔案，全部都保存在使用者端的瀏覽器上。這背後所使用的技術，就是我之前講過的Filesystem API。雖然Filesystem API在部分瀏覽器的支援仍然有限，但如果你使用的是基於Webkit核心的瀏覽器，如Google Chrome，應該不會有太大問題。關於Filesystem API在各個瀏覽器的支援程度，詳細請參考MDN Web Docs。

值得注意的是，這裡的檔案指的不僅僅是純文字資料，還包括了圖片、文件檔等二進制的檔案。PWA Todo List會自動判斷檔案的類型，再決定要以圖片的縮圖或是各種檔案的圖示來顯示。PWA Todo List使用Filesystem API來保存資料，而這些資料只存在你的瀏覽器中。目前我雖然設定了5MB，但實際可以保存的資料量似乎是已經超過了。至於檔案保存的上限為何，等未來有機會再來研究吧。

可嵌入的應用程式 / Embeddable application

PWA Todo List的設計目的就是要讓開發者能夠輕易地遷入到不同的系統中，因此它不需要雲端伺服器、不需要帳號，只需要一個網址，就能用iframe嵌入你的系統。

https://pulipulichen.github.io/PWA-Todo-List/  

以下是用Iframe嵌入的語法：

<iframe src="https://pulipulichen.github.io/PWA-Todo-List/ " width="400" height="800"></iframe>

以下是使用iframe嵌入在BLOG的例子：

在同一個瀏覽器上，使用相同網址將會取得同樣的待辦事項資料。如果你想要使用不同的待辦事項資料的話，要怎麼做好呢？很簡單，只要在網址後面加上id參數「?id=xxx」即可。例如：

https://pulipulichen.github.io/PWA-Todo-List/?id=blog 

以下是加入了id參數後，用iframe嵌入在BLOG的例子：

你可以注意到這裡的資料跟上面的資料，再重新整理頁面後會是一致的，但兩者不會立即同步喔。

加入id參數後，PWA Todo List會以id的字串選擇一組主題顏色，方便區別不同id的待辦事項。

只要id不同，想要加幾個待辦事項都可以喔。

小結：檔案管理器的替代品 / In closing: Alternative to file manager?

其實一開始我不是要開發待辦事項，而是要開發檔案管理器。但單純的檔案管理其實也不太實用，於是就演變了待辦事項的功能。

PWA Todo List完成後，我在後續的專案裡都把它整合進去。但PWA Todo List並不能整合來自各處的待辦事項，所以使用的時候更像是臨時的便利貼，做完了就可以把它撕下來。

也許我也該為它做一個便利貼的介面才是？你覺得呢？

文章最後要來問大家的是：你都用什麼工具來管理自己的工作進度呢？

• 1. 用待辦工具，就很常見的Todo List。
• 2. 用看板工具，像是Trello。
• 3. 用試算表或文件管理。
• 4. 大腦很好用，我希望你也有一個。
• 5. 其他。

底下留言跟我們分享吧！