終於要開始實作「獲取用戶地理位置」的功能了 要獲取地理位置必須使用「Geolocation API」這個Web API。先來看一下這個API的瀏覽器支援程度：...
昨天已經將video stream添加到video元素中，今天要來繼續實作當用戶按下「拍照鈕」後，會將最新的「video stream snapshot」傳送到...
終於要來開始實作存取「裝置的媒體」和「地理位置」的功能。 當用戶要發佈貼文時，應該要開啟裝置的攝像鏡頭並將畫面顯示在PWA的表單中，當用戶按下拍照鍵時即完成影像...
VAPID Library是使用「非對稱式加密的方式」確保傳送推播訊息到瀏覽器供應商的push server是「來自我自己的server」。 也就是說它會產生一...
沒想到 30 天就這麼樣的過去了，記得鐵人賽開始前，網路上逛阿逛的就已經知道了這個一年一度的盛事，真的也不知哪一根筋不對，當時就躍躍欲試，還調好了鬧鐘，開始報...
之前我有一篇文章在說明 RWD 版型在瀏覽器縮放時進行的變化，那時候的 CSS 是直接用原生 CSS 撰寫的，這幾天我們花了一點時間說明了 CSS 預處理器 S...
昨天在實作「顯示通知」時，除了設定body這個option之外，其實還有很多其他選項可以設定 (不過這裡要先說這些額外的設定不一定每個browser都有支援QQ...
為何PWA需要推播通知(Push Notifications) 首先，只要用戶允許我們推播，當有新的貼文資訊時，我們就可以主動通知用戶。即使今天用戶關閉網頁或...
Sass Map 是 Sass 的地圖嗎？當然不是囉，但既然它取名為 Maps，姑且我們可以暫時以地圖的按圖索驥的精神來想像它。 過往，我們提到了 Sass...
目前我的整個漸進式網站(PWA)是使用「http-server」這個node package來運行的，不過這也僅在開發階段可行而已。之後為了讓其他用戶也能使用，...
For 迴圈，在程式設計這個世界鼎鼎大名，多少人戰死在這裡，我就曾經在這裡跌倒，然後萬劫不復，請詳我之前的故事，這一切是怎麼開始的，我怎麼跑去學了Python...
從昨天的流程圖可以發現，我們還必須將用戶要發佈的貼文資訊儲存到indexedDB中才行R。那我就接續昨天在feed.js中增加的code： if('servic...
在我們介紹 RWD 時，知道撰寫一個 RWD 網站必須要在撰寫 CSS 的時候加入 Media query，但是常會很困擾的是，到底要把 Media quer...
什麼是背景同步(Background Sync) 簡單來說，就是當用戶沒有網路連線時，背景同步就會將數據發送到server。 這裡有一點非常重要，在servi...
我們前面聊完了@import，知道了原來最終的編譯檔 scss 是可以透過好幾個分門別類各自分開的 scss 用@import導入，來讓版面都乾乾淨淨的，之前...
過往一支 CSS 檔打天下，從頭寫到尾，動則上千上萬條程式碼，維護不易，之前我們介紹了 scss 的變數功能，讓一些關鍵的設定可以透過變數的型式撰寫。 如今，...
繼續昨天的響應式網頁設計(RWD)，今天我要來將首頁中最大的那張圖片改成responsive。 當我用電腦瀏覽頁面時，圖片旁邊會有空白的地方，但是我希望圖片的大...
漸進式網頁(PWA)的其中一個目標就是讓網頁「感覺起來」像是手機原生的APP。所以在網頁的設計上必須得適應不同的手機裝置，這種設計方式我們就把它稱之為「響應式網...
今天要來介紹的是 Sass 的變數功能，只要利用變數的功能，我們會比較好的去管理一個網站的其他設定值，而不用欲修改時要一行一行的檢視原生 CSS 碼。 $ti...
連續的從 HTML 到 CSS 然後到 RWD，現在我們要來到了 Sass了，Sass 是 CSS 的預處理器，顧名思義它的功能就是可以「預先處理」CSS，讓...
昨天已經成功地將firebase裡的dynamic data儲存至indexedDB了，接下來因為我目前使用的cache strategies是「cache t...
什麼是 IndexedDB ? 前面已經有提到indexedDB是一個在browser運行的Database，這裡我列出幾項主要的特性： IndexedDB...
我們花了好多天的時間來介紹 RWD 的設計概念，但是每一個概念都比較片斷與零散一點，今天我們來把所有的概念整合一下，變成一個完整的 RWD 網頁吧，來看一下我...
先來為我的PWA建立一個後台資料庫吧 我目前對於用戶的貼文，是先去request一個假的Restful API Endpoint，再用createCard()...
float的使用，我們常會用在 desktop 的排版上，不管是要將區塊並排顯示，或是要將選單橫列，常常都會使用到{float:left;}。今天我們要提到的...
回顧一下昨天，我根據不同的request類型而使用不同的cache strategies： "https://httpbin.org/get&quo...
大家一定常常會看到像是這樣類型的版型，左邊是 menu 的選單，而右邊則是每一則網頁內容，而當我們縮放瀏覽器時，左邊的選單區塊不會有任何變動，縮放的是右邊的網...
前言 想做個 加入我的最愛路線 ，首先需要辨別身份(唯一key,id)，對照資料庫有無紀錄(是否為會員/有無最愛清單...)， 這時候，就需要登入來幫忙，而登入...
阿瑜
‧
2019-09-27
Cache then Network Strategies 這個策略算是目前應用場景最為廣泛的。主要目的就是能「從cache中盡快的獲得用戶所需要的資源」，並且...
在前面的章節我們已經介紹過了max-width or min-width以及百分比(%)單位對於 RWD 網站的重要性，現在我們要來設計一個三欄式的流體式網頁...
iT 邦幫忙鐵人賽
rehome
Alec