之前文章有介紹 PWA 裡的 App(Application Shell) 是什麼? 也有分享 App Shell 的執行效益以及設計方向,而今天要做 To-D...
接續昨天的範例,我們今天來完成 To-Do List 的功能實作吧! To-Do List 需求 昨天的文章已經完成『顯示待辦事項清單』,今天要執行的是新增/修...
現在我們可以在android模擬器上的chrome瀏覽器測試一下我們的網站,記得按下Add to home screen加入到手機螢幕上,可以發現我們在Mani...
今天預計開始實作 To-Do List 的功能,先顯示待辦事項的行為並且串接 Restful API,模擬實際專案的情形。 To-Do List 需求 在開發...
在昨天的文章裡,有針對 sw-precache-webpack-plugin 做介紹,而今天藉由 To-Do List 這個範例,來實際應用 sw-precac...
Fetch API是目前較新版本的瀏覽器都有支援的javascript function,它允許我們透過HTTP Request來獲取外部資源,這其實跟Ajax...
sw-precache 是什麼? 介紹 sw-precache 是什麼之前、我們先來了解為什麼要有 sw-precache?我們在之前的文章裡建立 Servic...
實作是最好的學習。今天要介紹Gatsby.js的安裝及在local環境運行起來。 YouTube教學影片: ##安裝Gatsby CLI npm instal...
在大型專案裡,通常我們還會透過 webpack、將 JavaScript、CSS、圖片做模組化,藉著 webpack 的設定、統一管理檔案,讓開發更單純。 sw...
Fetch 事件 self.addEventListener('fetch', function(event){ console.log('[SW] 抓...
Service Worker 檔案可以自己寫也可以自動產生,昨天有介紹到 sw-precache,藉由 To-Do List 的案例,今天將分享要如何透過 sw...
來看看Service Worker怎麼監聽事件 我們可以在sw.js file裡,開始監聽一些比較基本的事件。 // 當service worker在「安裝階段...
談談PWAs核心技術 Service Worker 在沒有Service Worker的情況下,一般的網頁都是Client-Server Model(主從式架...
什麼是Web App Manifest? Web App Manifest就是一個json文件,當browser載入文件後,可以幫助我們安裝Web到手機的螢幕上...
加入主畫面 (Add to Home screen) 加入主畫面 (Add to Home screen) 常見的縮寫為 A2HS,可以看成是讓使用者將 Web...
截至目前為止,已經可以順利在Offline的情境下,正常瀏覽網站內容,也能暫存網站的內容到客戶端的DB,但如果網站頁面上,很常會有表單的需求,例如,註冊會員、新...
在Service Woker中會用到大量的promise和Fetch API,所以這邊先來好好複習一下 JavaScript程式語言在設計時,需考量非同步、單...
VAPID Library是使用「非對稱式加密的方式」確保傳送推播訊息到瀏覽器供應商的push server是「來自我自己的server」。 也就是說它會產生一...
延續昨天行動版要素,其實不僅僅適用於行動版網頁的設計,比方說測試這件事情對在開發來說是非常重要的,如果你的網站中沒有那麼多的臭蟲,相對於臭蟲多的地方,你的網站更...
為什麼我們的PWA需要Caching? 這邊我舉幾個實際可能發生的例子: 想一想如果今天我們的網站有大量用戶湧入時。用戶可能會在「網路連線不良」的情形下,仍然...
昨天在實作「顯示通知」時,除了設定body這個option之外,其實還有很多其他選項可以設定 (不過這裡要先說這些額外的設定不一定每個browser都有支援QQ...
什麼是 Web NFC? NFC (Near Field Communication) 近場通訊是高頻 (13.56 MHz) 短距離無線通訊技術,只要距離 5...
在 PWA 應用程式中,你能打造一款讓手機、Chromebook、電腦都可以操作的應用程式,這就像是在寫網站時設計 RWD 網站一樣。設計 PWA 有什麼鋩角呢...
我們已經用Gatsby的Command Line工具以預設的Starter安裝了一個示範網站。今天我們就來研究一下這個預設Starter生成的目錄結構。 You...
之前在service worker中寫了這麼多cache strategies、background sync等等的程式碼,但是隨著我們開發的專案越來越大、檔案...
Progressive Web App 跨平台安裝 Progressive Web App 本身就具有能被安裝的特性,此外也能夠透過 Bubblewrap 或是...
什麼是網站推播通知 推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法,所以目標是即使網站、App 關閉時也要能在背景接收推播。推播...
什麼是 IndexedDB ? 前面已經有提到indexedDB是一個在browser運行的Database,這裡我列出幾項主要的特性: IndexedDB儲...
昨天提到 Lighthouse 可以用來看 PWA,但是長期有在做 SEO 和網站設計的朋友應該比較熟 PageSpeed,究竟這兩個評分網站有什麼不一樣?該看...
Promoting installation 推薦安裝提示 當我們的 Progressive Web App 滿足了安裝前的審核標準,瀏覽器就會觸發 befor...