PWA service workers and Manifest.json in create-react-app

I was trying to figure out add to home screen button and caching in create-react-app. I came across this concept of service-workers. To understand the concept of service-workers link to read in detail.

1. React provides default implementation of service workers. So, when you do

npx create-react-app sw-app --template cra-template-pwa

It generates a template code out of the box.

2. Let’s focus on serviceRegistration.js, service-worker.js and index.js for today’s topic.

Head to src/index.js file and find the below line.

serviceWorker.unregister();

Change it to:

serviceWorker.register();

3. To support pre-caching, you assign the self._WB_MANIFEST value to a variable that can be recognised by the InjectManifest plug-in. The plugin needs to see this value in order to generate its manifest of URL’s for pre-caching.

Some examples of how you can customise the src/service-worker.js file include:

• Using additional service worker packages from Workbox
• Adding push notifications
• Fine-tuning background data synchronization
• Centralising updates to shared geolocation or gyroscope data
• Adding the ability to handle traffic originating from a different domain

4. As the Service Worker API continues to evolve, you can look forward to being able to support even more features and use cases with your PWAs.

Now that you’ve configured your project to support service workers, it’s time to make sure your users are ready and able to take full advantage of offline-first mode. Since progressive web apps behave a little differently from standard web apps, it’s a good idea to educate your users so that they can make the most of their experience.

5. You can help your users by showing in-app messages that remind them to:

• Use a browser that supports service workers — like Chrome, Firefox, Opera, Samsung Internet, Safari, or Edge. (Note: service workers aren’t supported by any browser when in private or incognito mode).
• Be aware of when the app is working offline. Once the service worker has initially populated the caches, show your users a message informing them that the app can now be used offline.
• Close existing browser tabs to see the latest updates. By default, a service worker is kept on standby after it fetches content updates. As a result, users won’t be able to see the changes until after they close all open tabs and load a fresh page.

Hope this article was helpful. Please go through this. We’re working on dynamic manifest.json for PWA based apps. Will share article on the same soon. Till then BBYE!

Dynamic manifest update refer to this article: https://preetham-umarani.medium.com/dynamic-manifest-json-for-pwa-experience-cdaab4572cf4

note: Always welcome for progressive feedback.