前端三分鐘

小編在讀 PWA 相關技術文章的時候，剛好讀到了樂天 24 這篇導入 PWA 的個案分析。 樂天 24 是樂天集團底下的一個電商平台，主要銷售日常快速消費品，也就是常見的 FMCG 產業，這類型的產品不外乎變化步調快速、品牌競爭挑戰性高。 沒想到導入之後樂天增加 450% 的用戶留存，效果竟然如此之好 Orz 所以就決定來翻譯一波，大家一起來看看樂天 24 是怎麼導入 PWA 的吧! 這篇文......

推播通知行為推播通知行為主要分成視覺、後續事件兩大部分，前幾天的文章開箱了: 通知選項視覺 後端推播伺服器實作 處理推播事件 這篇文章主要會更進一步解說視覺上可以進行設定的參數，以及收到通知後的行為，關於行為相關的參數如下。 1234567891011{ "//": "行為相關參數", "tag": "&......

什麼是網站推播通知推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法，所以目標是即使網站、App 關閉時也要能在背景接收推播。推播的目的是為了增加 engagement，在行銷領域中 engagement 這個常見的指標就是指用戶在網站或 APP 上的互動程度或者參與度。 怎麼使用網站推播通知因為主要是想在背景接受推播，所以實作上是基於可以背景執行的 Servic......

什麼是 Web Notifications API?透過 Web Notifications API 可以讓 Progressive Web App 發出系統層級的通知，搭配 service worker 背景執行的特性，就可以做到 App 的背景推播通知。 下一篇文章小編會完整開箱怎麼實作前後端的網站推播通知。 底下連結提供基本的推播示範:https://linyencheng-push-......

什麼是 Idle Detection APIIdle Detection API 的設計是當 App 被用戶閒置超過設定的時間時觸發，目前這個 API 還在提議的階段。 API 的相關文件: https://wicg.github.io/idle-detection/ 空閒檢測可以解決什麼問題? 聊天的應用可以透過這個來顯示聯絡人狀態 博物館中公開互動的 Web App 若無人使用可以自動......

什麼是 Periodic Background Sync API透過在 service worker 搭配 Periodic Background Sync API 就可以做到定期背景同步資料的效果。 背景同步資料可以解決什麼問題，Progressive Web App 說穿了也只是網站，所以當遇到連線不良的時候總是會影響操作體驗。 一個正常的使用者歷程： 從口袋裡拿出手機 使用一下 Ap......

什麼是 Contact Picker API透過 Contact Picker API 網頁也可以像 Native App 一樣去選取用戶的聯絡人資訊，API 提供開發者去選擇一個或多個欄位資訊，反過來說 App 可以設計讓用戶只分享他們想分享的內容，更方便用戶去和家人、朋友做互動。舉例來說 Email 的 Progressive Web App 就可以整合 Contact Picker A......

什麼是 Web Share APIWeb App 透過 Web Share API 就能夠使用系統提供的分享功能，將連結、內容和文件分享給安裝在裝置上的其他應用 App。另外一方面只要透過將 App 配置 Web Share Target 相關設定也能夠接收其他 App 分享的內容。 怎麼使用 Web Share API用法上也是很簡單，也是只要瀏覽器有支援 navigator.share ......