原创 PWA(Progressive Web App)入門系列：Push

前言 很多時候，原生應用會通過一些消息推送來喚起用戶的關注，增加駐留率。網頁該怎麼做呢？有沒有類似原生應用的推送機制？推送功能又能玩出什麼花樣呢？ Push API Push API 給與了 Web 應用程序接收從服務器發出的推

2020-06-15 15:07:08 8

原创 Workbox.routing v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 類 NavigationRoute NavigationRoute可以輕鬆創建匹配瀏覽器navigation requests的Route。 它僅匹配

2020-06-15 15:07:08 6

原创 Workbox CLI v3.x 中文版

在寫PWA應用時，用到WorkBox工具，使用過程中發現沒有中文的幫助文檔，爲了體驗好一些，也爲了方便自己和他人查看，在這裏翻譯了一下workbox-cli。 Workbox CLI 是什麼? Workbox命令行（在workb

2020-06-15 15:07:08

原创 Workbox.strategies v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 該模塊提供了大多數serviceworker常用的緩存策略的簡單實現。 類 CacheFirst cache-first請求策略的實現。 緩存優先策

2020-06-15 15:07:08 5

原创 PWA(Progressive Web App)入門系列：Fetch & Request & Headers & Response & Body

前言 在 WEB 中，對於網絡請求一直使用的是 XMLHttpRequest API 來處理，XMLHttpRequest 也很強大，傳統的 Ajax 也是基於此 API 的。那麼爲什麼 W3C 標準中又加入了類似功能的 Fetc

2020-06-15 15:07:08 9

原创 「工具」PWA Manifest圖標及 favicon.ico 生成工具

PWA 其中有一個能力就是把網站安裝到系統桌面，以原生應用的體驗來運行網站，使用戶無需再找開瀏覽器輸入網址進入網站，而是可以直接點擊安裝好的應用直接運行，給使網站訪問縮短路徑及增加網站的曝光度。 其中有一個問題就是需要生成應用的圖

2020-06-15 15:07:08

原创 我的新書《PWA入門與實踐》上市了

前言 我初接觸PWA是在2017年年初，當時參加了一個前端分享會，其中一個主題就是與PWA相關的，介紹了PWA的Service Worker和安裝到桌面的能力，以及這門技術未來的發展趨勢，聽完這個分享後，我就爲PWA的一些能力所

2020-05-08 04:11:41

原创 [工具]TS 視頻合併工具

簡介 當下載 m3u8 資源時，通常產生的是多個 ts 視頻文件，所以需要藉助某些工具來將這些 ts 視頻片段整合爲一個視頻文件。 本軟件主要解決的就是這個問題，底層基於ffmpeg，可正常運行在 Windows 和 Mac 平

2020-04-20 11:40:52 2

原创 微信小程序入門四: 導航欄樣式、tabBar導航欄

實例內容 導航欄樣式設置 tabBar導航欄 實例一：導航欄樣式設置 小程序的導航欄樣式在app.json中定義。 這裏設置導航，背景黑色，文字白色，文字內容測試小程序 app.json內容： { "pages":[

2020-02-23 19:56:50

原创 各種瀏覽器緩存淺析

前言 目前瀏覽器的緩存類型衆多，HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等，這些緩存是如何產生的？命中優先級是怎麼樣？又該如何去使用它們

2020-02-23 19:56:30 1

原创 「工具」IndexDB 版備忘錄

前言 工作日常需要做一些備忘錄，記錄一些要做的事。在 Mac 上有使用系統的備忘錄，但功能偏弱且文本格式調整不方便。再就是使用瀏覽器找專門的備忘錄網站，功能是滿足了，但是鏈路長，沒有桌面軟件直接。 所以最後乾脆自己寫一個吧。 思路

2019-07-30 03:15:01

原创 PWA(Progressive Web App)入門系列：安裝 Web 應用

前言 在傳統的 Web 應用中，通常只能通過在瀏覽器的地址欄裏輸入相應的網址才能進行訪問，或者把網頁地址創建到桌面上通過點擊，然後在瀏覽器裏打開。 傳統模式下，圖標、啓動畫面、主題色、視圖模式、屏幕方向等等都無法去自定義和控制。

2019-07-05 04:17:02 1

原创 PWA(Progressive Web App)入門系列：Sync 後臺同步

前言 當我們在一些地下停車場，或者在火車上、電梯等無法避免的信號不穩定的場所，使用網站應用處理一些表單操作或者上傳數據的操作時，面臨的將是網絡連接錯誤的響應，使用戶的操作白費。 而此刻 PWA 的 Sync API 就很好的解決了

2019-06-30 05:04:54 4

原创 超方便的 IndexDB 庫

前言 做爲 Web 瀏覽器層的本地存儲，IndexDB 做爲一個很好的選擇，幾乎可以存儲任意類型的數據，且是異步的。但是正常使用方式下需要在監聽各種事件來處理結果，不是很方便，下面就對這一層進行了包裝，使用方便。 IndexDB

2019-06-21 04:31:48

原创 PWA(Progressive Web App)入門系列：消息通訊

前言 serviceWorker 的能力決定它要處理的事情，網站頁面的部分邏輯處理會轉移到 serviceWorker 層進行處理，這裏就要頁面層和 serviceWorker 層進行交互來實現消息通訊。 下面就說一下兩個環境下的

2019-06-17 05:27:44 7