Cảm ơn bạn đã theo dõi Google I/O! Xem nội dung theo yêu cầu.

Trang này được dịch bởi Cloud Translation API.

Theo chân ông già Noel dưới dạng ứng dụng web tiến bộ (PWA)

Tóm tắt

Theo chân ông già Noel đã được nhanh chóng nâng cấp lên Ứng dụng web tiến bộ ngoại tuyến cho mùa lễ năm 2016, nhờ vào cách thiết kế cảnh hiện có của chúng tôi.

Kết quả

Ông già Noel là một Ứng dụng web tiến bộ (PWA) hỗ trợ tính năng thêm vào màn hình chính (ATHS) và chế độ ngoại tuyến
10% số phiên đủ điều kiện bắt đầu thông qua biểu tượng ATHS
75% người dùng vốn đã hỗ trợ các phần tử tuỳ chỉnh và shadow DOM, hai phần cốt lõi của các thành phần web
Điểm số Lighthouse là 81
Hoạt động ngoại tuyến (thông qua Service Worker API) được liên kết với tính năng tải từng phần để chỉ lưu những cảnh đã truy cập vào bộ nhớ đệm và âm thầm nâng cấp chúng khi có bản phát hành mới

Thông tin khái quát

Theo chân ông già Noel là một truyền thống ngày lễ tại Google. Hằng năm, bạn có thể chào mừng mùa lễ này bằng các trò chơi và trải nghiệm giáo dục xuyên suốt tháng 12. Và trong khi ông già Noel nghỉ ngơi xứng đáng, các chú lùn sẽ làm việc để phát hành Theo chân ông già Noel nguồn mở, cả trên web và cho Android.

Trên web, Theo chân ông già Noel là một trang web lớn, tương tác có nhiều 'cảnh' độc đáo—được viết bằng Polymer—hỗ trợ hầu hết các trình duyệt hiện đại. Việc đánh giá xem trình duyệt của người dùng có phải là trình duyệt 'hiện đại' không được xác định thông qua bước phát hiện tính năng: Ông già Noel yêu cầu Set và Web Performance API (API Hiệu suất web), trong số khác.

Vào năm 2016, chúng tôi đã nâng cấp công cụ dựa trên công cụ Theo chân ông già Noel để hỗ trợ trải nghiệm ngoại tuyến cho hầu hết người dùng cảnh. Quy định này không bao gồm những cảnh được hỗ trợ bởi các video trên YouTube hoặc những cảnh liên quan đến địa điểm trực tiếp của ông già Noel, tất nhiên là chỉ có kết nối trực tiếp tới Bắc Cực! 📶☃️

Theo chân ông già Noel trên thiết bị Android

Thử thách

Ông già Noel có thiết kế thích ứng hoạt động tốt trên điện thoại, máy tính bảng và máy tính để bàn. Trang web hài lòng với nội dung đa phương tiện tuyệt vời, bao gồm hình ảnh cách điệu và âm thanh chủ đề ngày lễ. Tuy nhiên, phiên bản Theo chân ông già Noel thông thường là vài trăm megabyte! Điều này là vì một vài lý do:

Ông già Noel được hỗ trợ bằng hơn 35 ngôn ngữ, vì vậy nhiều nội dung phải được sao chép.
Các nền tảng khác nhau sẽ hỗ trợ nội dung nghe nhìn khác nhau (ví dụ: mp3 và ogg).
Tệp đa phương tiện đôi khi được cung cấp ở nhiều kích thước và độ phân giải.

Các chú lùn của ông già Noel cũng chăm chỉ làm việc suốt tháng 12, thường phát hành các bản cập nhật mới, quan trọng suốt cả tháng. Điều này có nghĩa là trình duyệt của người dùng đã lưu vào bộ nhớ đệm các tài sản có thể cần được làm mới trong những lần truy cập lặp lại.

Những thách thức sau:

Tài nguyên đa phương tiện lớn cho nhiều "cảnh"
Các thay đổi được áp dụng trong suốt tháng

...dẫn đến việc áp dụng một chiến lược ngoại tuyến không phù hợp.

Ông già Noel được làm bằng polymer

