# 🏅 Day 13 - 用三行語法做個網頁快捷 App 吧！ 還記得前面我們把妙麗的生日記錄在 localStorage 裡嗎？ 今天要來做一件 超有成就感的事： 讓你的作品，出現在手機主畫面上， 像一個真的 App 一樣可以被點開！📱✨ 也就是說，之後你可以跟朋友說： 「這是我做的『妙麗歲數計算機網頁 App』，來，我手機上有～」😆 ⸻ 今天的任務概念：什麼是「網頁快捷 App」？ 嚴格來說它不是真正的原生 App， 但可以做到這幾件事： • 在手機主畫面有一顆 獨立的圖示 icon • 點下去會直接開啟你的網頁（GitHub Pages） • 使用體驗非常接近「自己寫了一個 App」 而我們今天要做的，就是用 三行 <link> 加上一張 icon.png，就完成一個「可以釘在桌面的作品」。 ⸻ ## 第一步：準備一個 icon.png 1. 請在你的專案資料夾中，準備一張圖檔：icon.png 2. 建議是 正方形（例如 512×512 或 1024×1024） 若沒時間作圖，也可以下載[我的版本](https://drive.google.com/file/d/185sTcrp0A7NF8tt18HOMN13H6oYXO2TO/view?usp=sharing)，或右鍵另存 ![icon](https://hackmd.io/_uploads/r10xgVflZe.png) ## 第二步：在 <head> 放上三行關鍵語法 打開你的 index.html，找到 <head>...</head>， 在裡面加入這三行： ``` <head> <!-- 放入這三行開始 --> <link rel="icon" type="image/png" href="./icon.png"> <link rel="apple-touch-icon" href="./icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="./icon.png"> <!-- 放入這三行結束 --> </head> ``` 效果說明： • rel="icon"：一般瀏覽器的頁籤小 icon（favicon）、Android Chrome 也會用 • apple-touch-icon：讓 iOS / iPadOS 在「加入主畫面」時，知道要用哪張圖 • sizes="180x180"：告訴裝置這張圖的尺寸（給某些裝置參考用） 儲存後，把程式碼 push 到 GitHub，確認 GitHub Pages 網址可以正常開啟。 ⸻ ## 第三步：在 iOS Safari 上加到主畫面（iPhone / iPad） 拿出你的手機或平板，打開手機原生瀏覽器 (Safari)，依序操作： 1. 在 Safari 開啟你的 GitHub Pages 網址 2. 確認網頁載入完成後，點擊下方的 「分享」按鈕（一個方框＋上箭頭） 3. 在選單中往下滑，找到 「加入主畫面」（Add to Home Screen） 4. 可以修改名稱（例如改成「妙麗計算機」） 5. 按右上角的 「加入」 回到主畫面，你應該會看到一顆新的 icon 點一下，就會直接開啟你的網頁。 ![IMG_7578](https://hackmd.io/_uploads/rkI7W4fe-g.jpg) PS：android chrome 瀏覽器流程，請觀看此 [Google 文件](https://support.google.com/chrome/answer/15085120?hl=zh-au&co=GENIE.Platform%3DAndroid) ## 題目：讓你的妙麗計算機變成「快捷網頁 App」 請你完成以下目標： 1. 在你的妙麗歲數計算機專案中： 2. 準備一張 icon.png，放在 index.html 同一層 3. 在 <head> 中加入今天教的三行 <link> 語法 4. 部署到 GitHub Pages（延續前幾天的成果） 5. 在你的 手機主畫面 上建立這個網頁的快捷 App： • iOS：用 Safari「加入主畫面」 • Android：用 Chrome「加入主畫面」或「安裝應用程式」 6. 點擊主畫面上的 icon，確認： 7. 可以打開你的網頁 8. 妙麗計算機可以正常運作，也會直接顯示妙麗的歲數 ## 附上校長拍攝的情境影片 😆 {%youtube AWakB2sK0LU %} ## 回報格式： 1. 你的 GitHub Pages 網址 2. 你手機上有 icon 的截圖 3. 分享過程中有沒有遇到一些困難，並嘗試 Vibe 獲研究解決？ PS：會這一招後，你就不只是「做了一個網頁」， 而是「手機桌面上有自己作品的開發者」了 ✨