iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 1731 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 27 篇

技術 [Day27] 了解Media API和Geolocation API(Part3)

終於要開始實作「獲取用戶地理位置」的功能了要獲取地理位置必須使用「Geolocation API」這個Web API。先來看一下這個API的瀏覽器支援程度：整...

rehome ‧ 2019-10-12

0 Like 0 留言 1716 瀏覽

鐵人賽 Modern Web DAY 27

前端三分鐘 X Progressive Web App 30 天製造解密系列第 27 篇

技術 Progressive Web App 針對應用操作介面優化操作體驗 (27)

網頁的外觀和操作本質上還是和原生的有差異但可以透過配置來讓體驗更接近。全螢幕模式視覺設計事件操作全螢幕模式全螢幕模式有兩種方式，Progressi...

linyencheng ‧ 2021-10-10

1 Like 0 留言 1649 瀏覽

鐵人賽 Modern Web DAY 20

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 20 篇

技術 [Day20] 了解PWA中的背景同步(Part2)

從昨天的流程圖可以發現，我們還必須將用戶要發佈的貼文資訊儲存到indexedDB中才行R。那我就接續昨天在feed.js中增加的code： if('servic...

rehome ‧ 2019-10-04

0 Like 0 留言 1640 瀏覽

鐵人賽 Modern Web DAY 9

前端三分鐘 X Progressive Web App 30 天製造解密系列第 9 篇

技術 Progressive Web App Shortcuts: 程式快速啟動選單 (9)

什麼是 App Shortcuts App Shortcuts 提供程式快速啟動選單，透過這個捷徑用戶能夠更快速的使用各式功能，讓常用且關鍵的功能更容易被快速重...

linyencheng ‧ 2021-09-22

1 Like 0 留言 1624 瀏覽

鐵人賽 Modern Web DAY 16

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 16 篇

技術 [Day16] 使用IndexedDB暫存Dynamic Data(Part3)

昨天已經成功地將firebase裡的dynamic data儲存至indexedDB了，接下來因為我目前使用的cache strategies是「cache t...

rehome ‧ 2019-09-30

0 Like 0 留言 1601 瀏覽

鐵人賽 Modern Web DAY 10

前端三分鐘 X Progressive Web App 30 天製造解密系列第 10 篇

技術 Progressive Web App 個案分析: 樂天 24 導入 PWA 後帶來的好處 (10)

小編在讀 PWA 相關技術文章的時候，剛好讀到了樂天 24 這篇導入 PWA 的個案分析，樂天 24 是樂天集團底下的一個電商平台，主要銷售日常快速消費品，也就...

linyencheng ‧ 2021-09-23

1 Like 0 留言 1594 瀏覽

鐵人賽 Modern Web DAY 18

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 18 篇

技術 [Day18] PWA中不可或缺的響應式網頁設計(Part2)

繼續昨天的響應式網頁設計(RWD)，今天我要來將首頁中最大的那張圖片改成responsive。當我用電腦瀏覽頁面時，圖片旁邊會有空白的地方，但是我希望圖片的大...

rehome ‧ 2019-10-02

0 Like 0 留言 1584 瀏覽

鐵人賽 Modern Web DAY 12

前端三分鐘 X Progressive Web App 30 天製造解密系列第 12 篇

技術 Progressive Web App 架構模式: App Shell Model 概念說明 (12)

什麼是 App Shell? App Shell 乍聽之下是一種技術，實際上是 Web App 架構模式 (Architectural Patterns)。 A...

linyencheng ‧ 2021-09-25

0 Like 0 留言 1574 瀏覽

鐵人賽 Modern Web DAY 4

前端三分鐘 X Progressive Web App 30 天製造解密系列第 4 篇

技術 Progressive Web App Service Worker (4)

什麼是 Service Workers Service Workers 的角色是位於 Web App 與網路連接中間的一層 "代理網路連接"...

linyencheng ‧ 2021-09-17

0 Like 0 留言 1505 瀏覽

鐵人賽 Modern Web DAY 28

前端三分鐘 X Progressive Web App 30 天製造解密系列第 28 篇

技術 Progressive Web App 取得 Geolocation API 地理資訊 (28)

什麼是 Geolocation API? 透過 Geolocation API 可以讓 Progressive Web App 存取用戶的位置，方便實作地理資訊...

linyencheng ‧ 2021-10-11

0 Like 0 留言 1440 瀏覽

鐵人賽 Modern Web DAY 13

前端三分鐘 X Progressive Web App 30 天製造解密系列第 13 篇

技術 Progressive Web App 用戶端儲存簡介 (13)

什麼是用戶端儲存 (Client-side storage) 對一個 App 來說，為了達到某些目的，將相關資料存在用戶端是相對方便的，舉例來說個人偏好設定...

linyencheng ‧ 2021-09-26

0 Like 0 留言 1430 瀏覽

鐵人賽 Modern Web DAY 19

前端三分鐘 X Progressive Web App 30 天製造解密系列第 19 篇

技術 Progressive Web App 定期背景同步 (19)

什麼是 Periodic Background Sync API 透過在 service worker 搭配 Periodic Background Sync...

linyencheng ‧ 2021-10-02

0 Like 0 留言 1424 瀏覽

鐵人賽 Modern Web DAY 21

前端三分鐘 X Progressive Web App 30 天製造解密系列第 21 篇

技術 Progressive Web App Notifications API (21)

什麼是 Web Notifications API? 透過 Web Notifications API 可以讓 Progressive Web App 發出系統...

linyencheng ‧ 2021-10-04

0 Like 0 留言 1363 瀏覽

鐵人賽 Modern Web DAY 26

前端三分鐘 X Progressive Web App 30 天製造解密系列第 26 篇

技術 Progressive Web App 推播協定 (26)

之前已經可以用後端的套件去實作推播的伺服器，但那個套件實際上做了哪些事情? 金鑰對 Application server keys 傳輸內容加密 Payloa...

linyencheng ‧ 2021-10-09

0 Like 0 留言 1353 瀏覽

鐵人賽自我挑戰組 DAY 22

程式小萌新的學習筆記系列第 22 篇

技術貳拾貳。PWA 是 web 和 app 的和解共生？

web or app? 不知道大家會不會懷念一個瀏覽器打天下的時代？只要有瀏覽器到得了的地方都是我的伸展台。但 APP 還是有很多瀏覽器沒有辦法提供的功能，所以...

sixwings ‧ 2022-09-26 ‧團隊團長找我來柬埔寨參加鐵人賽

0 Like 0 留言 1351 瀏覽

鐵人賽自我挑戰組 DAY 21

程式小萌新的學習筆記系列第 21 篇

技術貳壹。可離線操作的網頁應用

最近慢慢發現一些網路應用都開始有類似的功能，覺得蠻有意思的就花了一些時間研究一下起源最近在使用 logseq 的時候發現它有提供一個不需要註冊就可以直接使用...

sixwings ‧ 2022-09-25 ‧團隊團長找我來柬埔寨參加鐵人賽

0 Like 0 留言 1328 瀏覽

鐵人賽 Modern Web DAY 18

前端三分鐘 X Progressive Web App 30 天製造解密系列第 18 篇

技術 Progressive Web App 存取通訊錄聯絡人 (18)

什麼是 Contact Picker API 透過 Contact Picker API 網頁也可以像 Native App 一樣去選取用戶的聯絡人資訊，API...

linyencheng ‧ 2021-10-01

0 Like 0 留言 1252 瀏覽

鐵人賽 Modern Web DAY 8

前端三分鐘 X Progressive Web App 30 天製造解密系列第 8 篇

技術 Progressive Web App Badging API 入門實做 (8)

什麼是 Badging API Badging API 讓 App 能夠顯示通知數字，不過通知數字的位置會依照平台的不同而有所差異。常見是用來通知用戶，像是...

linyencheng ‧ 2021-09-21

0 Like 0 留言 1212 瀏覽

鐵人賽 Modern Web DAY 15

前端三分鐘 X Progressive Web App 30 天製造解密系列第 15 篇

技術 Progressive Web App Audits (15)

什麼是 Lighthouse Audits? Lighthouse 是一套整合在 DevTools 中的開放原始碼檢測工具，用來檢測效能、可靠性、SEO、PWA...

linyencheng ‧ 2021-09-28

0 Like 0 留言 1018 瀏覽

鐵人賽 Modern Web DAY 7

前端三分鐘 X Progressive Web App 30 天製造解密系列第 7 篇

技術 Progressive Web App Checklist: 優化檢核清單項目說明 (7)

Starts fast, stays fast Web App 的效能會直接影響使用者體驗，也會影響到用戶會不會持續使用這個站台，當優化站台時可以多著重在使用者...

linyencheng ‧ 2021-09-20

0 Like 0 留言 971 瀏覽

鐵人賽 Modern Web DAY 17

前端三分鐘 X Progressive Web App 30 天製造解密系列第 17 篇

技術 Progressive Web App 透過系統分享內容: Web Share API & Web Share Target (17)

什麼是 Web Share API Web App 透過 Web Share API 就能夠使用系統提供的分享功能，將連結、內容和文件分享給安裝在裝置上的其他應...

linyencheng ‧ 2021-09-30

0 Like 0 留言 729 瀏覽

鐵人賽生成式 AI DAY 27

VIBE CODING 全紀錄：0 經驗用 AI 打造 PWA 兒童任務管理平台》系列第 27 篇

技術（Day 27） Kiro 初體驗：Spec 與 Vibe 模式的開發日誌實測

這段時間因為投入 iThome 鐵人賽文章的撰寫，平台的更新暫時停了下來。為了避免思路斷掉，我決定在網站上增加一個「開發日誌」頁面，專門記錄平台的開發過程與背...

平凡工程師 ‧ 2025-08-28

0 Like 0 留言 394 瀏覽

鐵人賽生成式 AI DAY 26

VIBE CODING 全紀錄：0 經驗用 AI 打造 PWA 兒童任務管理平台》系列第 26 篇

技術（Day 26）快速上手任務管理，AI 幫忙設計的任務模板

雖然平台中的任務管理功能已經算是完整，也經過多次調整，但仍有用戶回饋：「能不能提供一些任務建議？因為不知道要新增什麼。」任務管理是整個平台最核心的功能，如果新手...

平凡工程師 ‧ 2025-08-27