iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 1721 瀏覽

鐵人賽影片教學 DAY 15

智慧雲端物聯 - 關鍵輕專業（AIoT Cloud - Essential Shallow Expertise）系列第 17 篇

技術 APP開發 – PWA (1/2)

[Day 15] APP開發 – PWA (1/2)4.0： APP 經濟 (13min)-- APP 現實-- APP 困境 : 技術出路4.1：「原生AP...

drm ‧ 2018-10-28

5 Like 2 留言 27515 瀏覽

鐵人賽 Modern Web DAY 30

30 天 Progressive Web App 學習筆記系列第 30 篇

技術 Day 30 - 30 天 Progressive Web App 學習筆記 - 最終回《也是一個新的開始》

本次參加鐵人賽收穫很多，雖然邊寫邊學、每天都在趕十二點，不過最後也完成 To-Do List 實作 PWA 的簡單範例，可以完成離線瀏覽的網站還蠻有趣的。奉上...

iamya ‧ 2017-01-14

2 Like 0 留言 20267 瀏覽

鐵人賽 Modern Web DAY 29

30 天 Progressive Web App 學習筆記系列第 29 篇

技術 Day 29 - 30 天 Progressive Web App 學習筆記 - 介紹 Offline Storage

為什麼要介紹 Offline Storage？能夠在無網路存取的環境下進行『離線瀏覽』是 PWA 的強大特點，在 To-Do List 的範例中，我們已經透過...

iamya ‧ 2017-01-13

3 Like 0 留言 13806 瀏覽

鐵人賽 Modern Web DAY 28

30 天 Progressive Web App 學習筆記系列第 28 篇

技術 Day 28 - 30 天 Progressive Web App 學習筆記 - To-Do List 搭配 React + Redux 實作 PWA

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA，而內容會假設讀者已經熟悉 Re...

iamya ‧ 2017-01-12

2 Like 0 留言 12450 瀏覽

鐵人賽 Modern Web DAY 27

30 天 Progressive Web App 學習筆記系列第 27 篇

技術 Day 27 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - 完成 React + Redux 專案架構與功能

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA，而內容會假設讀者已經熟悉 Re...

iamya ‧ 2017-01-11

2 Like 0 留言 10121 瀏覽

鐵人賽 Modern Web DAY 26

30 天 Progressive Web App 學習筆記系列第 26 篇

技術 Day 26 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - React + Redux + Webpack 環境建置

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA，而內容會假設讀者已經熟悉 Re...

iamya ‧ 2017-01-10

2 Like 0 留言 6629 瀏覽

鐵人賽 Modern Web DAY 25

30 天 Progressive Web App 學習筆記系列第 25 篇

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

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

iamya ‧ 2017-01-09

2 Like 0 留言 5669 瀏覽

鐵人賽 Modern Web DAY 24

30 天 Progressive Web App 學習筆記系列第 24 篇

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

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

iamya ‧ 2017-01-08

3 Like 0 留言 5365 瀏覽

鐵人賽 Modern Web DAY 23

30 天 Progressive Web App 學習筆記系列第 23 篇

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

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

iamya ‧ 2017-01-07

3 Like 0 留言 5797 瀏覽

鐵人賽 Modern Web DAY 22

30 天 Progressive Web App 學習筆記系列第 22 篇

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

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

iamya ‧ 2017-01-06

4 Like 0 留言 17464 瀏覽

鐵人賽 Modern Web DAY 21

30 天 Progressive Web App 學習筆記系列第 21 篇

技術 Day 21 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - Web App Manifest File

Manifest File 是什麼？列出一些 PWA 網站的 manifest.json 檔案給大家參考。 airhorner 的 manifest.j...

iamya ‧ 2017-01-05

2 Like 0 留言 7384 瀏覽

鐵人賽 Modern Web DAY 20

30 天 Progressive Web App 學習筆記系列第 20 篇

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

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

iamya ‧ 2017-01-04

4 Like 0 留言 6980 瀏覽

鐵人賽 Modern Web DAY 19

30 天 Progressive Web App 學習筆記系列第 19 篇

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

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

iamya ‧ 2017-01-03

3 Like 1 留言 7394 瀏覽

鐵人賽 Modern Web DAY 18

30 天 Progressive Web App 學習筆記系列第 18 篇

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

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

iamya ‧ 2017-01-02

4 Like 0 留言 9176 瀏覽

鐵人賽 Modern Web DAY 17

30 天 Progressive Web App 學習筆記系列第 17 篇

技術 Day 17 - 30 天 Progressive Web App 學習筆記 - Service Worker - Handling Fetch Requests

今天筆記內容是要來了解 Service Worker 的 fetch 事件。 fetch 事件的觸發時機如何攔截 Requests？如何處理攔截到的 Re...

