Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Progressive Web Apps (PWA) - The Complete Guide

Progressive Web Apps (PWA) - Hướng Dẫn Toàn Tập

Progressive Web Apps (PWA) - Hướng Dẫn Toàn Tập

Xây dựng một Progressive Web App (PWA) có cảm giác như ứng dụng iOS & Android, sử dụng Camera thiết bị, Push Notifications và hơn thế nữa

4.7
(11,457 đánh giá)
68,291 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 749.000đ -93%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
16.0 giờ video
212 bài giảng
1 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 18/03/2026

Bạn sẽ học được gì

Xây dựng ứng dụng web có giao diện và trải nghiệm giống ứng dụng di động gốc cho iOS và Android
Sử dụng service workers để xây dựng ứng dụng web hoạt động không cần kết nối internet (ưu tiên offline)
Tận dụng các tính năng thiết bị như camera và định vị trong ứng dụng web của bạn
Sử dụng web push notifications để tăng tương tác người dùng với ứng dụng web

Yêu cầu

Yêu cầu kiến thức cơ bản về HTML, CSS và JavaScript
KHÔNG yêu cầu kinh nghiệm với các framework JavaScript

Đối tượng phù hợp

Học viên muốn xây dựng ứng dụng web có giao diện và hoạt động như ứng dụng di động gốc
Học viên muốn xây dựng ứng dụng web sẵn sàng hoạt động offline (có, hoàn toàn khả thi!)
Bất kỳ ai muốn xây dựng ứng dụng web có thể truy cập camera thiết bị, định vị, push notifications và hỗ trợ offline
Học viên muốn tận dụng các tính năng trình duyệt mới nhất trong khi vẫn hỗ trợ trình duyệt cũ

Nội dung khóa học

