WebKit Igalia Periodical #80

How to Use the Fullscreen API in JavaScript (and Keep the Screen Awake with the Wake Lock API)

Các nhà phát triển front-end thường nhận yêu cầu triển khai chế độ fullscreen cho ứng dụng …

WebKit supports interactive-widget … and hopefully Safari will too?

WebKit vừa thêm hỗ trợ cho directive interactive-widget trong viewport meta, giúp lập trình viên kiểm soát cách layout và viewport thay đổi khi bàn phím ảo xuất hiện trên di động. Tính năng này bắt nguồn từ công trình viewport của Chrome Interop 2022 và đã xuất hiện trong Chrome 108 cùng Firefox 133 trên Android. Hiện tại để thử nghiệm trên WebKit, bạn cần tự build WebKit locally và chạy qua MobileMiniBrowser trên iPhone Simulator vì nó chưa xuất hiện trong Safari Technology Preview. Vẫn chưa rõ khi nào tính năng này sẽ được đưa vào bản Safari công khai, nhưng có thể sẽ xuất hiện trong Safari 27.1.

Kiến thức về tính năng interactive-widget trong WebKit giúp lập trình viên chuẩn bị cho tương lai phát triển ứng dụng di động khi Safari hỗ trợ viewport directive này.

Fixing Top-Level Await in Safari

Safari trước đây gặp lỗi khi sử dụng top‑level await vì bộ nạp module của nó còn dựa trên bản đề xuất WHATWG Loader đã bị bỏ và không tuân thủ đầy đủ spec ECMAScript. Nguyên nhân là bộ nạp cũ được viết bằng JavaScript, dẫn tới lỗi “accessed before initialization” và thứ tự đánh giá module không chính xác. Để khắc phục, nhóm WebKit đã viết lại toàn bộ bộ nạp module từ đầu bằng C++ nguyên bản và kiểm tra kỹ lưỡng bằng fuzzing, test262, WPT và các test case do Bun engineers cung cấp. Kết quả là Safari 27 beta và Safari Technology Preview 251 đã полностью hỗ trợ top‑level await mà không còn những lỗi trước đây. Bài học là đầu tư vào việc viết lại thành phần lõi bằng ngôn ngữ native và thực hiện bộ kiểm tra đa dạng giúp đạt được tuân thủ spec và ổn định lâu dài. Nhà phát triển có thể kiểm tra tính năng này ngay trong Safari Technology Preview 251 hoặc bản beta Safari 27 để xác nhận việc top‑level await hoạt động đúng như mong đợi.

Bài này giúp lập trình viên hiểu Safari đã sửa lỗi top-level await ảnh hưởng đến cách module được tải và thực thi.

I tried using one browser for work and another for everything else, and it fixed a problem extensions never did

Bối cảnh: tác giả trước đây cố gắng giảm sự phân tâm bằng cách cài đặt nhiều tiện ích mở rộng (extensions) trên trình duyệt duy nhất. Nguyên nhân kỹ thuật: các tiện ích này thường chạy trong cùng một tiến trình và chia sẻ tài nguyên, vì vậy chúng không thể hoàn toàn chặn các trang web hoặc thông báo không liên quan đến công việc. Hệ quả: khi chuyển sang sử dụng một trình duyệt riêng cho công việc và một trình duyệt khác cho các hoạt động cá nhân, sự phân tán giảm đáng kể và tập trung làm việc cải thiện rõ rệt. Điều đáng học: thay vì continually tinh chỉnh các tiện ích, việc tách môi trường bằng cách sử dụng nhiều trình duyệt có thể giải quyết vấn đề gốc hiệu quả hơn. Điều này gợi ý rằng đối với các vấn đề liên quan đến môi trường làm việc, giải pháp kiến trúc đôi khi vượt qua giải pháp dựa trên phần mềm bổ sung.

Sử dụng trình duyệt riêng cho công việc và cuộc sống riêng giúp loại bỏ sự phân tâm hiệu quả hơn bất kỳ tiện mở rộng nào.

How to Build a Scalable SVG Icon System for Your Web App

SVG tỏ ưu thế hơn icon fonts hay bitmap nhờ khả năng co giãn và tùy chỉnh. Bài hướng dẫn kỹ thuật sử dụng phương pháp sprite với symbol và use elements để tránh trùng lặp markup, kèm ví dụ React triển khai accessibility với aria-label hoặc aria-hidden. Công cụ svg-sprite tự động tạo sprite từ thư mục nguồn, tối ưu SVG trước khi thêm vào sprite giúp giảm kích thước file. Điều đáng học là sử dụng bộ icon đồng nhất về phong cách và tránh lỗi trùng lặp tên hoặc thiếu thuộc tính accessibility.

Lập trình viên nên đọc bài này để học cách xây dựng hệ thống biểu tượng SVG hiệu quả, tránh rắc rối về hiệu suất, bảo trì và tính khả dụng khi ứng dụng phát triển lớn hơn.

Release Notes for Safari Technology Preview 251

Safari Technology Preview 251 được phát hành cho macOS Golden Gate và macOS Tahoe, chứa một bộ thay đổi lớn của WebKit giữa hai khoảng commit. Nguyên nhân kỹ thuật bao gồm việc bổ sung các tính năng CSS như @supports at-rule(), object-view-box, random-item(), corner-shape và multi-condition @container queries; JavaScript nhận Iterator.prototype.includes(), WebAssembly Memory64, import defer, iterator chunking và joint iteration; HTML thêm popover=hint và Navigation API. Hệ quả là Service Workers, Web Extensions và Web Inspector được mở rộng khả năng, đồng thời có hàng chục bản sửa lỗi trong rendering, SVG, media, networking, WebGPU và WebRTC. Điều đáng học là các nhà phát triển cần kiểm tra tính năng mới và lưu ý việc loại bỏ các giá trị phần trăm không chuẩn của -webkit-line-clamp, margin-trim trong flex/grid và các giao diện SVGPathSegList/SVGPathSeg để phù hợp với SVG 2. Việc theo dõi các bản preview này giúp teams sớm thích nghi với các tiêu chuẩn web đang phát triển và tránh những thay đổi phá vỡ khi phiên bản ổn định được ra mắt.

Lập trình viên nên đọc bài này để cập nhật các tính năng và thay đổi mới nhất trong Safari Technology Preview 251, giúp tối ưu hóa web app và ứng dụng của mình.

Web-Perf Wednesday 008 – Good INP Rates Keep Falling – CSS Wizardry

CrUX data cho thấy tỷ lệ good INP (Interaction to Next Paint) tiếp tục giảm, đáng chú ý là đã xuống còn dưới 50% trên nhiều website. Nguyên nhân chính xuất phát từ việc browser chưa tối ưu hóa đủ tốt cho tính năng mới nhất của INP metric, đặc biệt với các interaction phức tạp. Hệ quả là trải nghiệm người dùng bị ảnh hưởng khi độ trễ interaction tăng lên, dẫn đến chỉ số Core Web Vitals không đạt yêu cầu. Điều đáng học là cần phân tích chi tiết từng interaction cụ thể thay vì chỉ dựa vào con số tổng thể để xác định đúng điểm nghẽn hiệu suất.

Bài viết này cung cấp phân tích cập nhật về xu hướng giảm tỷ lệ trải nghiệm INP tốt và cách đánh giá chính xác các chỉ số hiệu suất web.

Web-Perf Wednesday 010 – Safari Keeps Scrolled Content in Place – CSS Wizardry

Safari 27 adds scroll anchoring, tighter HTTP caching, and static Service Worker routes, while Chrome improves performance tooling.