iT邦幫忙

pwa相關文章
共有 111 則文章
鐵人賽 Modern Web DAY 18

技術 Day 18 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - Application Shell 與靜態檔案的離線存取

之前文章有介紹 PWA 裡的 App(Application Shell) 是什麼? 也有分享 App Shell 的執行效益以及設計方向,而今天要做 To-D...

鐵人賽 Modern Web DAY 20

技術 Day 20 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - (新增/修改/刪除待辦事項清單)

接續昨天的範例,我們今天來完成 To-Do List 的功能實作吧! To-Do List 需求 昨天的文章已經完成『顯示待辦事項清單』,今天要執行的是新增/修...

鐵人賽 Modern Web DAY 3

技術 [Day03] 再探Web App Manifest

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

鐵人賽 Modern Web DAY 19

技術 Day 19 - 30 天 Progressive Web App 學習筆記 - 實作 PWA To-Do List - 顯示待辦事項清單

今天預計開始實作 To-Do List 的功能,先顯示待辦事項的行為並且串接 Restful API,模擬實際專案的情形。 To-Do List 需求 在開發...

鐵人賽 Modern Web DAY 25

技術 Day 25 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache-webpack-plugin 應用

在昨天的文章裡,有針對 sw-precache-webpack-plugin 做介紹,而今天藉由 To-Do List 這個範例,來實際應用 sw-precac...

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 22

技術 Day 22 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache 簡介

sw-precache 是什麼? 介紹 sw-precache 是什麼之前、我們先來了解為什麼要有 sw-precache?我們在之前的文章裡建立 Servic...

鐵人賽 Modern Web DAY 2

技術 [影片]Gatsby.js 未來的網頁02:安裝Gatsby.js

實作是最好的學習。今天要介紹Gatsby.js的安裝及在local環境運行起來。 YouTube教學影片: ##安裝Gatsby CLI npm instal...

鐵人賽 Modern Web DAY 24

技術 Day 24 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache-webpack-plugin 簡介

在大型專案裡,通常我們還會透過 webpack、將 JavaScript、CSS、圖片做模組化,藉著 webpack 的設定、統一管理檔案,讓開發更單純。 sw...

鐵人賽 Modern Web DAY 9

技術 Day9-Service Worker中的Fetch事件

Fetch 事件 self.addEventListener('fetch', function(event){ console.log('[SW] 抓...

鐵人賽 Modern Web DAY 23

技術 Day 23 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache 應用

Service Worker 檔案可以自己寫也可以自動產生,昨天有介紹到 sw-precache,藉由 To-Do List 的案例,今天將分享要如何透過 sw...

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 2

技術 Day2-關於PWAs(核心技術)?

談談PWAs核心技術 Service Worker 在沒有Service Worker的情況下,一般的網頁都是Client-Server Model(主從式架...

鐵人賽 Modern Web DAY 2

技術 [Day02] 初探Web App Manifest

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 22

技術 Day22-就是偏要在無網路情況下送表單(Background Sync)

截至目前為止,已經可以順利在Offline的情境下,正常瀏覽網站內容,也能暫存網站的內容到客戶端的DB,但如果網站頁面上,很常會有表單的需求,例如,註冊會員、新...

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 29

技術 Progressive Web App NFC 入門實作 (29)

什麼是 Web NFC? NFC (Near Field Communication) 近場通訊是高頻 (13.56 MHz) 短距離無線通訊技術,只要距離 5...

鐵人賽 Software Development DAY 21

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 30

技術 Progressive Web App 跨平台安裝上架 (30)

Progressive Web App 跨平台安裝 Progressive Web App 本身就具有能被安裝的特性,此外也能夠透過 Bubblewrap 或是...

鐵人賽 Modern Web DAY 22

技術 Progressive Web App 推播通知: 網站推播通知原理開箱解密 (22)

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Software Development DAY 27

技術 Lighthouse 和 PageSpeed,檢測網站該看哪個指標?

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

鐵人賽 Modern Web DAY 3

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

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