Bài giảng: PWA - Phát triển ứng dụng web

Bài giảng Phát triển ứng dụng web Lê Đình Thanh VNU-UET Email: thanhld@vnu.edu.vn Mobile: 0987.257.504 Website: https://uet.vnu.edu.vn/~thanhld PWA Progressive Web Application Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Giới thiệu PWA  PWA ứng dụng web có khả khai thác tính đại trình duyệt nhằm cải thiện dần trải nghiệm người dùng  Ba yếu tố khái niệm PWA PWA ứng dụng web PWA phát triển công nghệ web (HTML, JavaScipt, CSS) ứng dụng web thơng thường khai thác tính đại trình duyệt Service worker, fetch API, client cache, push notification, IndexedDB gần W3C đưa vào đặc tả cải thiện dần trải nghiệm người dùng Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Giới thiệu PWA  Ba yếu tố khái niệm PWA (tiếp) cải thiện dần trải nghiệm người dùng    Trình duyệt khơng hỗ trợ tính đại  PWA hoạt động website thơng thường Trình duyệt hỗ trợ phần tính đại  PWA tận dụng tính hỗ trợ để làm cho trải nghiệm tốt Trình duyệt hỗ trợ tất tính đại  PWA hoạt động native app Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Trải nghiệm người dùng Traditional website Rich AJAX webapp webapp Native app Các tính đại trình duyệt hỗ trợ PWA Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Lợi ích PWA  Cho người dùng  Hiệu cao, hấp dẫn đàn hồi  Như native app  đặt Home Screen, làm việc offline,  Không phải cài đặt  Cho nhà phát triển  Một source code  Không phải học công nghệ khác Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Có thể chuyển website có trở thành PWA  cách áp dụng cơng nghệ web đại Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Dean Alan Hume, "Progressive Web Apps", page " Let’s say your online business is a newspaper that people visit to discover more about their local area If you know that people regularly visit your site and read multiple pages, why not cache those pages ahead of time for them so they can read the information completely offline? Or imagine your web app is for a charity that has volunteers working in areas with limited or no connectivity The features of a PWA would allow you to build an offline app that lets them collect information in the field with no network connection As soon as they come back to the office or to an area with connectivity, the data can sync back to the server Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Service Worker (SW) Lê Đình Thanh, Bài giảng Phát triển ứng dụng web SW  Là thành phần quan trọng để tạo PWA  Là đối tượng JavaScript  Chạy ngữ cảnh worker toàn cục  chế độ  Luồng (thread) riêng độc lập với luồng trang  Khơng đồng (async)  Không gắn với trang web cụ thể  Không thể thay đổi DOM trang web  Chỉ chạy sử dụng HTTPS Lê Đình Thanh, Bài giảng Phát triển ứng dụng web 10 ... thiệu PWA  Ba yếu tố khái niệm PWA (tiếp) cải thiện dần trải nghiệm người dùng    Trình duyệt khơng hỗ trợ tính đại  PWA hoạt động website thơng thường Trình duyệt hỗ trợ phần tính đại  PWA. .. tính đại trình duyệt nhằm cải thiện dần trải nghiệm người dùng  Ba yếu tố khái niệm PWA PWA ứng dụng web PWA phát triển công nghệ web (HTML, JavaScipt, CSS) ứng dụng web thông thường khai thác.. .PWA Progressive Web Application Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Giới thiệu PWA  PWA ứng dụng web có khả khai thác tính đại trình