A travel packing checklist PWA with reusable templates, offline support after first load, and local browser storage. No account or backend required.
為家人設計的旅行打包清單：建立不同旅程的模板、勾選已打包物品，並在手機主畫面開啟使用。資料保存在目前瀏覽器。
立即使用 / Live demo · 功能 · 快速開始 · 已知限制
每次出門旅遊，東西總是少帶、忘帶。這個小工具原本只是給自己家人用的，後來覺得也許對其他人有用，就整理成這個樣子放上來。
-
勾選清單：點一下物品即可標記「已放入行李」，勾選後自動沉到底部，讓沒打包的東西一直保持在視線最上方
-
分類群組：物品以分類區塊呈現，整組全部打包完後，整個群組會自動淡出，視覺上更清爽
-
多模板管理：可以建立多份清單（例如短途旅行、長途旅行），切換模板時清單狀態互不干擾
-
複製模板：不用每次從頭建，直接複製現有模板來改，複製時所有勾選狀態會自動重置
-
編輯模式：點「編輯清單」可新增、刪除、修改項目名稱，完成後再點一次關閉
-
離線可用（PWA）：第一次載入後即使沒網路也能正常使用，可安裝到手機主畫面
-
本地儲存：所有資料存在瀏覽器的 localStorage，清空快取才會消失，不會上傳到任何伺服器
| 項目 | 說明 |
|---|---|
| 架構 | 純 HTML + Vanilla JS（無框架） |
| 樣式 | Tailwind CSS（CDN） |
| 動畫 | FLIP 技術，勾選時滑動位移自然流暢 |
| 離線 | Service Worker，Network First 策略 |
| 儲存 | localStorage |
| 安裝 | Web App Manifest，支援 Android / iOS 加入主畫面 |
不需要建置步驟。為了讓 Service Worker 與離線功能正常運作，請透過本機 HTTP server 開啟，而不是直接使用 file://。
git clone https://github.com/Yili-code/PackMom.git
cd PackMom
# 選擇一種本機靜態伺服器
npx serve .
# 或：python -m http.server 8000npx serve . 會在終端顯示實際網址；使用 Python 時開啟 http://localhost:8000。
PackMom/
├── index.html # 主程式，所有邏輯都在這裡
├── manifest.json # PWA 設定
├── sw.js # Service Worker
├── icon-192.png # App 圖示（小）
└── icon-512.png # App 圖示（大）
初次使用會載入一份基礎模板，分三個分類：
- 醫療與身體防護：脖圍、電解質粉、暈車藥、過敏咳藥、氧木斯、蘆薈
- 個人護理：乳液、修護霜／精華液、卸妝面紙
- 生活雜項：洗衣袋、拖鞋、行李確認、VPN 帳號截圖
這份清單可以自由修改，改動會自動存到瀏覽器，重新整理也不會消失。
- 資料存在 localStorage，換瀏覽器或清除快取後需重新設定
- 目前沒有匯出/匯入功能，多裝置之間的同步要手動複製
- 手機版 Safari 加入主畫面後，Service Worker 的快取行為與 Android 略有不同
MIT