Chúng ta nên nhìn lại và nói về thiết kế tổng thể của ông già Noel trước khi đi sâu vào cách chúng ta đã nâng cấp ứng dụng lên một ứng dụng web tiến bộ (PWA) ngoại tuyến.

Ông già Noel là một ứng dụng trang đơn, ban đầu được viết bằng Polymer 0.5 và hiện được nâng cấp lên Polymer 1,7. Ông già Noel được tạo thành từ một bộ mã dùng chung—bộ định tuyến, các thành phần chỉ đường dùng chung, v.v. Video này cũng có nhiều 'cảnh' độc đáo.

Mỗi cảnh đều có thể truy cập được thông qua một URL khác nhau: /village.html, /codelab.html và /boatload.html và là thành phần web riêng. Khi người dùng mở một cảnh, chúng tôi sẽ tải trước tất cả HTML và thành phần bắt buộc của cảnh đó (hình ảnh, âm thanh, css, js), thuộc /scenes/[[sceneName]] trong kho lưu trữ Theo chân ông già Noel. Khi điều đó xảy ra, người dùng sẽ thấy một trình tải trước thân thiện hiển thị tiến trình.

Phương pháp này có nghĩa là chúng ta không phải tải các thành phần không cần thiết cho những cảnh mà người dùng không nhìn thấy (rất nhiều dữ liệu). Điều đó cũng có nghĩa là chúng ta cần giữ một 'tệp kê khai bộ nhớ đệm' nội bộ về tất cả tài sản cần thiết cho mọi cảnh. Tệp kê khai bộ nhớ đệm là một tệp JSON lưu trữ mục ánh xạ từ tên tệp đến hàm băm MD5 của nội dung.

Tải những gì bạn sử dụng

Mô hình này giúp tiết kiệm băng thông, chỉ phân phối tài nguyên cần thiết cho các cảnh mà người dùng truy cập, thay vì so với việc tải trước toàn bộ trang web cùng một lúc. Theo chân ông già Noel tận dụng khả năng của Polymer để nâng cấp các phần tử tuỳ chỉnh trong thời gian chạy, thay vì thời gian tải. Hãy xem xét đoạn mã sau:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

Theo chân ông già Noel thực hiện các bước sau để tải một cảnh, ví dụ: boatload-scene:

Tất cả các thành phần cảnh (bao gồm cả <boatload-scene>) ban đầu là không xác định và đều được xử lý là HTMLUnknownElement với một số thuộc tính bổ sung.
Khi cảnh đã chọn bị thay đổi, phần tử <lazy-pages> sẽ được thông báo.
Phần tử <lazy-pages> phân giải phần tử và thuộc tính path của cảnh, tải HTML nhập scenes/boatload/boatload-scene_en.html. Phần tử này chứa phần tử Polymer và các phần tử phụ thuộc của nó.
Trình tải trước thân thiện xuất hiện.
Sau khi nhập HTML được tải và thực thi, <boatload-scene> sẽ được nâng cấp một cách rõ ràng lên nguyên tố polymer thực sự, tràn ngập niềm vui mùa lễ. 🎄🎉

Phương pháp này có một số thách thức riêng. Ví dụ: chúng ta không muốn bao gồm các thành phần web trùng lặp. Nếu 2 cảnh sử dụng một thành phần chung, chẳng hạn như paper-button, chúng tôi sẽ loại bỏ hoạt động này như một phần của bản dựng và thay vào đó đưa mã đó vào mã được chia sẻ của ông già Noel.

Thiết kế ngoại tuyến

Theo chân ông già Noel đã được phân đoạn gọn gàng thành các cảnh nhờ Polymer và lazy-pages; cộng mỗi cảnh có thư mục riêng. Chúng tôi đã thiết kế trình chạy dịch vụ của công cụ Theo chân ông già Noel, phần cốt lõi cho phép hoạt động ngoại tuyến và chạy trên trình duyệt của người dùng, để biết mã được chia sẻ và "cảnh" khác biệt.

