前端三分鐘

Web App 的效能會直接影響使用者體驗，也會影響到用戶會不會持續使用這個站台，當優化站台時可以多著重在使用者的效能體驗上，透過檢核項目與 Lighthouse Audits 可以更快速的優化站台。 載入時間越長，跳出率越高 可以參考 RAIL user-centric performance model PageSpeed Insights Chrome User Experience......

什麼是 App ShortcutsApp Shortcuts 提供程式快速啟動選單，透過這個捷徑用戶能夠更快速的使用各式功能，讓常用且關鍵的功能更容易被快速重複使用。 目前 PWA 快速啟動選單僅限於安裝完成的 Progressive Web App 相關的支援度如下 Android (Chrome 84): 透過長按桌面上的 Icon Windows、macOS (Chrome 85 a......

網頁的外觀和操作本質上還是和原生的有差異但可以透過配置來讓體驗更接近。 全螢幕模式 視覺設計 事件操作 全螢幕模式全螢幕模式有兩種方式，Progressive Web App 尚未安裝前可以透過程式觸發，安裝後可以透過 display 配置安裝後的執行顯示模式。 程式觸發全螢幕 document.body.requestFullscreen(); Progressive Web A......

小編在讀 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 若無人使用可以自動......