Overview
Marian Breviary is a Progressive Web App built around one non-negotiable requirement: working perfectly without an internet connection. I implemented an offline-first architecture using a Service Worker written from scratch, with no dependency on libraries like Workbox, and differentiated caching strategies by resource type: static asset precaching at install time, cache-first for images and icons, network-first with cache fallback for navigation, and stale-while-revalidate for JS/CSS. The result is immediate access to content even in areas with no network, with build and asset optimization managed by Vite.
The core of the project is the engine that dynamically determines which prayer and which canonical hour to present, based on the device's current time and a deterministic date-based algorithm that varies content and antiphons. All logic, liturgical texts, hour calculation, content selection, is 100% client-side and lives in a local JSON file: no external API dependencies, no backend, no network requests needed to pray.
The interface, built in React 19 with GSAP animations, is clean and sober, designed for maximum readability in any light condition: a calibrated typographic scale, high contrast, and touch-friendly navigation between canonical hours. As an installable PWA on Android and iOS, it delivers an experience close to a native app without going through app stores.
Marian Breviary achieves a Lighthouse Performance score of 99/100 on desktop and 89/100 on mobile, validated by Google PageSpeed Insights in production. On desktop, First Contentful Paint is 0.7s, Largest Contentful Paint 0.8s, Total Blocking Time 0ms, and Cumulative Layout Shift 0. On mobile the scores remain strong: FCP at 2.9s, LCP at 3.1s, TBT at 0ms, and CLS at 0. These results were achieved through a custom Service Worker for offline caching, Vite code splitting, and non-blocking resource loading.
Desktop
MobileFAQ
- What is Marian Breviary?
- Marian Breviary is a free Progressive Web App (PWA) for praying the Office of the Blessed Virgin Mary and the Canonical Hours directly in the browser, without needing to install an app from a store.
- Does Marian Breviary work without an internet connection?
- Yes. The app uses a custom Service Worker, written from scratch without third-party libraries, that precaches static content and caches liturgical texts on first launch. Caching strategies are differentiated by resource type: precaching at install, cache-first for images, network-first with fallback for navigation. The result is the ability to pray even in areas with no network or in airplane mode.
- What technologies were used to develop the app?
- The frontend is built with React 19, Vite as the build tool, and GSAP for animations. Offline functionality is handled by a Service Worker written entirely from scratch, with no third-party caching libraries. All liturgical texts are stored in a local JSON file.
- Do you need to create an account to use Marian Breviary?
- No. The app requires no registration, login, or connection to external services: all liturgical texts are stored locally and the display logic runs entirely on the user's device.
- Can Marian Breviary be installed like a native app?
- Yes. As a PWA it can be installed on Android and iOS directly from the browser via the 'Add to Home Screen' option, without going through Google Play or the App Store, and behaves exactly like a fully installed app.
- How are the prayers and canonical hours chosen?
- A client-side engine calculates the current canonical hour based on the device's clock and deterministically selects antiphons and day descriptions from a predefined set of liturgical content, with no calls to external services. All logic is bundled with the app and works fully offline.
- Is user data collected or sent to external servers?
- No. With no backend or external APIs, there is no collection or transmission of personal data: the entire experience stays on the device.
- What is the difference between Marian Breviary and a native store app?
- Functionally the experience is equivalent: installable, home screen icon, full offline use. The difference is the absence of store publishing and update constraints: updates are distributed via the web and received automatically by the Service Worker, with no action required from the user.
Client Review
Working with Alessandro was fantastic, I just had to give the paper material, some brief and necessary information on the finished product, such as colors, style, type of final format, and he immediately caught everything on the fly with extreme precision, and set to work to create what you see, with the exception of some minor touch-ups. This demonstrates not only his uncommon ability to translate the customer's wishes into the medium, but denotes in my small opinion a marked sensitivity and a deep uncommon basic empathy. Thank you Alessandro!!!