I sincerely apologize to the Safari team for misrepresenting their compatibility score in our Chrome Dev Summit presentation. Due to a combination of personal circumstances, a reliance on outdated Safari Tech Preview data from wpt.fyi, and the rush leading up to the event, we displayed an incorrect improvement score (64 => 85 instead of 64 => 92). This was my mistake, and I take full responsibility. While we attempted to rectify the situation, it was too late to change the presentation. Our intent was never malicious, but rather to highlight the collaborative effort to improve web compatibility. I've learned valuable lessons from this experience: triple-check data, consult with relevant engineers, focus on stable release data, and communicate with browser teams transparently. Going forward, we'll prioritize broad browser support and emphasize the user experience in stable releases.
The MDN Browser Compatibility Report 2020 surveyed web developers to identify pain points in cross-browser compatibility. Layout and styling issues, especially with Flexbox and Grid, topped the list, along with challenges related to viewport units, scrolling on mobile, and achieving consistent form styling. Internet Explorer and Safari were frequently cited as problematic browsers. While JavaScript was initially flagged as a concern, interviews revealed that transpilers like Babel largely mitigate core language issues, shifting the focus to browser APIs and their inconsistencies. The report highlighted ongoing efforts to improve compatibility, including fixes for Flexbox and Grid in Chromium and WebKit, the transition to Chromium-based Edge, and a commitment to enhancing MDN's browser compatibility data.
While building a simple CRUD PWA using only service worker JavaScript and relying on Form submissions for data handling, I encountered an issue with Safari not supporting request.formData(). I created a small shim to work around this by parsing the x-www-form-urlencoded request data as a query string and using URLSearchParams to process data similarly to a FormData object. This approach isn't suitable for multipart forms and requires a different solution.
I created a shortcut for iOS that lets you view the source code of web pages in Safari and Chrome. It's a workaround for the lack of a built-in view-source feature on these mobile browsers. The shortcut shares the URL to a third-party website I built which then displays the source code. Because it uses a third-party site, it won't reflect the current state of the page if you are logged in or have specific cookies set. Hopefully, Safari and Chrome will eventually bring back a native view-source option.
Safari 12.1 introduces significant updates for web developers. Notably, Apple now recommends using the Payment Request API for Apple Pay implementations on the web. This shift aligns with broader industry efforts towards standardized payment methods, though it contrasts with Google's prior emphasis on their Google Pay library. Additionally, the new Web Share API empowers developers to trigger native sharing functionalities on the user's device via navigator.share(). This allows for seamless content sharing across various apps and contacts, enhancing user experience. While the Share Target API is still anticipated, this release marks substantial progress in web sharing capabilities.
I recently noticed Twitter has adopted the Well-Known URL for Changing Passwords, which is a simple yet effective way to improve user experience. This spec allows browsers to offer a UI for quick password resets without navigating complex site structures, simply by checking a well-known URL. This sparked an idea: could we expand this concept to other common user actions? Imagine well-known locations for managing GDPR consent, browser permissions, account details, or mailing list subscriptions. It's a powerful concept that could simplify many online interactions, and I've even raised an issue with Chrome to explore implementation.
PWACompat is a JavaScript library that helps web developers make their Progressive Web Apps (PWAs) compatible across different browsers. It takes the existing Web App Manifest and generates the necessary meta and link tags for features like icons, favicons, startup mode, and colors, ensuring a consistent experience across browsers, even those with less complete PWA support, like Safari on iOS. PWACompat simplifies cross-browser compatibility for PWAs, handling things like splash screens and other add-to-homescreen features, making it a valuable tool for PWA developers.
