Home  » Blogger Tips  » Mobile App  » Progressive Web App  » PWA  » Service Worker  » Tech Tutorial  » Web App Manifest  » Web Development  » What Every Web Developer Must Know About PWAs: Build a Mobile App Without Paying the $25 Play Store Fee

What Every Web Developer Must Know About PWAs: Build a Mobile App Without Paying the $25 Play Store Fee

Admin ,  ,  ,  ,  ,  ,  , 
What Every Web Developer Must Know About PWAs: Build a Mobile App Without Paying the $25 Play Store Fee

If you've ever wanted to build a mobile app but got stuck at the $25 Google Play Store registration fee, there's a better way — and it's been right in front of you all along.

Progressive Web Apps (PWAs) are the answer. They install on a user's home screen, work offline, send push notifications, and look and feel exactly like a native app — all without a developer account, submission review, or any registration fee.

In this guide, I'll walk you through everything a web developer must know to build a PWA, pass the Lighthouse installability checks, and launch your mobile app for free.

What Is a PWA, Really?

A Progressive Web App is a website that has been enhanced with modern web capabilities to deliver an app-like experience. It's not a new framework or a separate codebase — it's your existing website, upgraded.

When a user visits your PWA, the browser can promote installation. Once installed, it appears on the home screen with an app icon and launches as a standalone app — not inside a browser tab[reference:0].

The key insight: A PWA is still just a website. But it can live on your phone, work completely offline, feel like a real app, and update instantly — without app store reviews or approval queues[reference:1].

The Three Pillars of a PWA

Every PWA is built on three core requirements. Miss any one of them, and your app won't be installable[reference:2].

1. HTTPS (Secure Context)

Your app must be served over HTTPS. Service Workers — the technology that powers offline functionality — only work in secure contexts. Localhost is allowed during development, but production requires a valid SSL certificate[reference:3].

Why it matters: Security, SEO ranking, and browser trust. Google explicitly favors HTTPS sites.

2. Service Worker

A Service Worker is a JavaScript file that runs in the background, separate from your web page. It intercepts network requests, caches resources, and enables offline functionality[reference:4].

Think of it as a proxy that sits between your app and the network. When the user is offline, the Service Worker serves cached content instead of a connection error.

3. Web App Manifest

The Web App Manifest is a JSON file that tells the browser how your app should appear and behave when installed. It defines your app's name, icons, colors, and launch behavior[reference:5].

Without a manifest, your PWA can't be installed. With one, users get a proper app icon, splash screen, and standalone window.

Step-by-Step: Building an Installable PWA

Step 1: Create Your Web App Manifest

Create a file called manifest.json in your site's root directory. Here's the minimum required structure:

{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#06AFE4",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Critical requirements for installability (Chrome, Edge, Samsung Internet)[reference:6]:

  • ✅ name or short_name
  • ✅ icons with 192×192 px and 512×512 px variants
  • ✅ start_url
  • ✅ display set to standalone, fullscreen, or minimal-ui
  • ✅ prefer_related_applications NOT set to true

Link the manifest in your HTML <head>:

<link rel="manifest" href="/manifest.json">

Step 2: Register a Service Worker

Create a file called sw.js in your root directory. This is your Service Worker script.

Basic Service Worker with offline caching:

const VERSION = "v1";
const CACHE_NAME = "my-pwa-" + VERSION;

const STATIC_RESOURCES = [
  "/",
  "/index.html",
  "/styles.css",
  "/app.js",
  "/offline.html"
];

// Install event — cache static resources
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(STATIC_RESOURCES);
    })
  );
});

// Fetch event — serve from cache first
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

// Activate event — clean up old caches
self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys.filter((key) => key !== CACHE_NAME)
            .map((key) => caches.delete(key))
      );
    })
  );
});

Then register the Service Worker in your main JavaScript file:

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/sw.js")
      .then((registration) => {
        console.log("Service Worker registered:", registration);
      })
      .catch((error) => {
        console.error("Service Worker registration failed:", error);
      });
  });
}

