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

Xem trang web

Tóm tắt

Ông già Noel đã 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ờ một phần vào 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ợ thao tác thêm vào màn hình chính (ATHS) và khi không có mạng
• 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à DOM tối, hai phần cốt lõi của thành phần web
• Điểm số Lighthouse đạt 81
• Ngoại tuyến, thông qua Service Worker API, gắn liền 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à tự động nâng cấp chúng trên cá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 hoạt động truyền thống trong ngày lễ tại Google. Mỗi 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 trong suốt tháng 12. Và trong khi ông già Noel có một kỳ nghỉ ngơi đích thực, các chú lùn vẫn nỗ lực phát hành công cụ Theo chân ông già Noel dưới dạng 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ó "hiện đại" hay không được xác định thông qua việc phát hiện tính năng: ông già Noel yêu cầu Set và API Hiệu suất web, cùng nhiều tính năng khác.

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

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

Thử thách

Ông già Noel kết hợp thiết kế đáp ứ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 gây ấn tượng với những nội dung đa phương tiện thú vị, bao gồm cả hình ảnh cách điệu và âm thanh theo chủ đề ngày lễ. Tuy nhiên, một bản dựng thông thường của công cụ Theo chân ông già Noel phải là vài trăm megabyte! Điều này là vì một số lý do:

• Ông già Noel được hỗ trợ bằng hơn 35 ngôn ngữ, vì vậy, nhiều thành phần phải bị trùng lặ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).
• Đôi khi, tệp đa phương tiện đượ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 làm việc chăm chỉ trong suốt tháng 12 và thường phát hành các bản cập nhật mới, quan trọng trong suốt cả tháng. Điều này có nghĩa là những nội dung đã được lưu vào bộ nhớ đệm trên trình duyệt của người dùng có thể cần được làm mới trong những lần truy cập lặp lại.

Những thử thách sau đây:

• Tài nguyên đa phương tiện lớn dành cho các 'cảnh' khác nhau
• Các thay đổi được phát hành trong suốt tháng

...dẫn đến việc chiến lược ngoại tuyến ngây thơ không phù hợp.

Ông già Noel xây bằng Polymer

Bạn nên dừng lại và nói về thiết kế tổng thể của ông già Noel trước khi tìm hiểu cách chúng tôi nâng cấp lên 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, nội dung chỉ đường dùng chung, v.v. Ngoài ra, ông già Noel cũng có nhiều "cảnh" độc đáo.

Bạn có thể truy cập vào mỗi cảnh qua một URL khác nhau – /village.html, /codelab.html và /boatload.html – và là thành phần web riêng của cảnh đó. 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 (hình ảnh, âm thanh, css, js) có trong /scenes/[[sceneName]] tại kho lưu trữ Theo chân ông già Noel. Trong 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 cho thấy tiến trình.

