iT邦幫忙

pwa相關文章
共有 36 則文章
鐵人賽 Modern Web DAY 30

技術 Day30-Angular5實作PWA及完賽心得

Angular5 GitHub: Angular cli 透過cli快速建置一個Angular的專案。 安裝環境 npm install -g @ang...

鐵人賽 Modern Web DAY 22

技術 Day22-就是偏要在無網路情況下送表單(Background Sync)

截至目前為止,已經可以順利在Offline的情境下, 正常瀏覽網站內容,也能暫存網站的內容到客戶端的DB, 但如果網站頁面上,很常會有表單的需求,例如,註冊會員...

鐵人賽 Modern Web DAY 9

技術 Day9-Service Worker中的Fetch事件

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web DAY 6

技術 Day6 全員耍廢中(中) Mobile設計

延續昨天行動版要素,其實不僅僅適用於行動版網頁的設計,比方說測試這件事情對在開發來說是非常重要的,如果你的網站中沒有那麼多的臭蟲,相對於臭蟲多的地方,你的網站更...

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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