前端三分鐘

一起用三分鐘分享技術與知識

Progressive Web App 喚醒鎖

維持螢幕長亮的方法

什麼是喚醒鎖 (Screen Wake Lock API)?喚醒鎖 (Screen Wake Lock API) 讓 App 不會因為省電設定而關閉螢幕,透過這樣的設計 App 有了更多的彈性。舉例來說: 食譜的 App 就會需要在烹煮的過程中持續顯示 QR code 票證應該要在被掃描後螢幕才能被關閉 投影片展示過程中螢幕應該維持開啟 怎麼使用喚醒鎖 (Screen Wake Loc......
me
林彥成
2021-09-20 | 1 min.

Progressive Web App Audits

PWA 效能、可靠性、可安裝審查工具

什麼是 Lighthouse Audits?Lighthouse 是一套整合在 DevTools 中的開放原始碼檢測工具,用來檢測效能、可靠性、SEO、PWA 等指標是否符合。 以 PWA 來說主要會分成三大部份去審核 網站效能與可靠性 透過手機瀏覽效能 頁面無法離線使用且沒有離線後備頁面 Installable 是否採用 HTTPS 是否在 start_url 頁面有引入 ......
me
林彥成
2021-09-19 | 1 min.

Progressive Web App 存取本機檔案

File System Access API 簡介

什麼是 File System Access API?透過這個 File System Access API 就能透過程式操作本機上的檔案,舉例來說像是開啟或儲存檔案等,部分瀏覽器會需要給予相關的權限才能進行操作,除了開啟檔案 API 本身也提供了開啟目錄並列舉檔案列表的功能。 對 Progressive Web App 也會在某些情境需要可以存取和操作本機端的檔案,Google 的 Lab......
me
林彥成
2021-09-18 | 2 min.

Progressive Web App 用戶端儲存

讓網站能夠在離線狀態使用快取資源

什麼是用戶端儲存 (Client-side storage)對一個 App 來說,為了達到某些目的,將相關資料存在用戶端是相對方便的,舉例來說 個人偏好設定,像是常用功能、顏色主題、字體大小 將前一次操作快取,像是紀錄購物車資料或是線上編輯器在斷線時先暫時將資料保存 不常改變的資料或靜態資源快取 離線操作所需要的檔案 通常用戶端的儲存和伺服器端的儲存會是一起搭配使用的,舉例來說當我們使用......
me
林彥成
2021-09-16 | 2 min.

Progressive Web App 架構模式

App Shell Model 概念說明

什麼是 App Shell?App Shell 乍聽之下是一種技術,實際上是 Web App 架構模式 (Architectural Patterns)。 App Shell Model 這個架構模式目的是讓 Web App 可靠性以及在用戶開啟 App 後能像原生 App 一樣提供立即載入的效果。 對 Progressive Web App 來說,”shell” 可能包含形成基礎操作介面的......
me
林彥成
2021-09-14 | 2 min.

Progressive Web App 離線後備頁面

玩過 Chrome 小恐龍遊戲了嗎

離線後備頁面介紹 (offline fallback page)離線後備頁面提供用戶在網路不穩定的情況下,一個備援的顯示頁面。 在過去的網站大多由伺服器提供,所以斷線的情況下原則上就是什麼都沒有,近幾年 JavaScript 相關的進步以及 SPA 觀念開始盛行後,前端能夠掌握的事情也越來越多,離線後備頁面 (offline fallback page) 一個有名的例子就是 Chrome 在......
me
林彥成
2021-09-13 | 2 min.

Progressive Web App 個案分析

樂天 24 導入 PWA 後帶來的好處

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

Progressive Web App Shortcuts

程式快速啟動選單

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

share