14 phần • 208 bài giảng
1 Giới thiệu về Khóa học
2 Progressive Web Apps là gì?
3 Tham gia Cộng đồng Học trực tuyến của chúng tôi
4 So sánh PWAs và Ứng dụng Di động Gốc
5 Tải xuống Node.js
6 Demo PWA & Ứng dụng chúng ta sẽ xây dựng trong khóa học
7 Progressive Web App Đầu tiên của chúng ta
8 Các Khối Xây dựng Cốt lõi của PWA
9 So sánh PWAs và SPAs
10 "Progressive Enhancement" là gì?
11 Đề cương Khóa học
12 Thiết lập Dự án Khóa học
13 Cách tận dụng tối đa khóa học này
1 Giới thiệu Mô-đun
2 Sử dụng App Manifest để làm cho Ứng dụng của bạn Có thể Cài đặt
3 Thêm Manifest
4 Hiểu các Thuộc tính của App Manifest
5 Thêm Thuộc tính vào App Manifest
6 PWAs và Hỗ trợ Trình duyệt
7 Sử dụng Công cụ Dành cho Nhà phát triển Chrome
8 Mô phỏng Ứng dụng web trên Trình giả lập
9 Chuẩn bị Thiết bị Giả lập cho TẤT CẢ Tính năng PWA
10 Cài đặt Ứng dụng web - Điều kiện Tiên quyết
11 Thêm Thuộc tính cho Safari
12 Thêm Thuộc tính cho Internet Explorer
13 Tổng kết
14 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tại sao Service Workers lại Tuyệt vời!
3 Hiểu về Sự kiện Service Worker
4 Vòng đời Service Worker
5 Hỗ trợ Trình duyệt cho Service Worker
6 Đăng ký một Service Worker
7 Phản ứng với Sự kiện Đến (trong SW)
8 Cập nhật & Kích hoạt Service Workers
9 Sự kiện Không thuộc Vòng đời
10 Biểu ngữ Cài đặt Ứng dụng & Chrome 68+
11 Có được "Biểu ngữ Cài đặt Ứng dụng"
12 Kết nối Công cụ Dành cho Nhà phát triển Chrome với Thiết bị Thực/ Giả lập
13 Kiểm tra Ứng dụng trên Thiết bị Thực (và Cài đặt Ứng dụng!)
14 Hoãn Biểu ngữ Cài đặt Ứng dụng
15 Tổng kết
16 Câu hỏi Thường gặp về Service Worker
17 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Mã Bất đồng bộ trong JavaScript
3 Promise - Cơ bản
4 Từ chối Promise
5 Nơi chúng ta Sử dụng Promise trong Dự án
6 Fetch - Cơ bản
7 Gửi Yêu cầu Post qua Fetch
8 Fetch và CORS
9 So sánh Fetch và Ajax
10 Thêm Polyfills (để hỗ trợ Trình duyệt Cũ)
11 Fetch & Service Workers
12 [TÙY CHỌN] Lời giải Bài tập
13 Tổng kết
14 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tại sao cần Caching?
3 Hiểu về Cache API
4 Hỗ trợ Trình duyệt
5 Điều chỉnh Dự án Khóa học
6 Xác định các Mục có thể (Tiền-)Cache
7 Caching Tĩnh/ Tiền Cache
8 Truy xuất Mục từ Cache
9 Thêm & Truy xuất Nhiều Tệp (vào/ từ Cache)
10 Cache Nhiều Tệp với addAll
11 Caching Động - Cơ bản
12 Triển khai Caching Động
13 Xử lý Lỗi
14 Thêm Phiên bản Cache
15 Các Phiên bản Cache Khác nhau & Dọn dẹp
16 Tối ưu hóa Quản lý Cache
17 [TÙY CHỌN] Lời giải Bài tập
18 Tổng kết
19 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Chuẩn bị Mô-đun: Thêm một Nút bấm
3 Cung cấp "Cache theo Yêu cầu"
4 Cung cấp Trang Dự phòng Offline
5 Chiến lược: Cache với Dự phòng Mạng
6 Chiến lược: Chỉ Cache
7 Chiến lược: Chỉ Mạng
8 Chiến lược: Mạng với Dự phòng Cache
9 Chiến lược: Cache rồi Mạng
10 Cache rồi Mạng & Caching Động
11 Cache rồi Mạng với Hỗ trợ Offline
12 Chiến lược Cache & "Định tuyến"
13 Áp dụng Chỉ Cache
14 [TÙY CHỌN] Lời giải Bài tập
15 Cách Tốt hơn để Phân tích URL Cache Tĩnh
16 Làm cho Khớp Định tuyến Chính xác hơn
17 Cách Tốt hơn để Phục vụ Tệp Dự phòng
18 Yêu cầu Post và Cache API
19 Dọn dẹp/ Cắt giảm Cache
20 Loại bỏ một Service Worker
21 Chuẩn bị Dự án cho Các bước Tiếp theo
22 Tổng kết
23 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Hiểu những Điều cơ bản
3 Bố cục Bảng điều khiển Firebase đã Thay đổi
4 Thiết lập Firebase
5 Kết nối Frontend với Backend
6 Caching Động vs. Caching Nội dung Động
7 Giới thiệu IndexedDB
8 Hỗ trợ Trình duyệt cho IndexedDB
9 Thêm Tệp IDB
10 Lưu trữ Bài viết Đã tải trong IndexedDB
11 Sử dụng IndexedDB trong Service Worker
12 Đọc Dữ liệu từ IDB
13 Xóa IDB & Xử lý Không khớp Máy chủ-Máy khách
14 Triển khai Phương thức Xóa Cơ sở dữ liệu
15 Xóa Mục Đơn lẻ khỏi Cơ sở dữ liệu
16 IndexedDB và Chiến lược Caching
17 Tổng kết
18 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Thiết kế Đáp ứng trong Khóa học này
3 Hiểu Thiết kế Đáp ứng trong Dự án của chúng ta
4 CSS và Media Queries
5 Muốn xem thêm Hình ảnh của bạn?
6 Sử dụng Hình ảnh một cách Đáp ứng
7 Thêm Hiệu ứng Hoạt hình
8 Viewport & Tỷ lệ Thu phóng
9 Tổng kết
10 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Đồng bộ Nền hoạt động như thế nào?
3 Thêm Thiết lập Cơ bản vào Dự án của chúng ta
4 Đăng ký một Tác vụ Đồng bộ hóa
5 Lưu trữ Bài viết của chúng ta trong IndexedDB
6 Thêm Dự phòng
7 Đồng bộ Dữ liệu trong Service Worker
8 Hiểu về Đồng bộ Định kỳ
9 PHẢI ĐỌC: Firebase Cloud Functions & Thanh toán
10 Thêm Mã Phía Máy chủ
11 Sửa Lỗi
12 Tổng kết
13 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tại sao chúng ta cần Web Push Notifications
3 Push & Notifications hoạt động như thế nào
4 Hiển thị Notifications - Một chút Lý thuyết Trước
5 Hỗ trợ Trình duyệt
6 Yêu cầu Quyền
7 Hiển thị Notifications
8 Notifications từ Bên trong Service Worker
9 Hiểu các Tùy chọn của Notifications
10 Tùy chọn Nâng cao
11 Thêm Hành động vào Notifications
12 Phản ứng với Tương tác Notification - Nhấp chuột
13 Phản ứng với Tương tác Notification - Đóng
14 Từ Notifications đến Tin nhắn Push
15 Tạo một Đăng ký Push
16 Lưu trữ Đăng ký
17 Kết nối Máy chủ & Máy khách (PWA)
18 Gửi Tin nhắn Push từ Máy chủ
19 Lắng nghe Tin nhắn Push
20 Hiển thị Push Notifications trên Thiết bị Thực
21 Mở Trang khi Người dùng Tương tác
22 Cải thiện Mã của chúng ta
23 Tổng kết
24 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Chuẩn bị Dự án
3 Truy cập DOM
4 Tạo Polyfills của riêng chúng ta
5 Lấy Hình ảnh Video
6 Kết nối Nút bấm Chụp
7 Lưu trữ Hình ảnh trên Máy chủ
8 Ví dụ Chấp nhận Tải lên Tệp với Firebase
9 PHẢI ĐỌC: Thay đổi Bắt buộc đối với Mã Cloud Function
10 Kiểm tra Camera & Tải lên
11 Triển khai Dự phòng
12 Lấy Vị trí Người dùng
13 Sửa lỗi
14 Kiểm thử ứng dụng trên thiết bị thực
15 Tổng kết
16 Tài nguyên & Liên kết hữu ích
1 Giới thiệu mô-đun
2 Tìm hiểu kiến thức cơ bản
3 Phiên bản Workbox được sử dụng trong khóa học
4 Cài đặt và sử dụng Workbox
5 Cấu hình Workbox Precaching
6 Tùy chỉnh Service Worker
7 Triển khai định tuyến với Workbox Router
8 Mở rộng bộ nhớ đệm động
9 Tùy chọn và thiết lập chiến lược
10 Xử lý tùy chỉnh (Ví dụ: Cho IndexedDB)
11 Cung cấp trang HTML dự phòng khi ngoại tuyến
12 Xử lý đồng bộ hóa nền và thông báo đẩy
13 Tìm hiểu tài liệu Workbox
14 Nâng cao quy trình xây dựng
15 Chạy ứng dụng trên máy chủ thực
16 Kiểm tra trang web với Lighthouse
17 Tổng kết
18 Tài nguyên & Liên kết hữu ích
1 Giới thiệu mô-đun
2 React với create-react-app
3 Lưu ý chung về SPA và PWA
4 Angular với CLI
5 Vue với Vue CLI
6 Tổng kết
7 Tài nguyên & Liên kết hữu ích
1 Tổng kết khóa học
2 Phần thưởng: Thêm nội dung!

