PWA Lab

[S18_WearComp] PWA Lab 資工四甲 403261625 張耀仁

1.截圖

     

2.說明功能

按下Reset 可以查詢最新颱風動態,查詢最靠近我們的是輕度、中度還是重度颱風,並且知道颱風距離我們還有多遠。

3.心得

之前沒有碰過PWA,所以這次的作業先看官方的教學範例去學習PWA,雖然還沒有完全理解,但還是有盡力去做,也覺得有學習到一些新東西,雖然這只是一次作業,但我之後還是會再繼續學習,並且去新增加強其他的功能,做出一個功能更完善、更好的作品。

[S18_WearComp] PWA Lab 醫資二 405570173 林芸妗

1. 截圖(有網址的話就附上)

 

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

功能:

在離線的情況下,仍能顯示近7天的天氣狀況,在完善的狀態下,能提供最即時的天氣資訊。

可以透過右上方按鈕新增城市的氣候狀況及重整頁面,並保留已經新增的項目。

隨著設備的不同,響應式用戶介面使得畫面就算大小改變仍能顯示完整資訊。

 

與範例不同之處:

更改了title及透過HTML和CSS做了一些美化(顏色的調整),並將圖片換成其他圖示,且增加新的地點(台北、東京)之天氣。

另外,在畫面上方增加跑馬燈,作用為提醒使用者將有一場大雨,並記得攜帶雨具。

 

3. 心得

按照官方的教學範例逐步完成整個PWA,雖然並沒有完全理解每一個步驟,但還是盡力去消化吸收。這次因為有一些功能還不是很熟悉,所以仍把重點著重在以往所學的美化的部分,覺得有新學到東西也有複習到一些語法,不過仍希望未來能再繼續嘗試,並強化功能部份的實作,做出一個符合自己期待的PWA。

[S18_WearComp] PWA Lab 醫資二 405570290 郭葦恩

1.截圖

網址https://kuoweien.github.io/cartoon%20network/PWA/PWA/

     (1)電腦截圖

          在電腦上的效果,且處於離線狀態

          將PWA加至電腦主畫面

     (2)手機截圖

          在手機上的效果,且處於離線狀態​


          將PWA加至手機主畫面

[S18_WearComp] PWA Lab 醫資二 405570226胡瀚文

1. 截圖

電腦版

手機版

2. 說明功能

在手機上用chrome瀏覽器開啟網頁後,可以選擇加到主畫面,這時候會跳出我們自己定義的圖標和名字的對話框,新增到主畫面後可以直接從主畫面點選進入網頁,但是顯示的畫面是如同APP的樣式,上面不會出現網址等類似網頁的元素,而手機離線後可以繼續瀏覽裡面的內容。在電腦上也能加到電腦桌面,並於離線之後進行讀取。

3. 心得

這次的作業在一開始的時候,因為對於PWA不是很了解,所以花了很長一段時間在查詢如何進行實作,而在查詢的過程中,也因此了解到更多關於PWA的相關知識及應用。

[S18_WearComp] PWA Lab 醫資二 405570226胡瀚文

1. 截圖

電腦版

手機版

2. 說明功能

在手機上用chrome瀏覽器開啟網頁後,可以選擇加到主畫面,這時候會跳出我們自己定義的圖標和名字的對話框,新增到主畫面後可以直接從主畫面點選進入網頁,但是顯示的畫面是如同APP的樣式,上面不會出現網址等類似網頁的元素,而手機離線後可以繼續瀏覽裡面的內容。在電腦上也能加到電腦桌面,並於離線之後進行讀取。

3. 心得

這次的作業在一開始的時候,因為對於PWA不是很了解,所以花了很長一段時間在查詢如何進行實作,而在查詢的過程中,也因此了解到更多關於PWA的相關知識及應用。

[S18_WearComp] PWA Lab 資工三乙 404012150 周俊立

添加到主頁面:

主頁面圖標:

手機版頁面:

離線使用:

 

功能:按下change reset能切換不同的圖片。

心得:學習service worker用了不少時間,閱讀教程之後對pwa的運作以及實作有了一定的了解。

網址:zhq123333.github.io

頁面