iT邦幫忙

pwa相關文章
共有 72 則文章
鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 29
Angular 8 從推坑到放棄 系列 第 29

技術 [Day28 ]建立 PWA 應用

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

技術 [Day08] 在Service Worker中實作Caching(Part1)

為什麼我們的PWA需要Caching? 這邊我舉幾個實際可能發生的例子: 想一想如果今天我們的網站有大量用戶湧入時。用戶可能會在「網路連線不良」的情形下,仍...

鐵人賽 Modern Web DAY 7

技術 [Day07] 複習一下Jacvascript中的 Promise 和 Fetch(Part2)

Fetch API是目前較新版本的瀏覽器都有支援的javascript function,它允許我們透過HTTP Request來獲取外部資源,這其實跟Ajax...

鐵人賽 Modern Web DAY 6

技術 [Day06] 複習一下Jacvascript中的 Promise 和 Fetch(Part1)

在Service Woker中會用到大量的promise和Fetch API,所以這邊先來好好複習一下 JavaScript程式語言在設計時,需考量非同步、單...

鐵人賽 Modern Web DAY 5

技術 [Day05] Service Worker の 基礎介紹(Part2)

來看看Service Worker怎麼監聽事件 我們可以在sw.js file裡,開始監聽一些比較基本的事件。 // 當service worker在「安裝階段...

鐵人賽 Modern Web DAY 4

技術 [Day04] Service Worker の 基礎介紹(Part1)

什麼是Service Worker? 從一般普通的Javascript開始說,Javascript是在single thread上運行。這意味著,如果我們訪問...

鐵人賽 Modern Web DAY 3

技術 [Day03] 再探Web App Manifest

現在我們可以在android模擬器上的chrome瀏覽器測試一下我們的網站,記得按下Add to home screen加入到手機螢幕上,可以發現我們在Mani...

鐵人賽 Modern Web DAY 2

技術 [Day02] 初探Web App Manifest

什麼是Web App Manifest? Web App Manifest就是一個json文件,當browser載入文件後,可以幫助我們安裝Web到手機的螢幕上...