Lý thuyết về Service Worker là gì? Khi người dùng trên một trình duyệt được hỗ trợ tải trang web của bạn, HTML giao diện người dùng có thể yêu cầu cài đặt trình chạy dịch vụ. Đối với chiến dịch Theo chân ông già Noel, nhân viên dịch vụ sống tại /sw.js. Thao tác này sẽ kích hoạt một sự kiện install và sẽ lưu trước vào bộ nhớ đệm tất cả mã được chia sẻ của ông già Noel, vì vậy, bạn không cần phải làm gì được tìm nạp trong thời gian chạy.

Sau khi được cài đặt, Service Worker có thể chặn tất cả các yêu cầu HTTP. Đối với công cụ Theo chân ông già Noel, quy trình quyết định được đơn giản hoá sẽ có dạng như sau:

Yêu cầu này đã được lưu vào bộ nhớ đệm chưa?
- Tuyệt vời! Trả về phản hồi đã lưu vào bộ nhớ đệm.
Yêu cầu này có khớp với thư mục cảnh, chẳng hạn như "scene/lmload/khuyến mãi-scene_en.html" không?
- Thực hiện yêu cầu mạng và lưu trữ kết quả trong bộ nhớ đệm trước khi trả về cho người dùng.
Nếu không, hãy yêu cầu kết nối mạng như thông thường.

Quy trình và sự kiện install của chúng tôi cho phép Theo chân ông già Noel tải, ngay cả khi người dùng không có kết nối mạng. Tuy nhiên, bạn sẽ chỉ thấy được những cảnh mà người dùng đã tải trước đó. Tính năng này hoàn hảo để phát lại một trận đấu và vượt qua điểm số cao của bạn.

Những người quan sát quan tâm có thể nhận thấy rằng chiến lược lưu vào bộ nhớ đệm của chúng tôi không cho phép thay đổi nội dung. Khi tệp được lưu vào bộ nhớ đệm trong trình duyệt của người dùng, tệp đó sẽ không bao giờ thay đổi. Chúng ta sẽ nói thêm về điều này ở phần sau.

Chúng tôi sẽ tiến hành thiết lập

Như chúng tôi đã đề cập, các chú lùn của ông già Noel rất chăm chỉ làm việc trong suốt tháng 12 và họ thường phải thả các bản cập nhật mới trong suốt tháng. Khi phiên bản Theo chân ông già Noel được xây dựng, bản phát hành đó sẽ được gắn một nhãn duy nhất, ví dụ: v20161204112055, dấu thời gian phát hành (11:20:55 ngày 4 tháng 12 năm 2016).

Đối với bản phát hành được gắn nhãn này, chúng tôi tạo một hàm băm MD5 cho mọi tệp và lưu trữ tệp này trong bộ nhớ đệm trong tệp kê khai'. Trên ổ đĩa thể rắn hiện đại, thao tác này chỉ thêm vài giây vào quá trình xây dựng.

Mỗi bản phát hành được triển khai cho một đường dẫn riêng trên máy chủ lưu vào bộ nhớ đệm tĩnh của Google. Tức là các bản phát hành cũ sẽ không bao giờ bị xoá. Điều này có nghĩa là sau bản phát hành mới, tất cả các thành phần sẽ có một URL khác – ngay cả khi chúng không có thay đổi—và mọi nội dung được lưu trong bộ nhớ đệm của trình duyệt hoặc trình chạy dịch vụ sẽ đều vô ích, trừ khi chúng tôi thực hiện một số thao tác thực hiện các công việc khác.

Chúng tôi cũng triển khai một phiên bản mới của phiên bản mà chúng tôi gọi là "sản phẩm" tài nguyên—HTML chỉ mục của ông già Noel và dịch vụ worker trên https://santatracker.google.com/. Phiên bản này sẽ thay thế phiên bản cũ.

Bất cứ khi nào Theo chân ông già Noel tải, trình duyệt sẽ kiểm tra xem có worker dịch vụ nào được cập nhật hay không và tìm nạp nó, nếu sẵn có. Trong trường hợp này, mỗi bản phát hành sẽ tạo một mã byte khác nhau. Trình duyệt xem đây là một bản nâng cấp rồi thực hiện một sự kiện install mới.