Giới thiệu khóa học

Progressive Web Apps (PWAs) bring mobile-app-like experiences to your users without requiring them to install an app from the app store/ play store.

You still create a web application (HTML, CSS, JavaScript) but this course will teach you how to add features such as camera access, service workers for offline support, push notifications and more. This combines the best of both worlds: You deliver fast, engaging and reliable experiences whilst still having the reach and accessibility of a web page.

"Progressive Web App" simply is a term summarizing all the features allowing you to deliver mobile-like experiences. The topic is highly trending and it also is a topic which is here to stay! Not only is it strongly promoted by Google, it's also quickly being adopted by big companies like Twitter or the Washington Post.

Having the skills to build and optimize these kind of web apps is already an important and highly demanded skill for modern web developers, a trend which is only going to accelerate! Therefore, learning how to build PWAs will give you a competitive edge!

In detail, this course will cover everything you need to build amazing PWAs - leading to a score of 100 (out of 100) in Google's PWA auditing tool "Lighthouse":

  • Detailed explanation about what a PWA exactly is

  • How to use an app manifest to make your web app installable on device homescreens

  • Using service workers to offer offline support by caching assets

  • Advanced service worker usage and caching strategies

  • A refresher on Promises and the Fetch API as both concepts are heavily used in PWAs

  • How to improve user engagement by adding push notifications

  • A way to synchronize data in the background, even if connection is lost

  • How to access native device features like the camera or geolocation

  • Using Workbox to make service worker management easier

  • Explanations on how to turn your next SPA project into a PWA

  • And more

All these things are of course put into practice by building a course project. To ensure that you can apply the knowledge to ANY of your projects, the course project doesn't assume any JavaScript framework but focuses on the core features mentioned above!

So this course has a lot to offer, how do you tell if it's for you though?

It definitely is the right choice if

  • you already are a web developer (no matter if experienced or still new to the business) and want to prepare for the future

  • you enjoy working with HTML, CSS and JavaScript and want to leverage the full power the web and browser technologies have to offer

  • you want to deliver the best possible experiences to your users, using technologies like web push notifications or offline support

What do you need to know to get the most out of the course?

  • You need to know at least the basics of HTML, CSS and JavaScript

  • No advanced knowledge of these technologies required though

  • You DON'T need to know any JavaScript framework like Angular or React - PWAs work with ANY JavaScript app, even if you don't use a framework at all (actually, that's what we'll build in the course!)

I'd be very happy to welcome you on board of this course and start this journey together with you!

Max

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Mobile Development
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