Pro tip: Use Workbox to automate caching strategies. It prevents subtle bugs that are common when using the low-level ServiceWorker API directly[reference:7].

Step 3: Verify Installability with Lighthouse

Chrome DevTools includes Lighthouse, which audits your PWA against a comprehensive checklist. The full PWA badge is awarded only when you pass all audits in Fast and reliable, Installable, and PWA optimized[reference:8].

To run Lighthouse:

  1. Open Chrome DevTools (F12)
  2. Go to the Lighthouse tab
  3. Check Progressive Web App
  4. Click Analyze page load

Fix any failing audits before publishing. Common failures include missing icons, incorrect start_url, or an unregistered Service Worker[reference:9].

How PWAs Bypass the $25 Play Store Fee

This is the part most developers don't realize until they've already paid.

To publish on the Google Play Store, you need a developer account with a one-time $25 registration fee. Apple charges $99 per year for the App Store[reference:10].

A PWA requires none of that. Here's the comparison[reference:11]:

Requirement Native (Google Play) Native (App Store) PWA
Registration fee$25 one-time$99/year$0
Revenue shareUp to 30%Up to 30%0%
Review processManual, daysManual, daysInstant
UpdatesRe-submitRe-submitInstant
Offline supportYesYesYes
Push notificationsYesYesYes (Android)
Home screen iconYesYesYes

A PWA completely avoids the Play Store. Other than being installed through the browser, it looks very similar to the end user. PWAs have access to powerful APIs these days and can do most of what native apps can do[reference:12].

Cost Comparison: PWA vs Native App

The financial difference is staggering:

  • Native app (iOS + Android): $80,000 – $250,000 for v1[reference:13]
  • Hybrid app: $30,000 – $80,000[reference:14]
  • PWA: $10,000 – $30,000 (or free if you build it yourself)[reference:15]

For businesses and indie developers with budgets under $40,000, native development is essentially off the table. A PWA is the only viable path to a mobile app presence[reference:16].

The Complete PWA Developer Checklist

Here's everything you need to verify before calling your app a PWA:

✅ Technical Requirements

  • HTTPS enabled (or localhost for development)
  • Service Worker registered and controlling the page
  • Service Worker includes a fetch event handler
  • Web App Manifest linked from every page
  • Manifest includes name, icons (192px + 512px), start_url, display

✅ Offline Experience

  • Static assets (HTML, CSS, JS, images) are precached
  • Offline fallback page exists
  • Runtime caching strategy handles API requests
  • Cache versioning is in place for updates

✅ User Experience

  • Responsive design works across all screen sizes[reference:17]
  • App loads fast (Lighthouse performance score 90+)
  • Install prompt appears naturally
  • App launches in standalone mode

Common PWA Mistakes to Avoid

1. Forgetting the maskable icon. Without a maskable icon, Android may crop your icon awkwardly. Add a separate purpose: "maskable" icon.

2. Not versioning the Service Worker. If you update your app but don't change the Service Worker, users won't see updates. Always increment the version constant[reference:18].

3. Caching too aggressively. Cache-first strategies can serve stale data. Use network-first for API calls and cache-first for static assets.

4. Ignoring iOS limitations. Safari supports PWAs but with restrictions — no push notifications on older iOS versions, and install prompts work differently.

5. Skipping Lighthouse. Lighthouse is free and catches 90% of installability issues before your users do.

Final Thoughts

The $25 Play Store fee is the most visible barrier to launching a mobile app — but it's not the only one. The real costs are the review process, the revenue share, the update delays, and the risk of your app being removed without justification[reference:19].

Progressive Web Apps solve all of this. They're installable, offline-capable, push-notification-ready, and completely free to distribute. You keep 100% of your revenue. You update instantly. You control your own destiny.

If you're a web developer who has been putting off building a mobile app because of the Play Store barrier, start with a PWA. You already have the skills. You just need the manifest, the Service Worker, and HTTPS.

Your users are one tap away from installing your app. All you have to do is give them the option.

Found this helpful? Subscribe to Mr Danjuma for more web development guides, Blogger tips, and tech tutorials.

Share

0 Comments: