前端三分鐘

什麼是網站爬蟲網站爬蟲可以將爬取的頁面儲存，透過網站爬蟲，開發者可以蒐集網路更多的資源供後續使用。 舉一個大家都聽過的應用，Google 搜尋引擎背後其實也是透過爬蟲的技術來將網站資料存下來進行索引來提供用戶搜尋。 由於爬蟲存取網站的過程還是會消耗站台系統資源，所以身為爬蟲開發者要遵守的價值觀有兩點如下: 不要打爆對方 遵守 robots.txt 中定義規則，這些規則會標註禁止或開放存取哪......

Progressive Web App 跨平台安裝Progressive Web App 本身就具有能被安裝的特性，此外也能夠透過 Bubblewrap 或是 PWABuilder 封裝上架到各平台的市集。 透過能安裝 Chrome 的平台，只要符合安裝條件就能夠被安裝 透過 Google 開發的 Bubblewrap 將 PWA 打包成 .aab 或是 .apk 透過 Microsoft......

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......