Tại thời điểm này, trình duyệt của người dùng sẽ xem xét "tệp kê khai bộ nhớ đệm" mới. Dữ liệu này sẽ được so sánh với bộ nhớ đệm hiện tại của người dùng và nếu các nội dung có hàm băm MD5 khác, chúng tôi xóa chúng khỏi bộ nhớ đệm và yêu cầu trình duyệt tìm nạp lại chúng. Tuy nhiên, trong hầu hết các trường hợp, nội dung được lưu vào bộ nhớ đệm nhìn chung giống nhau hoặc chỉ có những điểm khác biệt nhỏ.

Trong trang Theo chân ông già Noel, việc nâng cấp trình chạy dịch vụ sẽ khiến trình duyệt của người dùng tải lại ngay lập tức.

Trải nghiệm duyệt xem khi không có mạng

Tất nhiên, chúng tôi cũng phải thay đổi một số điểm trên giao diện người dùng để hỗ trợ trải nghiệm ngoại tuyến và để sẽ dễ hiểu hơn đối với người dùng, những người có thể không nghĩ rằng một trang web có thể hoạt động ngoại tuyến.

Một biểu ngữ nhỏ cho bạn biết khi nào bạn đang duyệt web mà không có mạng. Tất cả các cảnh không được lưu vào bộ nhớ đệm đều "bị treo" và không thể nhấp vào. Khi đó, người dùng không thể truy cập vào nội dung không truy cập được.

Theo chân ông già Noel thường xuyên gửi các yêu cầu đến API của ông già Noel. Nếu các yêu cầu này không thực hiện được hoặc hết thời gian chờ, chúng tôi sẽ xem như người dùng đang không có kết nối mạng. Chúng tôi sử dụng API này thay vì navigator.onLine tích hợp sẵn của trình duyệt thuộc tính: đây sẽ chỉ thông báo cho chúng tôi xem người dùng có đang trực tuyến hay không. (Đây còn được gọi là Lie-Fi).

Kết nối quốc tế

Mặc dù đa số người dùng của chúng tôi sử dụng tiếng Anh (sau đó là tiếng Nhật, tiếng Bồ Đào Nha, tiếng Tây Ban Nha và tiếng Pháp), ông già Noel được xây dựng và phát hành bằng hơn 35 ngôn ngữ.

Khi người dùng tải trang Theo chân ông già Noel, chúng tôi sử dụng ngôn ngữ của trình duyệt và các gợi ý khác để chọn ngôn ngữ để phân phát. Phần lớn người dùng chưa bao giờ ghi đè ngôn ngữ này. Tuy nhiên, nếu người dùng chọn một ngôn ngữ mới thông qua bộ chọn của chúng tôi, chúng tôi sẽ coi việc này như thể bản nâng cấp sẵn có—giống như trong trường hợp trên, khi có phiên bản mới của Theo chân ông già Noel.

Nói một cách khác, phiên bản hiện tại của Theo chân ông già Noel dành cho mục đích của nhân viên dịch vụ thực sự là một bộ dữ liệu của (build,language).

Thêm vào màn hình chính

Vì ông già Noel làm việc ngoại tuyến và cung cấp một nhân viên dịch vụ, nên những người dùng đủ điều kiện sẽ được nhắc cài đặt vào màn hình chính. Trong năm 2016, khoảng 10% lượt tải đủ điều kiện là từ biểu tượng màn hình chính.

Kết luận

Chúng tôi đã có thể nhanh chóng chuyển đổi công cụ Theo chân ông già Noel thành ứng dụng web tiến bộ (PWA) ngoại tuyến, nhờ đó mang đến một ứng dụng đáng tin cậy, hấp dẫn Nhờ thiết kế cảnh hiện có, chúng tôi dễ dàng sử dụng Polymer và thành phần web. Dịch vụ này cũng tận dụng hệ thống xây dựng của chúng tôi để nâng cấp một cách hiệu quả, chỉ vô hiệu hoá những thành phần đã thay đổi.

Mặc dù ông già Noel phần lớn là một giải pháp được thiết kế riêng, nhưng bạn có thể tìm thấy nhiều nguyên tắc trong Polymer App Toolbox của dự án. Bạn nên kiểm tra nếu đang xây dựng một ứng dụng web tiến bộ (PWA) mới từ đầu hoặc nếu bạn đang tìm một không phụ thuộc vào khung, hãy thử áp dụng các phương pháp Thư viện Workbox.