iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

30天走訪Progressive Web Apps(PWAs) 系列

網頁的世界從簡單的HTML一路變得越來越複雜(CSS、JS、RWD等等),想要滿足使用者的需求,
我們就必須不斷的學習,深入PWAs除了學習它有趣的特色以外,我們應該不停地思考,
是否真的需要新技術與這個技術所解決的目的是否真的是我們所需要的,
才不會讓自己誤入盲從的境地,透過這30天深入了解PWAs概念與實作來深入學習它有趣的地方。

鐵人鍊成 | 共 30 篇文章 | 95 人訂閱 訂閱系列文 RSS系列文 團隊神功護體
DAY 1

Day1-What and Why Progressive Web Apps(PWAs)?

關於漸進式網頁(PWAs) What are Progressive Web Apps(PWAs)? Progressively enhance web ap...

2017-12-18 ‧ 由 DK.Harry 分享
DAY 2

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

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

2017-12-19 ‧ 由 DK.Harry 分享
DAY 3

Day3 - 專案環境建設(含專案檔)

專案環境介紹 本來打算文章安排上,先將概念全部看過一次之後,在開始寫程式,但我想程式還是編寫邊看邊學,來的更容易理解。因此,今天就來建置一個基本的網頁後(已先為...

2017-12-20 ‧ 由 DK.Harry 分享
DAY 4

Day4 -Web邁向Native App的第一步-Manifest File

什麼是Manifest File? 官方解釋 The web app manifest is a simple JSON file that gives yo...

2017-12-21 ‧ 由 DK.Harry 分享
DAY 5

Day5 -Manifest File 之 IOS的替代方案及App Install Event實作

icon 替代方案 Chrome & Opera :避免icon變形,可以指定sizes尺寸。 <link rel="icon&qu...

2017-12-22 ‧ 由 DK.Harry 分享
DAY 6

Day6- Service Worker終結小恐龍的命運(觀念篇)

今天要來介紹Service Worker終結小恐龍的利器啦。 支援度 根據Is Service Worker Ready網站顯示,目前Chrome和FireF...

2017-12-23 ‧ 由 DK.Harry 分享
DAY 7

Day7-Service Worker 走訪Lifecyle(程式篇)

昨日我們過目Service Worker的生命週期後,今天第一步,在專案/public,底下建立一個service-worker的js檔案。檔案名稱可以隨自己開...

2017-12-24 ‧ 由 DK.Harry 分享
DAY 8

Day8-Fetch API與Promise 使用方式介紹

在練習fetch之前,讓我們先談談promise,再PWAs裡面,很常會看到promise的蹤影,像在一開始註冊的時候,就會回傳promise型別,如果成功就會...

2017-12-25 ‧ 由 DK.Harry 分享
DAY 9

Day9-Service Worker中的Fetch事件

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

2017-12-26 ‧ 由 DK.Harry 分享
DAY 10

Day10-Cache API -PreCache基礎

為什麼需要Cache? 網站的缺點很明顯,在訊號不穩的地方,通常就會看到載入的畫面一直一直轉。然後你就會開始不耐煩,接著就關掉網頁。 於是快取的用途就出現啦~,...

2017-12-27 ‧ 由 DK.Harry 分享