𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮 𝗣𝗪𝗔 𝘄𝗶𝘁𝗵 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝟭𝟳: 𝗢𝗳𝗳𝗹𝗶𝗻𝗲-𝗙𝗶𝗿𝘀𝘁 𝗮𝗻𝗱 𝗕𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗦𝘆𝗻𝗰 𝘄𝗶𝘁𝗵 𝗦𝗲𝗿𝘃𝗶𝗰𝗲 𝗪𝗼𝗿𝗸𝗲𝗿𝘀

pwa-freepik-stephen-redraw-banner

In today’s fast-paced digital world, delivering seamless user experiences is crucial. One powerful tool that enhances the performance and reliability of web applications is 𝗦𝗲𝗿𝘃𝗶𝗰𝗲 𝗪𝗼𝗿𝗸𝗲𝗿𝘀.

Service Workers are JavaScript scripts that run independently in the background, separate from the main browser thread. While many resources cover PWAs, Angular’s built-in service worker support simplifies the process of building one.

This inspired me to create an Angular clone of the job search app from my previous React Portal Tutorial. In this guide, we’ll transform the Angular 17 Job search application into a PWA, incorporating offline caching and background synchronization to keep your app functional during periods of limited or no connectivity.

To further enhance offline capabilities, we’ll make use of 𝗜𝗻𝗱𝗲𝘅𝗲𝗱𝗗𝗕 for retrieving cached data, providing smooth and efficient access to information regardless of network availability.

𝗪𝗵𝘆 𝗖𝗵𝗼𝗼𝘀𝗲 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗳𝗼𝗿 𝗣𝗪𝗔𝘀?
Angular provides an out-of-the-box solution with the @𝙖𝙣𝙜𝙪𝙡𝙖𝙧/𝙥𝙬𝙖 package, making it easy to add PWA features to your application. It includes:

• 𝗦𝗲𝗿𝘃𝗶𝗰𝗲 𝘄𝗼𝗿𝗸𝗲𝗿 𝗿𝗲𝗴𝗶𝘀𝘁𝗿𝗮𝘁𝗶𝗼𝗻.
• 𝗣𝗿𝗲𝗰𝗼𝗻𝗳𝗶𝗴𝘂𝗿𝗲𝗱 𝗰𝗮𝗰𝗵𝗶𝗻𝗴 𝘀𝘁𝗿𝗮𝘁𝗲𝗴𝗶𝗲𝘀.
• 𝗦𝘂𝗽𝗽𝗼𝗿𝘁 𝗳𝗼𝗿 𝗮𝗽𝗽 𝗺𝗮𝗻𝗶𝗳𝗲𝘀𝘁 𝗳𝗶𝗹𝗲𝘀.

Step 1: Setting Up the Angular Job Search Application
Create a new Angular project:

ng new JobSearch-NG

Step 2: Add Angular PWA Support:

ng add @angular/pwa

This command:
• Generates a manifest.webmanifest file for your app.
• Adds a ngsw-config.json file for configuring service workers.
• Updates angular.json to include service worker support.
• Registers the service worker in the app config.

Step 3: Configure 𝗻𝗴𝘀𝘄-𝗰𝗼𝗻𝗳𝗶𝗴.𝗷𝘀𝗼𝗻 for Offline Caching
Update the ngsw-config.json file to define caching strategies for your API and static assets.

• 𝗮𝘀𝘀𝗲𝘁𝗚𝗿𝗼𝘂𝗽𝘀: Caches static assets like CSS, JS, and images.
• 𝗱𝗮𝘁𝗮𝗚𝗿𝗼𝘂𝗽𝘀: Caches API requests with freshness strategy for one day.

Step 4: Create a Fetch Service with Signals

In the React version of the application, we utilized the useFetch hook to abstract API calls into a reusable function. Similarly, in this Angular implementation, we leverage signals to manage application state in a streamlined and efficient manner.

Angular’s signals offer a powerful way to track and respond to changes in state, eliminating the need for manual change detection. By reducing unnecessary re-renders, signals contribute to faster and more responsive applications.

Here, we use signals to manage API data, loading states, and errors:

Step 5: Implement Background Sync
Use the Background Sync API to retry failed API requests when the network is back.

𝗖𝗿𝗲𝗮𝘁𝗲 𝗮 𝗕𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗦𝘆𝗻𝗰 𝗦𝗲𝗿𝘃𝗶𝗰𝗲

While implementing this, I discovered that the sync property is not directly available in the ServiceWorkerRegistration class. To work around this, we cast it to any and treat it as a BackgroundSyncManager.

Before accessing the sync property, we first ensure that both the serviceWorker and SyncManager APIs are supported by the browser.
After that, we proceed register the tag that will be listened to in our service worker javascript file to know when to sync the cached data. Since the SyncManager API is not universally supported, it’s crucial to check compatibility using resources like Can I Use.

Additionally, we added a catch block to the .register() promise to gracefully handle potential registration failures.

To maintain clean and readable code, we encapsulated the casting logic in a getServiceWorkerSync method, providing a centralized and reusable solution.

𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴 𝗔𝗣𝗜 𝗙𝗮𝗶𝗹𝘂𝗿𝗲 𝗪𝗶𝘁𝗵 𝗕𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗦𝘆𝗻𝗰