iamya ‧ 2017-01-01

3 Like 1 留言 8120 瀏覽

鐵人賽 Modern Web DAY 16

30 天 Progressive Web App 學習筆記系列第 16 篇

技術 Day 16 - 30 天 Progressive Web App 學習筆記 - Service Worker - Clearing Old Cache

為什麼要清除 Old Cache？在前面的文章有講到，我們會去註冊 Service Worker ，接著在 install 的事件裡進行 Pre-cache...

iamya ‧ 2016-12-31

4 Like 0 留言 9512 瀏覽

鐵人賽 Modern Web DAY 15

30 天 Progressive Web App 學習筆記系列第 15 篇

技術 Day 15 - 30 天 Progressive Web App 學習筆記 - Service Worker - Setting up the Default Cache

一開始會註冊 Service Worker，接著會進到 install 事件，通常我們會在這個事件裡面去快取網站的靜態檔案（App Shell），實作本篇文章的...

iamya ‧ 2016-12-30

3 Like 0 留言 14417 瀏覽

鐵人賽 Modern Web DAY 14

30 天 Progressive Web App 學習筆記系列第 14 篇

技術 Day 14 - 30 天 Progressive Web App 學習筆記 - 實作 Registering the Service Worker

之前的文章裡有介紹 Service Worker 的觀念，今天要進行 Service Worker 的第一步：透過簡單的範例來註冊 Service Worker...

iamya ‧ 2016-12-29

3 Like 2 留言 18003 瀏覽

鐵人賽 Modern Web DAY 13

30 天 Progressive Web App 學習筆記系列第 13 篇

技術 Day 13 - 30 天 Progressive Web App 學習筆記 - 環境建置 ( json-server、http-server 、concurrently )

今天的目標是實作如下：透過 json-server 來新增 DEMO 用的 API，模擬實際專案會使用 REST API 的情境。安裝 http-s...

iamya ‧ 2016-12-28

2 Like 0 留言 12684 瀏覽

鐵人賽 Modern Web DAY 12

30 天 Progressive Web App 學習筆記系列第 12 篇

技術 Day 12 - 30 天 Progressive Web App 學習筆記 - PWA 案例介紹

PWA (Progressive Web App) 是 Google 在 2015 年所提出的概念，2016 年我們開始看到許多 PWA 應用像是 The Wa...

iamya ‧ 2016-12-27

4 Like 0 留言 11357 瀏覽

鐵人賽 Modern Web DAY 11

30 天 Progressive Web App 學習筆記系列第 11 篇

技術 Day 11 - 30 天 Progressive Web App 學習筆記 - Chrome devTools - Introducing the Application tab

打造 Progressive Web App 必須建立許多核心技術，包括 Service Workers 和 Web App Manifests 並搭配 Cac...

iamya ‧ 2016-12-26

6 Like 1 留言 20671 瀏覽

鐵人賽 Modern Web DAY 10

30 天 Progressive Web App 學習筆記系列第 10 篇

技術 Day 10 - 30 天 Progressive Web App 學習筆記 - Service Work 簡介

今天筆記的是 Service Worker 的觀念，較深入的部份將會在之後的文章，透過實作再來做細部說明。 Service Worker 是非常強大的 offl...

iamya ‧ 2016-12-25

3 Like 1 留言 11357 瀏覽

鐵人賽 Modern Web DAY 9

30 天 Progressive Web App 學習筆記系列第 9 篇

技術 Day 09 - 30 天 Progressive Web App 學習筆記 - Optimizing Content Efficiency

在網路的世界裡，我們只要輸入網址就可以進行瀏覽，但是輸入網址之後、為了要顯示網站的內容，我們可能必須擷取幾十個，甚至是數百個不同的資源（加起來高達幾百萬位元組的...

iamya ‧ 2016-12-24

9 Like 1 留言 16069 瀏覽

鐵人賽 Modern Web DAY 8

30 天 Progressive Web App 學習筆記系列第 8 篇

達標好文技術 Day 08 - 30 天 Progressive Web App 學習筆記 - Critical Render Path

昨天分享 RAIL Model 的觀念時，有參考 Measure Performance with the RAIL Model 這篇文章，而文章裡有提到 Cr...

iamya ‧ 2016-12-23

5 Like 0 留言 15099 瀏覽

鐵人賽 Modern Web DAY 7

30 天 Progressive Web App 學習筆記系列第 7 篇

技術 Day 07 - 30 天 Progressive Web App 學習筆記 - RAIL Model

什麼是 RAIL Model？圖片來源：Performance RAIL's RAIL Model 是由 Google 所提出，針對效能、以使用者為中心...

iamya ‧ 2016-12-22

7 Like 0 留言 19433 瀏覽

鐵人賽 Modern Web DAY 6

30 天 Progressive Web App 學習筆記系列第 6 篇

