PWA Lab

[S18_WearComp] PWA Lab 資工四甲 403261168 呂承庭

1.網頁截圖(https://woff52427.github.io/pwa/index.html)

2.功能

提供離線瀏覽的功能,只要有網址,並將網頁加入到主螢幕,隨時隨地都能使用。

3.心得

這次的練習,算是讓自己複習了一些HTML的語法,也讓我對於PWA有更深一層的了解。或許這樣的利用對於資工系的學生而言略有不足,但我想我還是在過程中有不少收穫。

[S18_WearComp] PWA Lab 資工四 402261288 關子揚

1.截圖(https://saku37287.github.io/pwademo/)

 

 

 

 

2.說明功能

介紹最近喜歡看的動畫,拉動時有動畫效果

可以選擇想回到的地方

3.心得

做一個PWA或者HTML其實不難,但要上傳到github就有點煩

因為以為只在github上下載,卻沒有上傳過檔案,對我來說簡直是一場挑戰

從來沒試過做完作業而交不了,現在終於體驗了一回

[S18_WearComp] PWA Lab 醫資二 405570123 張育綾

1.截圖(https://yulingchang.github.io/Wearing/)

2.說明功能

介紹蠟筆小新的人物,運用圖示連結臉書跟ig,

可將網頁拉至手機和電腦桌面使用,在沒有網路離線時也能進入頁面。

3.心得

第一次接觸PWA所以在製作網頁時覺得非常困難,但經過這次作業實作,讓我對PWA有更進一步的認識,相信下次製作網頁一定能更加熟練。

 

[S18_WearComp] PWA Lab 醫資二 405570032 廖冠鈞

1.網頁截圖:

2.功能:

使用service worker讓我們在沒有網路的情況下照樣能在手機和電腦上瀏覽網站。

3.心得:

一開始對pwa很陌生,不知道從何下手,後來按照教學網站的範例去更改自己想要的設定,漸漸的了解pwa的目的和功能,也順便複習了之前的網頁設計,但這都只是剛剛入門而已,希望之後能對pwa和網頁設計有更深入的研究並應用在其他領域。

[S18_WearComp] PWA Lab 資工四甲 403261170 林昱辰

1.截圖 (https://huskylin.github.io/)

電腦畫面

手機畫面

    

 

 

2.說明功能 或 說明與範例不同的地方

是一個可以放文章的部落格,不過架好之後就沒有新增內容過了。

 

3.心得

原本以為是一下下就能用好的東西,但其實蠻花時間的。

尤其閱讀官方文件時,他取名叫做"Your First Progressive Web App"這種非常親民的名稱

[S18_WearComp] PWA Lab 醫資二 405570109 施惟中

一、截圖

二、功能

在網頁中使用service worker的離線使用功能,把網頁放到手機桌布之後即使是在沒有網路的狀態之下也可以瀏覽網站。

三、心得

因為平時在code的練習方面較不熟悉,而且第一次嘗試PWA這項工具,剛開始的時候真不知從何下手,查了一些資料還有詢問同學後嘗試了氣象預報的範例,後來也在網路上找到許多功能齊全的範例,發現其實PWA的用處比想像中的還多上許多,是個非常好的輔助工具,但整體而言還不夠熟悉,希望未來有閒暇時可以在這方面多加涉略。

[S18_WearComp] PWA Lab 醫資二 405570109 施惟中

一、截圖

二、功能

在網頁中使用service worker的離線使用功能,把網頁放到手機桌布之後即使是在沒有網路的狀態之下也可以瀏覽網站。

三、心得

因為平時在code的練習方面較不熟悉,而且第一次嘗試PWA這項工具,剛開始的時候真不知從何下手,查了一些資料還有詢問同學後嘗試了氣象預報的範例,後來也在網路上找到許多功能齊全的範例,發現其實PWA的用處比想像中的還多上許多,是個非常好的輔助工具,但整體而言還不夠熟悉,希望未來有閒暇時可以在這方面多加涉略。

[S18_WearComp] PWA Lab 醫資二 405570343 李秉晨

1.截圖

2.說明功能

把標題移到中間並且加大

把城市名稱和選項翻譯成中文

增加了台北台灣和新北市台灣的天氣選項

改了標題字體成monospace

改了標題,標題背景,氣象背景,網頁背景的顏色

3.心得

這次的PWA作業很難,花了非常多時間在上面,光是要搞懂PWA和Service Worker就用全部的時間,尤其是Service Worker真的是非常難懂,PWA是一個非常的方便和實用的東西,以後還要多多加油去理解PWA。

 

頁面