To improve the user experience during API failures, we invoke the registerBackgroundSync method within the error block of our side effect in the signal of fetch.service.ts. This logic is triggered in the ngOnInit lifecycle hook of App.component.ts.

When an API call fails — whether due to network issues or other factors — the service worker takes over and syncs the offline data seamlessly, preventing the display of an error page and ensuring a more resilient application behavior.

𝗨𝗽𝗱𝗮𝘁𝗲 𝘁𝗵𝗲 𝗦𝗲𝗿𝘃𝗶𝗰𝗲 𝗪𝗼𝗿𝗸𝗲𝗿 𝘁𝗼 𝗛𝗮𝗻𝗱𝗹𝗲 𝗕𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗦𝘆𝗻𝗰

Since we cannot directly modify the ngsw-worker.js as its generated at build time, we create a custom service worker 𝘀𝗲𝗿𝘃𝗶𝗰𝗲-𝘄𝗼𝗿𝗸𝗲𝗿.j𝘀 in our src folder to handle background sync.

We add an event listener to listen for a sync event with the tag 𝘀𝘆𝗻𝗰-𝗷𝗼𝗯𝘀 specified in the App.component.ts so that when the browser regains connectivity, the sync-jobs event triggers.

The Service Worker fetches the latest jobs from the API
and the Jobs are stored in the IndexedDB, making them available for offline use. so with this we ensure seamless background synchronization and offline caching for the application.

Step 6: Use IndexedDB for Offline Data Storage
Next, we create 𝗷𝗼𝗯-𝗱𝗮𝘁𝗮𝗯𝗮𝘀𝗲.𝘀𝗲𝗿𝘃𝗶𝗰𝗲 where we use 𝗜𝗻𝗱𝗲𝘅𝗲𝗱𝗗𝗕 to store job data locally for offline use. IndexedDB is a low-level, asynchronous database API built into modern browsers.

Install idb for IndexedDB Management

npm install idb

JobDatabaseService for IndexedDB Operations

Here, we define a 𝗝𝗼𝗯𝗗𝗕 schema with a 𝗷𝗼𝗯𝘀 object store, where each job is identified by a unique 𝗷𝗼𝗯_𝗶𝗱.

The database is created or opened using 𝗼𝗽𝗲𝗻𝗗𝗕, and during initialization, the 𝘂𝗽𝗴𝗿𝗮𝗱𝗲 callback ensures the 𝗷𝗼𝗯𝘀 object store is set up with 𝗷𝗼𝗯_𝗶𝗱 as the primary key. The service provides two key methods:

1. 𝗮𝗱𝗱𝗝𝗼𝗯: Adds a new job or updates an existing one in the database using the 𝙥𝙪𝙩 method.
2. 𝗴𝗲𝘁𝗝𝗼𝗯𝘀: Retrieves all stored jobs using 𝙜𝙚𝙩𝘼𝙡𝙡.

Step 7: Fetch Jobs from Cache or IndexedDB

Next, we update the FetchService to fetch jobs from IndexedDB when offline, we used 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗼𝗿.𝗼𝗻𝗟𝗶𝗻𝗲 to determine if the app is offline. When offline, jobs are fetched from IndexedDB using 𝗷𝗼𝗯𝗗𝗯.𝗴𝗲𝘁𝗝𝗼𝗯𝘀().
On a successful API call, jobs are saved to IndexedDB using 𝗷𝗼𝗯𝗗𝗯.𝗮𝗱𝗱𝗝𝗼𝗯(𝗷𝗼𝗯). then we ensure 𝗱𝗮𝘁𝗮, 𝗶𝘀𝗟𝗼𝗮𝗱𝗶𝗻𝗴, and 𝗲𝗿𝗿𝗼𝗿 signals are updated consistently for offline and online cases.

And we’re done!.

𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗮𝗻𝗱 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴

1. Test Offline Functionality
Run your app in production mode:

ng build

Copy your service-worker.js file into the dist/job-search-ng folder (alternatively, you can write a script in your package.json that automatically copies the file into the specified folder after the build is completed) then use http-server to load your bundled application;

npx http-server -p 8080 -c-l dist/job-search-ng

Open Developer Tools > 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 > 𝗦𝗲𝗿𝘃𝗶𝗰𝗲 𝗪𝗼𝗿𝗸𝗲𝗿𝘀.
Simulate offline mode and test functionality.

indexedBD entries

2. Debug Background Sync
Use the Sync section under Application in Developer Tools to debug sync events.

debugging sync events

𝗖𝗼𝗻𝗰𝗹𝘂𝘀𝗶𝗼𝗻
You’ve successfully created a PWA using Angular! By integrating service workers, background sync, and offline caching, your app is now resilient to network issues. PWAs not only enhance user experience but also make your app accessible anytime, anywhere.

Explore the full code for this tutorial on GitHub.

Don’t forget to Follow me to get more guides on how to build scalable and user-centric solutions. Thanks😁😊 and Enjoy !!!

𝗡𝗲𝘅𝘁 𝗦𝘁𝗲𝗽𝘀
• Add push notifications for real-time updates.
• Optimize caching strategies for large-scale applications.
• Publish your app to a web hosting service for public access.