fbpx

Progressive Web Apps (PWA) 完整開發指南

Contents

建構一個感覺像 iOS 和 Android 原生應用程式的 Progressive Web apps(PWA),並可使用手機中的相機,定位,推播通知等硬體功能

課程介紹影片

從這 16 個小時的課程,你會學到

  • 建立外觀和感覺像原生 iOS 和 Android Apps 的 Web 應用程式
  • 使用 service workers 建立沒有網路連接時還可以運作的網頁應用程式(離線優先)
  • 在你的網頁應用程式中應用手機裝置的相機和地理位置功能
  • 使用網頁推播通知來增加用戶與你的網頁應用程式互動

要求

  • 需要基本的 HTML,CSS 和 JavaScript 知識
  • 不需要 JavaScript 框架使用經驗

說明

漸進式網頁應用程式(簡稱 PWA)是網頁開發中的下一件大事,因為它們為用戶帶來了類似手機原生應用程式的體驗,而不需要從 app store/ play store 下載安裝。

你仍然是建立一個網頁應用程式(HTML,CSS,JavaScript),但本課程將教你如何添加功能,如使用手機的相機,離線支援的 service workers ,推播通知等。 這結合了兩個世界中最好的優點:你提供快速,有吸引力和可靠的體驗,同時仍然具有網頁的可到達和可訪問性。

“PWA ”只是概述所有功能的術語,可讓你提供手機應用程式類似的體驗。 這個主題是很熱門的,也是這個課程的內容主題! Google 不但大力推廣( 實際上Google I / O 2017開發者大會,很多會議專門討論了 PWAs),很快就被 Twitter 或是華盛頓郵報等大公司採用

擁有建構和優化這些類型的網頁應用程式的技能已經成為現代網頁開發人員重要和高度要求的技能,這種趨勢只會加速! 因此,學習如何建立 PWAs 將為你帶來競爭優勢!

詳細來說,本課程將涵蓋讓你建立令使用者經驗的 PWA 所需要的所有內容,並通過使用 Google 的 PWA 審核工具“Lighthouse” 獲得100分:

  • 詳細說明 PWA 究竟是什麼
  • 如何使用一個 app 清單將你的網頁應用程式安裝在手機的主畫面上
  • 使用 service workers 緩存程式內容以提供離線支援
  • 進階的 service worker 使用和緩存策略
  • 在 Promises 和 Fetch API 中使用 refresher ,因為這兩個概念在 PWA 中大量使用
  • 如何通過添加推播通知來提高用戶的參與度
  • 一個可以在背景同步資料的方法,即使在網路失去連線狀況下
  • 如何訪問手機設備的功能例如相機或是地理位置
  • 使用工具箱 ( Workbox ) 使 service worker 的管理變得更加容易
  • 如何將下一個 SPA 專案變成 PWA 的說明
  • 還有更多的內容

所有這些事情當然都是在這一個課程中來實現的。 為了確保你可以將知識應用於你的任何專案,課程中的專案不設想使用任何 JavaScript 框架,但著重於上述核心功能!

所以這個課程提供很多內容,你如何知道這是為你設計的課程?

這絕對是正確的選擇,如果…

  • …你已經是一名網頁開發人員(無論經驗豐富還是剛接觸的新手),並希望為未來做好準備
  • …你喜歡使用 HTML,CSS 和 JavaScript,並希望利用網頁和瀏覽器技術提供的全部功能
  • …你希望通過網頁推播通知或是離線支援等技術向用戶提供最佳體驗

你需要知道什麼才能充分利用本課程?

  • 你至少需要了解 HTML,CSS 和 JavaScript 的基礎知識
  • 不需要這些技術的進階知識
  • 你不需要知道任何 JavaScript 框架,例如 Angular 或是 React- 即使你沒有使用框架,PWAs 可以在任何 Javascript app 環境中運作(實際上這就是我們在課程中建構的)

我很高興在這個課程上歡迎你,並與你一起開始這個旅程!

Max

目標受眾

  • 想要建構外觀和行為像原生手機應用程式的網頁應用程式的人
  • 想要建立離線就緒的網頁應用程式的人(是的,這確實可行!)
  • 任何想要建構網頁應用程式可提供使用手機中的相機,地理定位,推播通知和離線支援
  • 希望利用最新瀏覽器功能並同時支持較舊瀏覽器的人

講師介紹

Maximilian Schwarzmülle 專業 Web 開發者與講師 ( 更多講師主講課程介紹 )

從13歲開始,我從來沒有停止學習新的程式技能和語言。早期我開始為朋友寫網站,純粹好玩。這種熱情一直持續,讓我決定做一名自由網絡開發人員和顧問。我在這工作中獲得很大的成就感與樂趣,這激情到現在仍活生生地在我心裡。

我從後端開始做Web開發(PHP與Laravel、NodeJS),後來也用現代的框架如 Angular 2 或 VueJS 2 在很多專案中做越來越多前端開發。我現在兩種開發世界都很喜歡!

因我是自學而成的開發人員,我有機會經由不同領域的工商管理碩士歷練擴大我的視野。這使我能夠在主要的戰略諮詢公司和銀行工作。在學習中,我發現自己對於開發的喜愛多於其他領域,我花在這個領域的時間大大提高了我的整體的經驗和技能。

經驗與教學

身為一名自學而成的專業人,我真的知道在學習新的或在已知語言上求進步時會遇到什麼難題或哪些會是困難的部分。這種背景和經驗使我能夠專注於最相關的關鍵概念和主題。許多5星級的課程和成功的YouTube頻道上的記錄是最好的證明。

無論是作為開發教練或教學工商管理我總是收到豐盛的回饋。最寶貴的經驗是看到學生找到新的、更好的工作,開發出很棒的 Web 應用程式,取得精彩的專案或在我課程的幫助下將技能變成嗜好享受。

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境?LN+ for Web 已經針對 ChatGPT 的整合做最佳化


🙌 讓 Notion AI 成為你線上學習的得力助手,詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結


  • 點選這個優惠連結 課程特價 | Udemy 永久擁有課程 NT370 起( 請登入 Udemy|按過“優惠連結”後到”報名參加課程“連結網頁做更新 )
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格比電腦上看到的貴
  • $代表當地貨幣, 如在台灣為 NT
  • 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程

Progressive Web Apps

Sponsored by Udemy


你可能會有興趣


不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: