How I Built a Fast, Offline-First Gluten Detection PWA Using Web OCR & Open Food Facts

particual — Sat, 12 Sep 2026 08:38:40 +0000

Navigating dietary restrictions like Celiac disease or gluten sensitivity requires quick, reliable information right at the grocery store. Traditional apps can be slow or bloated.

To solve this, I built Glutensa—an open, lightweight Progressive Web App (PWA) designed to analyze food ingredients in real time using barcode scanning and OCR (Optical Character Recognition).

Here is a breakdown of the architecture, key technical challenges, and how we structured the data pipeline.

🛠️ The Tech Stack

Frontend: PWA Architecture (HTML5, Vanilla JS, Service Workers)
OCR & Image Processing: Web-based OCR engine for ingredient label extraction
Data Layer: Open Food Facts REST API (Fallback Engine) + Local Micro-Datasets
Search & Indexing: Dynamic Schema.org (JSON-LD) structured data for search engine optimization

🚀 Key Technical Challenges & Solutions

1. Fast Barcode Lookup with API Fallbacks

When a user scans a product barcode, speed is critical. We first check an optimized local/cached dataset. If no match is found, the app seamlessly falls back to querying the Open Food Facts API:


javascript
async function fetchProductData(barcode) {
  // Check local cache/db first
  let product = await checkLocalDatabase(barcode);

  if (!product) {
    // Fallback to Open Food Facts
    const response = await fetch(`[https://world.openfoodfacts.org/api/v2/product/$](https://world.openfoodfacts.org/api/v2/product/$){barcode}.json`, {
      headers: { 'User-Agent': 'Glutensa - Web/PWA - Version 1.0' }
    });
    const data = await response.json();
    if (data.status === 1) {
      product = parseOFFData(data.product);
    }
  }
  return product;
}

💡 What's Next?
We are currently expanding the dataset, refining OCR accuracy under low-light conditions, and building dynamic Programmatic SEO pages to help users find instant answers to queries like "Is X product gluten-free?".
Check out the live project here:
🔗 Live App: https://glutensa.me
⭐ GitHub Repository: glutensa on GitHub
I'd love to hear your feedback on optimizing web OCR performance and offline data caching in PWAs!

DEV Community: particual

How I Built a Fast, Offline-First Gluten Detection PWA Using Web OCR & Open Food Facts

🛠️ The Tech Stack

🚀 Key Technical Challenges & Solutions

1. Fast Barcode Lookup with API Fallbacks