iT邦幫忙

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

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

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

linyencheng ‧ 2021-09-27
2 Like 0 留言 2556 瀏覽
鐵人賽 Software Development DAY 23
用 Chromebook 能寫什麼樣的東西 系列 第 23 篇

技術 PWA：Service Worker 在網頁關掉之後還會繼續跑

PWA 的重點就是這個 Service Worker 了，可以做到離線還能使用，主要都是靠它在幫忙。這個 Service Worker 到底有什麼厲害的呢？ 雖...

NoobTW ‧ 2020-09-29 ‧團隊{iT12.group[i].name}
1 Like 0 留言 2376 瀏覽
鐵人賽 Modern Web DAY 29
Angular 8 從推坑到放棄 系列 第 29 篇

技術 [Day28 ]建立 PWA 應用

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

TimTim ‧ 2019-10-15
1 Like 0 留言 2368 瀏覽
鐵人賽 Software Development DAY 20
用 Chromebook 能寫什麼樣的東西 系列 第 20 篇

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

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

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

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

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

rehome ‧ 2019-09-23
0 Like 0 留言 2041 瀏覽
鐵人賽 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 留言 1873 瀏覽
鐵人賽 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 留言 1841 瀏覽
鐵人賽 Modern Web DAY 21
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 21 篇

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

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

rehome ‧ 2019-10-05
1 Like 0 留言 1840 瀏覽
鐵人賽 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 留言 1780 瀏覽
鐵人賽 Software Development DAY 26
用 Chromebook 能寫什麼樣的東西 系列 第 26 篇

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

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

NoobTW ‧ 2020-10-02 ‧團隊{iT12.group[i].name}
0 Like 0 留言 1780 瀏覽
鐵人賽 影片教學 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
1 Like 0 留言 1746 瀏覽
鐵人賽 Software Development DAY 25
用 Chromebook 能寫什麼樣的東西 系列 第 25 篇

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

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

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

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

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

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

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

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

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

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

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

rehome ‧ 2019-10-01
0 Like 0 留言 1616 瀏覽
鐵人賽 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
0 Like 0 留言 1600 瀏覽
鐵人賽 影片教學 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 留言 1596 瀏覽
鐵人賽 Modern Web DAY 19
今晚，我想來點 Web 前端效能優化大補帖！ 系列 第 19 篇

技術 Day19 X Application Shell Architecture

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

莫力全 Kyle Mo ‧ 2021-10-04 ‧團隊StarBugs 星巴哥技術週刊
1 Like 0 留言 1573 瀏覽
鐵人賽 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 留言 1554 瀏覽
鐵人賽 Modern Web DAY 19
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 19 篇

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

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

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

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

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

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

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

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

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

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

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

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

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

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

rehome ‧ 2019-09-28
0 Like 0 留言 1447 瀏覽
鐵人賽 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
1 Like 0 留言 1312 瀏覽
鐵人賽 Modern Web DAY 23
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 27 篇

技術 [Day27] 了解Media API和Geolocation API(Part3)

終於要開始實作「獲取用戶地理位置」的功能了 要獲取地理位置必須使用「Geolocation API」這個Web API。先來看一下這個API的瀏覽器支援程度：整...

rehome ‧ 2019-10-12
0 Like 0 留言 1311 瀏覽
鐵人賽 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 0 留言 1287 瀏覽
鐵人賽 Modern Web DAY 16
你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 第 16 篇

技術 [Day16] 使用IndexedDB暫存Dynamic Data(Part3)

昨天已經成功地將firebase裡的dynamic data儲存至indexedDB了，接下來因為我目前使用的cache strategies是「cache t...

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

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

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

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

技術 [Day20] 了解PWA中的背景同步(Part2)

從昨天的流程圖可以發現，我們還必須將用戶要發佈的貼文資訊儲存到indexedDB中才行R。那我就接續昨天在feed.js中增加的code： if('servic...

rehome ‧ 2019-10-04
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