iT邦幫忙

pwa相關文章
共有 113 則文章
0 Like 0 留言 3778 瀏覽
鐵人賽 Modern Web DAY 23
前端三分鐘 X Progressive Web App 30 天製造解密 系列 第 23 篇

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

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

linyencheng ‧ 2021-10-06
1 Like 0 留言 3716 瀏覽
鐵人賽 Software Development DAY 20
用 Chromebook 能寫什麼樣的東西 系列 第 20 篇

技術 為什麼你會需要 PWA 應用程式，原生不好嗎？

原生（Native）應用程式和 Web 應用程式已經要怎麼選，這個議題已經好幾年了。或許 Hybrid App（用 Web 打包的應用程式）是個好選擇，但怎麼都...

NoobTW ‧ 2020-09-26 ‧團隊{iT12.group[i].name}
2 Like 2 留言 3588 瀏覽
鐵人賽 Modern Web DAY 6
Go！從無到打造最佳行動網站 系列 第 6 篇

技術 Day6 全員耍廢中(中) Mobile設計

延續昨天行動版要素，其實不僅僅適用於行動版網頁的設計，比方說測試這件事情對在開發來說是非常重要的，如果你的網站中沒有那麼多的臭蟲，相對於臭蟲多的地方，你的網站更...

掰掰工程師 ‧ 2017-12-16 ‧團隊露天廢物
1 Like 0 留言 3450 瀏覽
鐵人賽 Modern Web DAY 29
Angular 8 從推坑到放棄 系列 第 29 篇

技術 [Day28 ]建立 PWA 應用

PWA 就是一個很像 Native App 的 Web App，而其中瀏覽器的支援也佔了很大的一部分。 目前最新的瀏覽器開始支援 Service Worker...

TimTim ‧ 2019-10-15
0 Like 0 留言 3360 瀏覽
鐵人賽 Modern Web DAY 3
PWA, Severless, GraphQL實作 系列 第 3 篇

技術 [影片]Gatsby.js 未來的網頁03：File Structure

我們已經用Gatsby的Command Line工具以預設的Starter安裝了一個示範網站。今天我們就來研究一下這個預設Starter生成的目錄結構。 You...

Zack ‧ 2018-10-17
1 Like 0 留言 3055 瀏覽
鐵人賽 Software Development DAY 25
用 Chromebook 能寫什麼樣的東西 系列 第 25 篇

技術 PWA：用 DevTools 來檢查螢幕大小和網路速度

PWA 既然要在各種裝置上使用，又要在沒有網路也能用，肯定是要經過各種環境測試的。不過你不需要拿出手機或一直切網路，不管你是用 Chromebook 還是桌上型...

NoobTW ‧ 2020-10-01 ‧團隊{iT12.group[i].name}
0 Like 0 留言 2624 瀏覽
鐵人賽 Modern Web DAY 25
前端三分鐘 X Progressive Web App 30 天製造解密 系列 第 25 篇

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

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

linyencheng ‧ 2021-10-08
1 Like 0 留言 2621 瀏覽
鐵人賽 Modern Web DAY 23
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 29 篇

技術 [Day29] 自動化管理Service Worker(Part2)

繼續昨天「針對不同的URL來路由(Routing)到對應的cache策略」，這裡我要將兩種不同的URL分別存入獨立的sub-cache中。第一個為materia...

rehome ‧ 2019-10-14
1 Like 0 留言 2587 瀏覽
鐵人賽 Modern Web DAY 9
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 9 篇

技術 [Day09] 在Service Worker中實作Caching(Part2)

接續昨天的進度，我們已經pre-cache app.js這個檔案了，但是我們監聽fetch event時還時直接回應從網路fetch回來的結果，沒有從cache...

rehome ‧ 2019-09-23
1 Like 0 留言 2513 瀏覽
鐵人賽 Modern Web DAY 19
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 19 篇

技術 [Day19] 了解PWA中的背景同步(Part1)

什麼是背景同步(Background Sync) 簡單來說，就是當用戶沒有網路連線時，背景同步就會將數據發送到server。 這裡有一點非常重要，在servi...

rehome ‧ 2019-10-03
0 Like 0 留言 2506 瀏覽
鐵人賽 Modern Web DAY 19
今晚，我想來點 Web 前端效能優化大補帖！ 系列 第 19 篇

技術 Day19 X Application Shell Architecture

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

莫力全 Kyle Mo ‧ 2021-10-04 ‧團隊StarBugs 星巴哥技術週刊
0 Like 0 留言 2473 瀏覽
鐵人賽 Modern Web DAY 24
前端三分鐘 X Progressive Web App 30 天製造解密 系列 第 24 篇

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

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

linyencheng ‧ 2021-10-07
1 Like 0 留言 2471 瀏覽
鐵人賽 Software Development DAY 22
用 Chromebook 能寫什麼樣的東西 系列 第 22 篇

技術 PWA 體驗設計：介面以外，看不到的還有更多

PWA 要在跨裝置上都能有好的體驗，除了該有的介面 RWD，讓不同裝置都不會跑版以外，還有什麼是需要注意的呢？ 昨天談到 PWA 的 P 代表 Progress...

NoobTW ‧ 2020-09-28 ‧團隊{iT12.group[i].name}
1 Like 0 留言 2438 瀏覽
鐵人賽 Software Development DAY 26
用 Chromebook 能寫什麼樣的東西 系列 第 26 篇

技術 透過 Lighthouse 檢查是否符合 PWA 標準

到今天應該已經可以順利寫出一個 PWA 了。不過為了避免釋出後使用者無法安裝的窘境，可以用 Lighthouse 來檢查是否達到 PWA 的標準。 Lighth...

