🛰️ AngularJS Service Workers & PWA – Turn AngularJS Apps into Offline-First Progressive Web Apps (2025 Guide)

Introduction – Why Add Service Workers & PWA Support to AngularJS?

In the era of mobile-first and offline-first web apps, Progressive Web Apps (PWAs) are a must-have. Although AngularJS predates PWA support and service workers, you can still implement these features manually or with helper libraries to add:

• Offline capabilities
• Background sync
• Improved performance and caching
• PWA install prompts and app-like behavior

In this guide, you’ll learn:

• What service workers and PWAs are
• How to register a service worker in AngularJS
• How to configure caching, offline support, and manifests
• Best practices for deploying a PWA-enabled AngularJS app

What is a Service Worker?

A Service Worker is a background script that:

• Intercepts and handles network requests
• Caches files and API responses
• Works offline and syncs in the background
• Powers push notifications and background updates

What is a PWA (Progressive Web App)?

A PWA combines the best of web and mobile apps. Features include:

• Responsive design
• Offline access
• Add-to-home-screen support
• Native-like performance
• HTTPS-only deployment

AngularJS doesn’t support PWAs out-of-the-box but you can manually add these capabilities.

Step 1: Create a service-worker.js File

Place this file in your AngularJS project root (typically next to index.html).

const CACHE_NAME = 'angularjs-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/images/logo.png'
];

// Install SW and cache static assets
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
      return cache.addAll(urlsToCache);
    })
  );
});

// Serve from cache
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

This caches your static files and serves them offline.

Step 2: Register the Service Worker in AngularJS

Add the following to your app.js or directly inside a controller’s run() block:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(reg) {
      console.log("Service Worker registered!", reg);
    })
    .catch(function(err) {
      console.error("Service Worker registration failed:", err);
    });
}

Place this in the main JS entry point so it loads on every page.

Step 3: Create a Web App Manifest

Create a file called manifest.json in your root folder:

{
  "name": "AngularJS PWA App",
  "short_name": "NgJS PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1976d2",
  "icons": [
    {
      "src": "images/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Link it in index.html:

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

Step 4: Ensure HTTPS Deployment

Service workers and PWAs require HTTPS (except on localhost). Deploy to:

• GitHub Pages
• Netlify
• Firebase Hosting
• Any HTTPS-enabled server

Optional: Add Background Sync & Push Notifications

Advanced service workers support:

• Background data syncing
• Push notifications using push and sync events
• IndexedDB integration for offline data storage

You can explore libraries like:

• Workbox.js – For managing complex caching
• Sw-precache / sw-toolbox – Legacy tools usable in AngularJS projects

Real-World Use Cases

Best Practices for AngularJS PWAs

✔️ Keep service worker lean and simple
✔️ Test caching and fallbacks thoroughly
✔️ Use icons and manifest for installability
✔️ Keep cache versioning in mind
✔️ Serve app over HTTPS only

Summary – Recap & Next Steps

Even without native support, AngularJS can be enhanced to function as a Progressive Web App using service workers and a manifest. This enables offline access, caching, and mobile-like installability—all while keeping your existing AngularJS stack.

Key Takeaways:

• Add service-worker.js and register it in your AngularJS app
• Use a manifest file to define PWA appearance
• Cache important static assets and pages
• Deploy over HTTPS to enable full PWA features

Real-world Relevance:
Perfect for modernizing legacy AngularJS apps into mobile-ready, offline-friendly applications without full migration.

FAQ – AngularJS Service Workers & PWA

Can AngularJS work with service workers?
Yes. You can manually register and configure service workers in AngularJS projects.

Is AngularJS compatible with PWAs?
AngularJS doesn’t natively support PWA features, but you can add service workers and manifest files manually.

Do PWAs need HTTPS?
Yes. Service workers only run on secure origins (HTTPS) or localhost.

What libraries help with service workers in AngularJS?
You can use Workbox.js, sw-toolbox, or sw-precache.