**Capacitor** is an open-source native runtime developed by the team behind Ionic Framework. It allows you to build native mobile applications using web technologies such as HTML, CSS, and JavaScript. Capacitor provides a bridge between web code and native functionality, enabling you to access native device features like the camera, GPS, and file system while still writing your application primarily in web languages. See official website: [[@CapacitorIonicCrossplatform|Capacitor by Ionic - Cross-platform apps with web technology]]. **Astro** is a modern web framework designed to optimize the performance of websites by allowing developers to mix and match various front-end frameworks like [[React.js]], [[Vue.js]], and [[Svelte]] in a single project. It is particularly known for its ability to generate highly optimized, static sites by default, but it also supports dynamic content where necessary. When you use **Capacitor** with an **Astro** project, you can effectively convert your Astro-based web application into a native mobile app. Here’s how this works: ### How Capacitor Converts Astro into a Mobile App: 1. **Web Project to Native App**: Capacitor wraps your Astro project, which is essentially a web application, into a native shell. This means that your Astro app runs within a WebView on iOS or Android, but it can still access native APIs provided by Capacitor. 2. **Native Plugins**: Capacitor provides a set of native plugins that allow your Astro app to interact with device hardware and features such as the camera, GPS, notifications, and more. These plugins can be integrated into your Astro project through JavaScript, just like you would in a typical web app. 3. **Build Process**: When you build your Astro app for mobile using Capacitor, the Astro project is compiled into a set of static assets (HTML, CSS, JavaScript) that are then bundled into a native mobile project (Xcode project for iOS or Android Studio project for Android). Capacitor takes care of the necessary configurations to ensure that the app can be installed and run as a native app on mobile devices. 4. **Cross-Platform**: Capacitor supports building for multiple platforms (iOS, Android, and the web), allowing you to maintain a single codebase for your Astro project while deploying it as a native mobile app and as a web app. ### Relation to Progressive Web Apps (PWAs): A **[[Progressive Web App]] (PWA)** is a type of web application that can be installed on a user's device and works offline, provides push notifications, and delivers an experience similar to native apps. PWAs are built using standard web technologies but are designed to be reliable, fast, and engaging. - **Capacitor and PWAs**: Capacitor can be seen as an evolution of the PWA concept. While a PWA runs in the browser and is enhanced with capabilities like offline support and push notifications, Capacitor takes it a step further by allowing the same codebase to be packaged as a native mobile app with access to more extensive native APIs than what the browser provides. - **PWA and Mobile App Continuity**: With Capacitor, you can build a PWA using Astro, and then with minimal changes, convert that PWA into a fully native mobile app. This means you can reach users on the web, on desktop via installation as a PWA, and on mobile devices as a native app, all from a single codebase. ### Key Points: - **Capacitor** bridges the gap between web apps and native apps, providing native functionality to web-based projects like those built with Astro. - **Astro** is used to create highly optimized web applications, which can be converted into mobile apps using Capacitor. - **PWAs** are web apps with enhanced capabilities that offer an app-like experience, and Capacitor builds on this by enabling these PWAs to become fully native mobile apps with additional native functionality. In essence, Capacitor provides a powerful way to extend the reach of your Astro web app by deploying it across multiple platforms (web, iOS, Android) with native features, while maintaining a unified development experience. # References ```dataview Table title as Title, authors as Authors where contains(subject, "Capacitor") or contains(subject, "PWA") sort title, authors, modified ```