技術 Day 06 - 30 天 Progressive Web App 學習筆記 - App Shell 的執行效益與設計方向?

上一篇的文章提到什麼是 App Shell？ An application shell is the secret to reliably good per...

iamya ‧ 2016-12-21

4 Like 0 留言 19807 瀏覽

鐵人賽 Modern Web DAY 5

30 天 Progressive Web App 學習筆記系列第 5 篇

技術 Day 05 - 30 天 Progressive Web App 學習筆記 - 什麼是 App Shell?

什麼是 App(Application) Shell？ PWA 建構一個 model，將不經常變動的內容(App Shell)和變動的內容(Content)區...

iamya ‧ 2016-12-20

3 Like 1 留言 22355 瀏覽

鐵人賽 Modern Web DAY 4

30 天 Progressive Web App 學習筆記系列第 4 篇

技術 Day 04 - 30 天 Progressive Web App 學習筆記 - Client render & Server render

為什麼要講 Client render & Server render？希望能夠藉由說明 Client render 和 Server render...

iamya ‧ 2016-12-19

7 Like 1 留言 89924 瀏覽

鐵人賽 Modern Web DAY 3

30 天 Progressive Web App 學習筆記系列第 3 篇

達標好文技術 Day 03 - 30 天 Progressive Web App 學習筆記 - 什麼是 PWA?

什麼是 PWA? 圖片來源：webunlimited PWA 全名是 Progressive Web App，依照字面上來解釋為『漸進式』的網站應用程式，...

iamya ‧ 2016-12-18

4 Like 5 留言 39513 瀏覽

鐵人賽 Modern Web DAY 2

30 天 Progressive Web App 學習筆記系列第 2 篇

達標好文技術 Day 02 - 30 天 Progressive Web App 學習筆記 - 為什麼需要 PWA?

為什麼需要 PWA? 很多人認為網頁沒辦法跟原生的 APP 相提並論，因為網站沒辦法像原生 APP 一樣快速、可靠、高互動等等 PWA 的出現就是希望能改變這個...

iamya ‧ 2016-12-17

技術 APP開發 – PWA (1/2)

技術 Day 30 - 30 天 Progressive Web App 學習筆記 - 最終回《也是一個新的開始》

技術 Day 29 - 30 天 Progressive Web App 學習筆記 - 介紹 Offline Storage

技術 Day 28 - 30 天 Progressive Web App 學習筆記 - To-Do List 搭配 React + Redux 實作 PWA

技術 Day 27 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - 完成 React + Redux 專案架構與功能

技術 Day 26 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - React + Redux + Webpack 環境建置

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

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

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

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

技術 Day 21 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - Web App Manifest File

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

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

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

技術 Day 17 - 30 天 Progressive Web App 學習筆記 - Service Worker - Handling Fetch Requests

技術 Day 16 - 30 天 Progressive Web App 學習筆記 - Service Worker - Clearing Old Cache

技術 Day 15 - 30 天 Progressive Web App 學習筆記 - Service Worker - Setting up the Default Cache

技術 Day 14 - 30 天 Progressive Web App 學習筆記 - 實作 Registering the Service Worker

技術 Day 13 - 30 天 Progressive Web App 學習筆記 - 環境建置 ( json-server、http-server 、concurrently )

技術 Day 12 - 30 天 Progressive Web App 學習筆記 - PWA 案例介紹

技術 Day 11 - 30 天 Progressive Web App 學習筆記 - Chrome devTools - Introducing the Application tab

技術 Day 10 - 30 天 Progressive Web App 學習筆記 - Service Work 簡介

技術 Day 09 - 30 天 Progressive Web App 學習筆記 - Optimizing Content Efficiency

達標好文 技術 Day 08 - 30 天 Progressive Web App 學習筆記 - Critical Render Path

技術 Day 07 - 30 天 Progressive Web App 學習筆記 - RAIL Model

技術 Day 06 - 30 天 Progressive Web App 學習筆記 - App Shell 的執行效益與設計方向?

技術 Day 05 - 30 天 Progressive Web App 學習筆記 - 什麼是 App Shell?

技術 Day 04 - 30 天 Progressive Web App 學習筆記 - Client render & Server render

達標好文 技術 Day 03 - 30 天 Progressive Web App 學習筆記 - 什麼是 PWA?

達標好文 技術 Day 02 - 30 天 Progressive Web App 學習筆記 - 為什麼需要 PWA?

標記使用者

達標好文技術 Day 08 - 30 天 Progressive Web App 學習筆記 - Critical Render Path

達標好文技術 Day 03 - 30 天 Progressive Web App 學習筆記 - 什麼是 PWA?

達標好文技術 Day 02 - 30 天 Progressive Web App 學習筆記 - 為什麼需要 PWA?