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.
Mobile devices lack the bookmarklet functionality found in desktop browsers. However, the ShareTarget API offers a potential workaround. This API allows web apps to be installed and receive native share actions, similar to how the Twitter PWA handles shared links and files. By leveraging this API, developers can create mini-apps that perform actions on shared data. This approach involves defining how to receive data in a manifest file and handling the request in a service worker. I've created examples for Hacker News, Reddit, and LinkedIn demonstrating how to utilize the ShareTarget API. While not a perfect replacement for desktop bookmarklets, this offers a new level of hackability for mobile web experiences.
Building web experiences for low-end devices in developing markets presents significant performance challenges. Limited memory, slow network speeds, and slow JS execution necessitate different development strategies. While developers in established markets might not prioritize these users, their numbers are growing rapidly. We must continue focusing on web performance to ensure the web remains the platform of choice.
In the early days of mobile web development, Google Gears played a pivotal role in shaping the APIs we use today. It introduced concepts like local caching, local databases, and background processing, which paved the way for modern APIs such as AppCache, WebSQL, Geolocation, and Web Workers. While WebSQL and AppCache have been replaced by IndexedDB and ServiceWorkers, respectively, the legacy of Gears is undeniable.
This blog post discusses the evolution of Progressive Web Apps (PWAs) since their inception in 2015. While PWAs offer numerous benefits like offline functionality, push notifications, and installability, the author observes that adoption hasn't been universal. Many developers and businesses misunderstand PWAs, sometimes treating them as separate products or focusing on single features like push notifications. The post argues that the focus should shift from "apps" to user experience. It proposes a set of principles for modern web experiences: discoverable, safe, fast, smooth, reliable, and meaningful. These principles aim to guide developers towards building better web experiences that naturally embody the core values of PWAs, benefiting both users and businesses.
The Page Lifecycle API introduces lifecycle states to the web, giving developers control over how their web apps respond to browser actions like tab unloading and backgrounding. This addresses the historical lack of lifecycle management on the web, which has hindered resource optimization, especially on low-powered devices. The API defines system-initiated states for hidden or inactive tabs, allowing browsers to limit resource consumption. Developers gain control through new APIs and events, enabling them to save state before the browser reclaims resources, such as memory, battery, and network. This collaboration between developers and browsers ultimately improves the user experience by increasing web page reliability and responsiveness.
We rebuilt Pinterest's mobile web experience as a PWA and the results after one year have exceeded our expectations. Weekly active users on mobile web have increased 103% year-over-year, with even higher growth in Brazil (156%) and India (312%). Engagement metrics also saw incredible growth: session length (+296%), Pins seen (+401%), and Pin saves (+295%). Perhaps most importantly, logins increased by 370% and new signups by a staggering 843% year-over-year, making mobile web our top platform for new signups. We've seen 800,000 weekly users add the PWA to their homescreen in under 6 months. Beyond performance, this new platform supports right-to-left languages and night mode, making it more accessible. We're proud of this user experience and excited to continue building on this foundation.
This post discusses the problem of content silos on the web, particularly how native apps dominate sharing functionalities, limiting the web's reach. It highlights the irony of navigator.share, which, while enabling web sharing, still directs users towards native apps. The post emphasizes the need for the web to participate more actively in user interactions. It celebrates the 'Improved add to home-screen' feature for PWAs on Android, generating APKs and making them function more like native apps. Finally, it introduces the promising 'Share Target API', allowing PWAs to receive shared content, including links, thus breaking down silos and fostering a more inclusive web ecosystem.
This post explores how to use Android Intents to detect if a native app is installed. This technique is useful for web apps that also have a native app version, especially for managing push notifications. It allows developers to seamlessly redirect users to the app if it's installed or fall back to the web experience. The method involves creating a special intent URL that opens the app if present, or redirects to a specific URL with a hash fragment. By monitoring the hash change in the browser, the web app can detect if the app launch failed and proceed with web-based push notification registration. While helpful, this approach highlights the complexity of managing push notifications across web and native apps, reinforcing the argument for web-only solutions.
I've spent this week in India doing more research about Web Development in India and how mobile is changing that. Publically at least it is not rosey, app development and app thinking is very high whislt building for the web with mobile in mind is very low.
I'm experimenting with mobile-friendly table of contents designs for HTML5Rocks. The current ToC takes up too much screen space, hindering access to content. My goal is to improve user experience by getting readers to the content faster. My "Bottom ToC" experiment anchors the ToC to the bottom, expanding on tap and collapsing when the main content is tapped. It uses position: fixed and the :active pseudo-class, requiring no JavaScript and keeping the rendered HTML consistent between desktop and mobile. Though it has minor scrolling issues, it effectively minimizes initial ToC screen coverage while remaining accessible.
At Google IO, we were asked how to optimize Google Fonts for mobile performance. We focused on visual appeal by using mobile-friendly fonts like Droid Sans and Lato. To minimize requests, we leveraged App Cache, storing the CSS and font files for faster subsequent loads. While the Web Font API abstracts URLs, we found the font URLs within the CSS response and cached them. Although subsetting fonts is possible, we didn't use it given the potential character range needed for news articles.
During my "Mobile Web Development: From Zero to Hero" talk at Google I/O, a question came up about client-side data storage now that WebSQL is deprecated. While IndexedDB is on the horizon, what are developers using today? I shared my preference for Lawnchair, a simple key-value store abstraction that's easy to use and perfect for many situations. While I didn't use it in the IO Reader app due to late-stage project constraints and the sufficiency of localStorage, I generally prefer using such libraries. I'm interested in hearing from others. What data storage wrappers or techniques do you prefer when building web apps?