Điều 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 (có 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ộ gồm mọi 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ữ á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át tài nguyên cần thiết cho những cảnh người dùng truy cập, thay vì tải trước toàn bộ trang web cùng một lúc. Công 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ì nâng cấp vào thời điểm tải. Hãy cân nhắc đ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:

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

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

Thiết kế ngoại tuyến

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

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 công cụ 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 sẽ lưu trước tất cả mã được chia sẻ của ông già Noel vào bộ nhớ đệm, vì vậy, bạn không cần tìm nạp gì 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 đưa ra quyết định được đơn giản hoá sẽ như sau:

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

Luồng 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, chỉ những cảnh mà người dùng đã tải trước đó mới có sẵn. Đây là lựa chọn 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 nhạy cả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. Tệp sẽ không bao giờ thay đổi sau khi được lưu vào bộ nhớ đệm trong trình duyệt của người dùng. Chúng ta sẽ nói thêm về điều này ở phần sau.

Chúng tôi sẽ hiển thị trực tiếp

Như chúng tôi đã đề cập, các chú lùn của ông già Noel làm việc chăm chỉ trong suốt tháng 12 và thường phải phát hành các bản cập nhật mới trong suốt tháng. Khi tạo bản phát hành Theo chân ông già Noel, trò chơi đó sẽ được gắn một nhãn riêng, chẳng hạn như v20161204112055, dấu thời gian của bản 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 hàm băm MD5 cho mọi tệp và lưu trữ dữ liệu này trong "tệp kê khai bộ nhớ đệm". Trên ổ đĩa trạng thái rắn hiện đại, quá trình này chỉ thêm vài giây vào quy trình xây dựng.

Mỗi bản phát hành được triển khai đến một đường dẫn riêng trên máy chủ lưu vào bộ nhớ đệm tĩnh của Google. Điều này nghĩa 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 một bản phát hành mới, tất cả thành phần sẽ có một URL khác – ngay cả khi chúng không thay đổi – và mọi nội dung được trình duyệt hoặc trình chạy dịch vụ lưu vào bộ nhớ đệm sẽ không còn giá trị, trừ phi chúng tôi thực hiện thêm một số thao tác.

Chúng tôi cũng triển khai một phiên bản mới của tài nguyên mà chúng tôi gọi là tài nguyên "sản phẩm" – HTML chỉ mục của ông già Noel và trình chạy dịch vụ – nằm trên https://santatracker.google.com/. Phiên bản này sẽ ghi đè phiên bản cũ.

Bất cứ khi nào trang Theo chân ông già Noel tải, trình duyệt sẽ kiểm tra một trình chạy dịch vụ đã cập nhật và tìm nạp trình chạy đó (nếu 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 sẽ xem đây là một bản nâng cấp và 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 nội dung có hàm băm MD5 khác, chúng tôi sẽ xoá chúng khỏi bộ nhớ đệm và yêu cầu trình duyệt tìm nạp lại nội dung đó. 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 phần lớn là giống nhau hoặc chỉ có những điểm khác biệt nhỏ.

Trong công cụ 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.

Lưu ý: Đây là một chiến lược linh hoạt và có thể làm gián đoạn quá trình chơi trò chơi của một người dùng. Chọn một chiến lược tải lại phù hợp với trải nghiệm của bạn.

Trải nghiệm duyệt web ngoại tuyến

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

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

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 những yêu cầu này không thành công hoặc hết thời gian chờ, chúng tôi sẽ xem như người dùng đang ngoại tuyến. Chúng tôi sử dụng API này thay vì thuộc tính navigator.onLine tích hợp trong trình duyệt: API này chỉ cho chúng tôi biết liệu người dùng có đang lên mạng hay không. (Đây còn được gọi là Lie-Fi).

Kết nối quốc tế

Mặc dù phần lớn người dùng của chúng tôi sử dụng tiếng Anh (theo sau là tiếng Nhật, tiếng Bồ Đào Nha, tiếng Tây Ban Nha và tiếng Pháp), nhưng ô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 công cụ Theo chân ông già Noel, chúng tôi sẽ sử dụng ngôn ngữ của trình duyệt và các thông tin gợi ý khác để chọn ngôn ngữ phân phát. Phần lớn người dùng không 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 đây là bản nâng cấp – giống như trong trường hợp ở trên, khi có phiên bản mới của công cụ Theo chân ông già Noel.

Nói cách khác, phiên bản hiện tại của công cụ Theo dõi ông già Noel cho mục đích của trình chạy 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 trình chạy dịch vụ, nên người dùng đủ điều kiện sẽ được nhắc cài đặt ông già Noel 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 ứng dụng Theo dõi ông già Noel thành một ứng dụng web tiến bộ (PWA) ngoại tuyến – mang đến trải nghiệm đáng tin cậy, hấp dẫn – nhờ thiết kế cảnh hiện có, hoạt động dễ dàng thông qua việc sử dụng các thành phần web và polymer hiện có. Phiên bản này cũng tận dụng hệ thống xây dựng của chúng tôi để thực hiện nâng cấp hiệu quả, chỉ vô hiệu hoá những thành phần đã thay đổi.

Mặc dù phần lớn là một giải pháp được xây dựng tuỳ chỉnh, nhưng ông già Noel cũng có nhiều nguyên tắc của giải pháp này trong Hộp công cụ ứng dụng của Dự án Polymer. Bạn nên dùng thử 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 kiếm một phương pháp không phụ thuộc vào khung, hãy dùng thử Thư viện hộp công việc.