DEV Community

Faizullah
Faizullah

Posted on

Building an E-Commerce Store That Installs Like an App (Without a Native App)

#fullstack #html #css #javascript

By Faiz Ullah — Full-Stack Developer & Founder of DG Technology

Every e-commerce founder eventually asks the same question: "Should we build a native app?" Native apps are expensive, slow to update, and most users won't bother installing one for a store they're not sure they'll buy from twice.

When I built Yala Bazaar — a multi-category electronics store — I went a different route: build a Progressive Web App that gets 90% of the native-app experience (installable icon, offline support, app-like speed) for a fraction of the engineering cost.

Here's how it actually works under the hood.

What Makes a Website "Installable"

The browser doesn't show an "Add to Home Screen" prompt for just any site. Two specific pieces unlock it:

1. A web manifest describing the app's identity:

{
  "name": "Yala Bazaar",
  "icons": [{ "src": "icon-512.svg", "sizes": "512x512" }],
  "display": "standalone",
  "start_url": "/"
}
Enter fullscreen mode Exit fullscreen mode

2. A registered service worker — a script that runs independently of any open tab and can intercept network requests:

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open('v1').then(cache => cache.addAll(CORE_ASSETS)));
});
Enter fullscreen mode Exit fullscreen mode

Once both are present, browsers offer to install the site like a real app — same home-screen icon, same full-screen launch, no browser chrome.

Deploying Without Downtime (The Part Most Tutorials Skip)

A live store can't go down mid-deploy — every minute offline is lost sales. I deployed Yala Bazaar to Cloudflare Pages, which solves two problems most people don't think about until they hit them:

Atomic deploys. The new version builds entirely on the side. Only once it's 100% ready does Cloudflare flip the live URL to it instantly. Visitors only ever see the fully-old or fully-new version — never a half-deployed broken state.

Content-addressed uploads. Every file is fingerprinted. Change one HTML file, and only that one file re-uploads — not the whole site. A small content fix deploys in seconds, not minutes.

This matters more than it sounds like it should: it's the difference between deploying fearlessly throughout the day versus batching changes because every deploy feels risky.

Live Chat Without Standing Up Chat Infrastructure

Customers abandon carts when they have a question and nobody to ask. I wanted live chat support, but didn't want to run a dedicated chat server for what's fundamentally a small-to-medium store.

The answer was the same pattern I'd use again and again: Firebase's real-time listeners as a lightweight pub/sub system. A customer's message writes to Firestore; the support dashboard listens for new documents and the message appears with no polling and no custom backend:

onSnapshot(collection(db, 'chats', chatId, 'messages'), (snap) => {
  renderNewMessages(snap.docChanges());
});
Enter fullscreen mode Exit fullscreen mode

For a store at this scale, this replaces what would otherwise be a whole WebSocket service — for free, with infrastructure I don't have to maintain.

Separating "Browse" From "Manage"

A storefront has three very different audiences hitting it: shoppers browsing products, sellers managing their own listings, and admins running the whole operation. I kept these as separate page bundles (seller.html, admin.html) rather than one giant single-page app trying to be everything to everyone.

The benefit is concrete: a shopper's bundle never has to download seller/admin code they'll never use, keeping the actual storefront — the page that needs to load fastest — as lean as possible.

What I'd Tell Someone Building Their First Online Store

  • Don't default to a native app. A well-built PWA covers most of the value at a fraction of the cost and maintenance burden.
  • Pick a host with atomic, fingerprinted deploys. It changes how confidently you can ship small fixes.
  • Use your database's real-time features for chat/support before building custom infrastructure.
  • Keep your storefront bundle lean — don't make shoppers download code meant for sellers or admins.

The Stack

Layer Technology
Frontend HTML5, CSS3, Vanilla JavaScript
Installability Web Manifest + Service Worker (PWA)
Auth & Chat Firebase
Hosting Cloudflare Pages

Faiz Ullah
Full-Stack Developer · Founder of DG Technology
🌐 faizullah.pk · 💻 github.com/faizullahpk/yala-bazaar-store

Thinking about whether your next project needs a native app or not? Follow along — I write about practical, real-world decisions in shipping full-stack products.

Top comments (0)