iT邦幫忙

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

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

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

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

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

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

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

技術 Lighthouse 和 PageSpeed，檢測網站該看哪個指標？

昨天提到 Lighthouse 可以用來看 PWA，但是長期有在做 SEO 和網站設計的朋友應該比較熟 PageSpeed，究竟這兩個評分網站有什麼不一樣？該看...

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

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

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

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

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

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

NoobTW ‧ 2020-10-01 ‧團隊{iT12.group[i].name}
4 Like 0 留言 2888 瀏覽
鐵人賽 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 留言 1930 瀏覽
鐵人賽 Software Development DAY 22
用 Chromebook 能寫什麼樣的東西 系列 第 22 篇

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

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

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

技術 PWA 介面設計：先認識 RWD 設計

在 PWA 應用程式中，你能打造一款讓手機、Chromebook、電腦都可以操作的應用程式，這就像是在寫網站時設計 RWD 網站一樣。設計 PWA 有什麼鋩角呢...

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

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

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

NoobTW ‧ 2020-09-26 ‧團隊{iT12.group[i].name}
3 Like 1 留言 7740 瀏覽
鐵人賽 Modern Web
超緊繃!30天Vue.js學習日記 系列 第 33 篇

技術 [Vue.js][日記]親愛的,我讓Mobile Web變成了PWA

超緊繃!30天Vue.js學習日記 親愛的,我讓Mobile Web變成了PWA 大家好,我是IAN。 接續著昨天的主題製作簡易的天氣預報頁面,過於無聊的我今天...

EN ‧ 2019-10-21 ‧團隊IT成長團
1 Like 0 留言 2632 瀏覽
鐵人賽 Modern Web DAY 29
Angular 8 從推坑到放棄 系列 第 29 篇

技術 [Day28 ]建立 PWA 應用

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

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

技術 [Day28] 自動化管理Service Worker(Part1)

之前在service worker中寫了這麼多cache strategies、background sync等等的程式碼，但是隨著我們開發的專案越來越大、檔案...

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

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

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

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

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

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

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

技術 [Day24] 實作PWA推播通知(Part3)

VAPID Library是使用「非對稱式加密的方式」確保傳送推播訊息到瀏覽器供應商的push server是「來自我自己的server」。 也就是說它會產生一...

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

技術 [Day23] 實作PWA推播通知(Part2)

昨天在實作「顯示通知」時，除了設定body這個option之外，其實還有很多其他選項可以設定 (不過這裡要先說這些額外的設定不一定每個browser都有支援QQ...

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

技術 [Day22] 實作PWA推播通知(Part1)

為何PWA需要推播通知(Push Notifications) 首先，只要用戶允許我們推播，當有新的貼文資訊時，我們就可以主動通知用戶。即使今天用戶關閉網頁或是...

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

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

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

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

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

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

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

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

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

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

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

繼續昨天的響應式網頁設計(RWD)，今天我要來將首頁中最大的那張圖片改成responsive。 當我用電腦瀏覽頁面時，圖片旁邊會有空白的地方，但是我希望圖片的大...

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

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

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

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

技術 [Day15] 使用indexedDB暫存Dynamic Data(Part2)

什麼是 IndexedDB ? 前面已經有提到indexedDB是一個在browser運行的Database，這裡我列出幾項主要的特性： IndexedDB儲...

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

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

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

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

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

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

rehome ‧ 2019-09-25
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22199 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