iT邦幫忙

progressive web app相關文章
共有 61 則文章
鐵人賽 Modern Web DAY 30

技術 Progressive Web App 跨平台安裝上架 (30)

Progressive Web App 跨平台安裝 Progressive Web App 本身就具有能被安裝的特性,此外也能夠透過 Bubblewrap 或是...

鐵人賽 Modern Web DAY 29

技術 Progressive Web App NFC 入門實作 (29)

什麼是 Web NFC? NFC (Near Field Communication) 近場通訊是高頻 (13.56 MHz) 短距離無線通訊技術,只要距離 5...

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

技術 Progressive Web App 推播通知行為 (25)

推播通知行為 推播通知行為主要分成視覺、後續事件兩大部分,前幾天的文章開箱了: 通知選項視覺 後端推播伺服器實作 處理推播事件 這篇文章主要會更...

鐵人賽 Modern Web DAY 24

技術 Progressive Web App 推播通知: 網站推播通知用戶端實作入門 (24)

什麼是網站推播通知 推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法,所以目標是即使網站、App 關閉時也要能在背景接收推播。推播...

鐵人賽 Modern Web DAY 23

技術 Progressive Web App Web Push: 網站推播通知伺服器實作入門 (23)

什麼是網站推播通知 推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法,所以目標是即使網站、App 關閉時也要能在背景接收推播。推播...

鐵人賽 Modern Web DAY 22

技術 Progressive Web App 推播通知: 網站推播通知原理開箱解密 (22)

什麼是網站推播通知 推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法,所以目標是即使網站、App 關閉時也要能在背景接收推播。推播...

鐵人賽 Modern Web DAY 21

技術 Progressive Web App Notifications API (21)

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

技術 Progressive Web App 喚醒鎖: 維持螢幕長亮的方法 (16)

什麼是喚醒鎖 (Screen Wake Lock API)? 喚醒鎖 (Screen Wake Lock API) 讓 App 不會因為省電設定而關閉螢幕,透過...

鐵人賽 Modern Web DAY 15

技術 Progressive Web App Audits (15)

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

鐵人賽 Modern Web DAY 14

技術 Progressive Web App 存取本機檔案: File System Access API (14)

什麼是 File System Access API? 透過這個 File System Access API 就能透過程式操作本機上的檔案,舉例來說像是開啟或...

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

技術 Progressive Web App 離線後備頁面: 玩過 Chrome 小恐龍遊戲了嗎 (11)

離線後備頁面介紹 (offline fallback page) 離線後備頁面提供用戶在網路不穩定的情況下,一個備援的顯示頁面。 在過去的網站大多由伺服器提供,...

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

技術 Progressive Web App 啟動和更新機制 (6)

PWA 啟動 要怎麼知道 Web App 是在 PWA 已經被安裝情況下被開啟的,靠 CSS 中有個 display-mode,不管透過 tab 或是安裝的情況...

鐵人賽 Modern Web DAY 5

技術 Progressive Web App Manifest: 配置檔屬性深入介紹 (5)

Web App 的 manifest 是一個 JSON 形式的配置檔,瀏覽器透過配置檔就會知道 Progressive Web App 該怎麼去安裝在用戶的電腦...

鐵人賽 Modern Web DAY 4

技術 Progressive Web App Service Worker (4)

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

鐵人賽 Modern Web DAY 3

技術 Progressive Web App 自主管理推薦安裝提示 (3)

Promoting installation 推薦安裝提示 當我們的 Progressive Web App 滿足了安裝前的審核標準,瀏覽器就會觸發 befor...

鐵人賽 Modern Web DAY 2

技術 Progressive Web App 加入主畫面 : PWA 究竟加入和安裝了什麼 (2)

加入主畫面 (Add to Home screen) 加入主畫面 (Add to Home screen) 常見的縮寫為 A2HS,可以看成是讓使用者將 Web...

鐵人賽 Modern Web DAY 1

技術 Progressive Web App 開箱看看漸進式增強到底有多強 (1)

Progressive Web App (PWA) 使用當下最新潮的 Web API,Progressive 是用漸進增強的概念來建立跨平台 Web 應用程式。...

鐵人賽 影片教學 DAY 16

技術 APP開發 – PWA (2/2)

[Day 16] APP開發 – PWA (2/2)4.2:Progress Web APPs (PWA) 開發 (40min)-- 背景 : SPA, Of...