iT邦幫忙

pwa相關文章
共有 111 則文章
鐵人賽 自我挑戰組 DAY 22
程式小萌新的學習筆記 系列 第 22

技術 貳拾貳。PWA 是 web 和 app 的和解共生?

web or app? 不知道大家會不會懷念一個瀏覽器打天下的時代?只要有瀏覽器到得了的地方都是我的伸展台。但 APP 還是有很多瀏覽器沒有辦法提供的功能,所以...

鐵人賽 自我挑戰組 DAY 21
程式小萌新的學習筆記 系列 第 21

技術 貳壹。可離線操作的網頁應用

最近慢慢發現一些網路應用都開始有類似的功能,覺得蠻有意思的就花了一些時間研究一下 起源 最近在使用 logseq 的時候發現它有提供一個不需要註冊就可以直接使用...

鐵人賽 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

技術 Day19 X Application Shell Architecture

昨天介紹 Service Workers 後我們知道它是 PWA 的要素之一,且也是讓 Web App 實現離線瀏覽的關鍵技術。今天我們將延伸昨天的知識,介紹...

鐵人賽 Modern Web DAY 20

技術 Progressive Web App 閒置中: Idle Detection API 空閒檢測入門實做 (20)

什麼是 Idle Detection API Idle Detection API 的設計是當 App 被用戶閒置超過設定的時間時觸發,目前這個 API 還在提...

鐵人賽 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 與網路連接中間的一層 "代理網路連接"...