Một khoá học phân tích mọi khía cạnh của quá trình phát triển ứng dụng web tiến bộ hiện đại.
Khoá học này trình bày các kiến thức cơ bản về cách Phát triển ứng dụng web tiến bộ theo những nội dung dễ hiểu. Trong các mô-đun sau, bạn sẽ tìm hiểu về Progressive Web App, cách tạo một ứng dụng web hoặc nâng cấp nội dung web hiện có và cách thêm tất cả các thành phần cho một ứng dụng ngoại tuyến, có thể cài đặt. Sử dụng ngăn trình đơn để di chuyển các mô-đun. (Trình đơn ở bên trái trên máy tính hoặc phía sau trình đơn ba đường kẻ trên thiết bị di động.)
Bạn sẽ tìm hiểu các kiến thức cơ bản về PWA như Tệp kê khai ứng dụng web, trình chạy dịch vụ, cách thiết kế cho ứng dụng, cách sử dụng các công cụ khác để kiểm thử và gỡ lỗi PWA. Sau những kiến thức cơ bản này, bạn sẽ tìm hiểu về việc tích hợp với nền tảng và hệ điều hành, cách nâng cao trải nghiệm cài đặt và sử dụng PWA cũng như cách cung cấp trải nghiệm ngoại tuyến.
Mỗi học phần đều có các bản minh hoạ có tính tương tác và bài tự đánh giá để bạn kiểm tra kiến thức của mình. Bạn sẽ có thể kiểm thử và chạy thử các bản minh hoạ trên điện thoại di động, máy tính bảng hoặc máy tính xách tay trong khi chơi với mã để hiểu những nguyên tắc cơ bản về điều tạo nên một Ứng dụng web tiến bộ.
Khoá học này dành cho cả nhà phát triển web mới bắt đầu cũng như nhà phát triển web nâng cao. Bạn có thể xem qua loạt video từ đầu đến cuối để nắm được kiến thức chung về PWA từ đầu đến cuối, hoặc bạn có thể sử dụng làm tài liệu tham khảo cho các chủ đề cụ thể. Đối với người mới làm quen với việc phát triển web, bạn cần có nền tảng về HTML, CSS và JavaScript để theo dõi. Hãy xem Tìm hiểu về CSS cũng như các khoá học HTML và JavaScript trên MDN.
Sau đây là những nội dung bạn sẽ tìm hiểu:
Bắt đầu
Nếu muốn xây dựng một Ứng dụng web tiến bộ, có thể bạn sẽ băn khoăn không biết bắt đầu từ đâu, liệu có thể nâng cấp một trang web lên PWA mà không cần bắt đầu từ đầu hay không, hoặc làm cách nào để chuyển từ một ứng dụng dành riêng cho nền tảng sang PWA. Bài viết này sẽ giúp bạn trả lời những câu hỏi trên.
Kiến thức cơ bản
Tất cả các Ứng dụng web tiến bộ đều là trang web hiện đại và cốt lõi, vì vậy điều quan trọng là trang web của bạn phải có một nền tảng vững chắc về thiết kế đáp ứng, thiết bị di động và mọi thứ trước tiên, thiết kế nội tại và hiệu suất web.
Thiết kế ứng dụng
Một trong những khác biệt chính giữa Ứng dụng web tiến bộ và trang web và ứng dụng web cổ điển là khả năng cài đặt. Điều này tạo ra trải nghiệm độc lập được tích hợp nhiều hơn vào nền tảng và hệ điều hành. Việc cài đặt mang lại tính linh hoạt mới và trách nhiệm mới, vì chúng tôi sẽ không có giao diện người dùng của trình duyệt xung quanh nội dung của chúng tôi.
Tài sản và dữ liệu
Progressive Web App là một trang web; tất cả nội dung của trang web đều giống như trên web, nhưng với các công cụ mới giúp những nội dung đó tải nhanh khi trực tuyến và khả dụng khi ngoại tuyến.
Trình chạy dịch vụ
Trình chạy dịch vụ là một thành phần cơ bản của PWA. Chúng cho phép tải nhanh (bất kể mạng), truy cập ngoại tuyến, thông báo đẩy và các khả năng khác.
Lưu vào bộ nhớ đệm
Bạn có thể sử dụng API Bộ nhớ đệm để tải xuống, lưu trữ, xoá hoặc cập nhật các tài sản trên thiết bị. Sau đó, những thành phần này có thể được phân phát trên thiết bị mà không cần yêu cầu mạng.
Phân phát
Khi sử dụng sự kiện tìm nạp của trình chạy dịch vụ, bạn có thể chặn các yêu cầu mạng và phân phát phản hồi bằng các kỹ thuật khác nhau.
Hộp làm việc
Workbox là một tập hợp các mô-đun giúp đơn giản hoá các hoạt động tương tác phổ biến của trình chạy dịch vụ, chẳng hạn như định tuyến và lưu vào bộ nhớ đệm. Mỗi mô-đun giải quyết một khía cạnh cụ thể trong quá trình phát triển trình chạy dịch vụ. Workbox hướng đến việc giúp việc sử dụng trình chạy dịch vụ trở nên dễ dàng nhất có thể, đồng thời cho phép tính linh hoạt để đáp ứng các yêu cầu phức tạp về ứng dụng khi cần.
Dữ liệu ngoại tuyến
Để có trải nghiệm vững chắc khi không có mạng, bạn cần triển khai tính năng quản lý bộ nhớ. Các công cụ như IndexedDB, Cache, Trình quản lý bộ nhớ, Bộ nhớ liên tục và Lập chỉ mục nội dung có thể giúp ích cho bạn.
Cài đặt
Các ứng dụng đã cài đặt rất dễ truy cập và có thể tận dụng một số tính năng tích hợp sâu hơn với hệ điều hành. Tìm hiểu cách cài đặt PWA để nhận được những lợi ích đó.
Tệp kê khai ứng dụng web
Tệp kê khai ứng dụng web là một tệp JSON xác định cách xử lý PWA dưới dạng một ứng dụng đã cài đặt, bao gồm cả giao diện và hành vi cơ bản trong hệ điều hành.
Lời nhắc cài đặt
Đối với các trang web đáp ứng tiêu chí cài đặt PWA, trình duyệt sẽ kích hoạt một sự kiện để nhắc người dùng cài đặt. Tin vui là bạn có thể sử dụng sự kiện này để tuỳ chỉnh lời nhắc và mời người dùng cài đặt ứng dụng của bạn.
Cập nhật
Có thể PWA của bạn cần cập nhật. Chương này cung cấp cho bạn các công cụ để cập nhật nhiều phần của PWA, từ tài sản cho đến siêu dữ liệu.
Tính năng nâng cao
Người dùng mong đợi có được trải nghiệm tốt. Trong chương này, bạn sẽ tìm hiểu cách cải thiện PWA bằng màn hình chờ, lối tắt ứng dụng và cách hoạt động của phiên.
Phát hiện
Việc xác định cách người dùng tương tác với ứng dụng sẽ rất hữu ích trong việc tuỳ chỉnh và cải thiện trải nghiệm người dùng. Ví dụ: bạn có thể kiểm tra xem ứng dụng của mình đã được cài đặt trên thiết bị của người dùng hay chưa và triển khai các tính năng như chuyển hoạt động điều hướng sang ứng dụng độc lập từ trình duyệt.
Tích hợp hệ điều hành
PWA của bạn hiện hoạt động bên ngoài trình duyệt. Chương này đề cập đến cách tích hợp thêm với hệ điều hành sau khi người dùng cài đặt ứng dụng.
Quản lý cửa sổ
Một ứng dụng web tiến bộ (PWA) bên ngoài trình duyệt quản lý cửa sổ riêng. Trong chương này, bạn sẽ tìm hiểu các API và chức năng quản lý cửa sổ trong hệ điều hành.
Các tính năng thử nghiệm
Một số chức năng của PWA vẫn đang được xây dựng và bạn có thể tham gia phát triển những chức năng này. Trong chương này, bạn sẽ tìm hiểu về dự án Fugu, cách đăng ký bản dùng thử theo nguyên gốc và cách sử dụng API thử nghiệm
Công cụ và gỡ lỗi
Chúng ta sẽ khám phá các công cụ có sẵn để phát triển, gỡ lỗi và kiểm thử Ứng dụng web tiến bộ của bạn.
Cấu trúc
Bạn đưa ra một số quyết định khi phát triển PWA, chẳng hạn như tạo một ứng dụng trang đơn hay một ứng dụng nhiều trang, và việc bạn sẽ lưu trữ ứng dụng đó trong thư mục gốc của miền hay trong một thư mục.
Quản lý độ phức tạp
Việc duy trì một ứng dụng web đơn giản có thể phức tạp đến không ngờ. Trong học phần này, bạn sẽ tìm hiểu cách API web hoạt động với việc phân luồng cũng như cách bạn có thể sử dụng API này cho các mẫu PWA phổ biến, chẳng hạn như quản lý trạng thái.
Tính năng
PWA không chỉ gắn với màn hình. Chương này giới thiệu các chức năng hiện tại của PWA liên quan đến phần cứng, cảm biến và mức sử dụng nền tảng.
Lời kết
Các bước tiếp theo và thông tin tham khảo.
Vậy bạn đã sẵn sàng tìm hiểu về PWA chưa?