Reflecting on my journey with computers, from the C64 and Amiga 500 to the present day, I've found a renewed excitement in software development. New tools like repl.it and websim.ai empower rapid creation of full-stack, disposable web apps – software built for personal use and easily discarded. This ease of creation removes the barrier to starting projects, making the web an ideal platform for even single-user applications. It's a shift from handcrafted software to a more ephemeral approach, allowing for quicker prototyping and experimentation.
I've rejoined Mastodon! Driven by the potential Twitter costs and wanting more control, I'm now self-hosting my instance for about the same price as a Twitter Blue subscription. I'll keep using Twitter for learning, but I'm excited about Mastodon's open, interoperable nature and its excellent PWA. Come find me on Mastodon!
I'm so excited by the renewed interest in web development sparked by Wordle! It's a simple, fun game that highlights the power of the web. It's accessible, fast, user-friendly, and has inspired countless developers to create their own versions and variations. This post celebrates Wordle's impact, lists various Wordle-inspired projects (including different language versions, framework implementations, and even tools), and encourages readers to share their own discoveries.
I'm starting to think about Chrome Dev Summit 2022. Top of mind is everyone's safety with the ongoing pandemic and how to make the event as inclusive as possible. I really value the connections and hallway track of in-person events, but also the reach of online. I loved the CDS 2020 workshops and office hours, and believe we should expand on those. Content-wise, I want to focus on what makes the web amazing, showcasing great experiences, and exploring key technologies like Core Web Vitals, Privacy Sandbox, PWAs, and Project Fugu. Also, more content alongside talks, please! And maybe shorter, more impactful online presentations?
I built a simple tool, shortcut.cool, to create custom launchers for Android using the web. It leverages the power of PWAs, service workers, and the web app manifest, specifically the shortcuts feature. The tool allows you to define a set of .new domain shortcuts, which then get encoded into the URL. This URL points to a dynamically generated manifest file that Chrome uses to install the PWA with the specified shortcuts on your home screen. The project is a bit of an experiment and has some limitations, like the inability to update existing PWAs and potential security concerns from URL-encoded data. However, it’s a fun example of how the web can be used to create quick, personalized tools.
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 accidentally discovered that Twitter has implemented PWA shortcuts, a feature that allows websites and web apps to provide users with quick access to common actions. This is a great step towards bridging the gap between web and native applications, allowing websites to provide a more app-like experience.
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.
I built a Progressive Web App (PWA) that extracts text from images shared to it. It uses the Share Target API to receive images, the Shape Detection API's TextDetector to analyze them, and EXIF-Js to handle image rotation issues. While it's a handy tool, it currently suffers from cross-browser and cross-version compatibility problems due to the lumpy nature of the web platform. The code snippets highlight key implementation details, like manifest setup, service worker handling, text extraction, and image rotation.
This post introduces a simple yet effective approach to improve offline user experience on the web using Service Workers. Instead of a browser's default offline page, this method displays a custom offline page when the network is unavailable. The provided JavaScript code caches essential offline assets and intercepts navigation requests. If a request fails due to network issues, it serves a pre-cached 'offline.html' page, ensuring a smoother experience for users. This strategy enhances user perception of web applications, especially in areas with unreliable internet connectivity. A key improvement mentioned is the use of Navigation Preload, which optimizes the loading process by not waiting for the Service Worker to boot up for all requests.
This post discusses Progressive Web Apps (PWAs) and why companies like Microsoft and Google are embracing them. While PWAs offer instant access to content and cross-device compatibility, a key concern is their isolated nature, making it difficult for them to share data and resources. This contradicts the core principles of the web, which should be linkable and interoperable. The increasing isolation of PWAs, along with the broken functionalities of basic web operations like copy/paste and drag/drop, contributes to the creation of unintended data silos on the modern web.
I'm embarking on a project to build a web-based video editor! The goal is to create a tool that simplifies video creation and editing entirely within the browser. Think Screenflow, but accessible to everyone directly on the web. This project is driven by my own needs for creating device demos, screencasts, and other videos. I've already made some progress (check out the demo!), but there's a lot more to do. I'll be exploring existing web technologies to record audio/video, manipulate content (watermarks, filters, overlays), and output in various formats. This isn't about building a massive commercial product, but rather about understanding what's possible and empowering others to create great videos using the open web.
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.
In Chrome 68, the Add to Homescreen banner will no longer automatically appear, even if the site meets the criteria. Instead, developers have control over prompting users. Listen for the beforeinstallprompt event, then present a custom button or UI element to trigger installation when appropriate. This change aims to reduce annoying prompts and give developers more control over the user experience. While potentially impacting install rates initially, it empowers developers to prompt users strategically. Chrome is exploring ambient badging as a less intrusive way to indicate installability.
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.
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.
I explored the Ambient Light Sensor API, a new feature available in PWAs. It lets developers access ambient light levels in lux units, useful for various applications like smart home lighting control or adjusting app brightness based on environmental conditions. The API is built on the Generic Sensor API, which also supports other sensors like gyroscopes and magnetometers. I previously discussed the Generic Sensor API at Chrome Dev Summit 2016, and it's now available in Edge and Chrome (behind a flag).
Workbox helps developers understand and manage storage quota issues, particularly those related to runtime caching of opaque responses. Opaque responses, which are cross-origin responses without CORS enabled, consume a disproportionately large amount of storage quota due to browser security measures. This can lead to unexpected quota issues for developers. Workbox addresses this problem by informing developers about the impact of opaque responses on storage, enabling them to optimize their service worker caching strategies.
I've created a Progressive Web App using FFMPEG.js that applies device frames to Android screen recordings. I've also streamlined the ffmpeg.js build process. This opens up exciting possibilities for building powerful web apps for audio and video manipulation. Many existing web-based video tools are outdated and ad-heavy. I'm interested in creating smaller, focused PWAs, each performing a specific task efficiently. I'm planning to build several apps based on this, such as video trimming, format conversion, watermarking, resizing, and splicing. The codebase from my Device Frames project provides a good starting point. I invite others to collaborate on this effort.
There's a growing interest in using socket APIs directly within web browsers for various applications, both client-side and server-side. This post lists potential use-cases for outgoing and incoming socket connections, eliminating the need for proxying through web servers. Examples include email clients connecting directly to IMAP/POP3/SMTP, SSH/RDP clients, real-time communication tools like IRC and XMPP, P2P applications like BitTorrent, and direct connections to servers for various purposes like video streaming, Bitcoin, and game multiplayer functionality. For incoming connections, use-cases include hosting servers for many of the aforementioned services (IRC, BitTorrent, HTTP) directly within the browser.
This post explores using WebTorrent for serverless data synchronization in web apps, demonstrated by modifying the Voice Memos PWA. The goal was to enable data sharing between devices without a backend server. The solution involves generating magnet URLs that allow peer-to-peer data transfer via WebTorrent. The demo app allows recording audio, saving it locally, and generating a shareable magnet link for access on other devices. This approach offers an interesting alternative to traditional client-server models, especially for scenarios where scalability and serverless operation are desired.