NoobTW ‧ 2020-10-02 ‧團隊{iT12.group[i].name}
1 Like 0 留言 2390 瀏覽
鐵人賽 Modern Web DAY 21
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 21 篇

技術 [Day21] 了解PWA中的背景同步(Part3)

目前我的整個漸進式網站(PWA)是使用「http-server」這個node package來運行的，不過這也僅在開發階段可行而已。之後為了讓其他用戶也能使用，...

rehome ‧ 2019-10-05
1 Like 0 留言 2344 瀏覽
鐵人賽 Modern Web DAY 10
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 10 篇

技術 [Day10] 在Service Worker中實作Caching(Part3)

來開始實作Dynamic Caching吧 到目前為止，我們已經在在install階段中實現了pre-cache靜態資源，現在讓我們也來實作Dynamic C...

rehome ‧ 2019-09-24
1 Like 0 留言 2334 瀏覽
鐵人賽 Modern Web DAY 12
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 12 篇

技術 [Day12] Service Worker進階Caching實作(Part2)

Cache then Network Strategies 這個策略算是目前應用場景最為廣泛的。主要目的就是能「從cache中盡快的獲得用戶所需要的資源」，並且...

rehome ‧ 2019-09-26
0 Like 0 留言 2331 瀏覽
鐵人賽 Modern Web DAY 6
前端三分鐘 X Progressive Web App 30 天製造解密 系列 第 6 篇

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

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

linyencheng ‧ 2021-09-19
0 Like 0 留言 2282 瀏覽
鐵人賽 Modern Web DAY 5
前端三分鐘 X Progressive Web App 30 天製造解密 系列 第 5 篇

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

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

linyencheng ‧ 2021-09-18
1 Like 0 留言 2119 瀏覽
鐵人賽 Modern Web DAY 17
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 17 篇

技術 [Day17] PWA中不可或缺的響應式網頁設計(Part1)

漸進式網頁(PWA)的其中一個目標就是讓網頁「感覺起來」像是手機原生的APP。所以在網頁的設計上必須得適應不同的手機裝置，這種設計方式我們就把它稱之為「響應式網...

rehome ‧ 2019-10-01
0 Like 0 留言 2114 瀏覽
鐵人賽 影片教學 DAY 16
智慧雲端物聯 - 關鍵輕專業 （AIoT Cloud - Essential Shallow Expertise） 系列 第 18 篇

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

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

drm ‧ 2018-10-29
0 Like 0 留言 2085 瀏覽
鐵人賽 影片教學 DAY 15
智慧雲端物聯 - 關鍵輕專業 （AIoT Cloud - Essential Shallow Expertise） 系列 第 17 篇

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

[Day 15] APP開發 – PWA (1/2)4.0： APP 經濟 (13min)-- APP 現實-- APP 困境 : 技術出路4.1：「原生AP...

drm ‧ 2018-10-28
0 Like 0 留言 2056 瀏覽
鐵人賽 Modern Web DAY 20
前端三分鐘 X Progressive Web App 30 天製造解密 系列 第 20 篇

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

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

linyencheng ‧ 2021-10-03
1 Like 1 留言 2037 瀏覽
鐵人賽 Modern Web DAY 23
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 25 篇

技術 [Day25] 了解Media API和Geolocation API(Part1)

終於要來開始實作存取「裝置的媒體」和「地理位置」的功能。 當用戶要發佈貼文時，應該要開啟裝置的攝像鏡頭並將畫面顯示在PWA的表單中，當用戶按下拍照鍵時即完成影像...

rehome ‧ 2019-10-09
1 Like 0 留言 1966 瀏覽
鐵人賽 Modern Web DAY 11
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 11 篇

技術 [Day11] Service Worker進階Caching實作(Part1)

如果今天用戶沒有拜訪過某個頁面(舉例來說我的PWA中help.html)，那麼在網路離線時，我們之前所做的dynamic caching是無法fetch到這個資...

rehome ‧ 2019-09-25
1 Like 0 留言 1919 瀏覽
鐵人賽 Modern Web DAY 23
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 26 篇

技術 [Day26] 了解Media API和Geolocation API(Part2)

昨天已經將video stream添加到video元素中，今天要來繼續實作當用戶按下「拍照鈕」後，會將最新的「video stream snapshot」傳送到...

rehome ‧ 2019-10-10
0 Like 0 留言 1918 瀏覽
鐵人賽 Modern Web DAY 11
前端三分鐘 X Progressive Web App 30 天製造解密 系列 第 11 篇

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

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

linyencheng ‧ 2021-09-24
1 Like 0 留言 1868 瀏覽
鐵人賽 Modern Web DAY 14
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 14 篇

技術 [Day14] 使用indexedDB暫存Dynamic Data(Part1)

先來為我的PWA建立一個後台資料庫吧 我目前對於用戶的貼文，是先去request一個假的Restful API Endpoint，再用createCard()...

rehome ‧ 2019-09-28
1 Like 0 留言 1850 瀏覽
鐵人賽 Modern Web DAY 13
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 13 篇

技術 [Day13] Service Worker進階Caching實作(Part3)

回顧一下昨天，我根據不同的request類型而使用不同的cache strategies： "https://httpbin.org/get&quo...

rehome ‧ 2019-09-27
0 Like 0 留言 1795 瀏覽
鐵人賽 Modern Web DAY 16
前端三分鐘 X Progressive Web App 30 天製造解密 系列 第 16 篇

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

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

linyencheng ‧ 2021-09-29
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19831 篇
完賽人數
528 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