Angular PWA not loading in Offline Mode
There are many problems related to Angular PWA, and the Angular loading problem in offline mode in particular. Only some could solve this problem. There is no full guide on this topic, as far as I know, so you are at the right spot if you want to solve this problem.
Lots of Devs are having the same problems with the Angular PWA app. There are two possible reasons for angular PWA not loading in offline mode.
- Hash Mismatch because the server optimizes the file while serving by removing white space
- Invalid route direction
Before we go to problem solutions, let us get some fundamentals to solve other related problems. Before that, if you are stuck in difficulties or looking for new developers, you can reach angular development services.
If you have a “full calendar module issue,” you can check out How To Solve The Full-Calendar Module Loading Issue.
Angular PWA works offline with service workers. We will see how we can implement service workers to make angular PWA work offline.
If you want a full guide on how to Install, Configure and Deploy Angular PWA, you can check that also.
What Are Service Workers?
Service workers stay in between browser and network. They are virtual proxy networks. They fix the issue for front-end developers. They are used to cache the assets of websites and make them available offline. Service workers run on a different thread and separate from JavaScript code. It doesn’t have access to DOM.
Service workers offer to handle notifications, performing heavy tasks on the separate thread and many more.
Cache First or Offline First
It is the pattern and strategy for serving content to the user. If a resource is cached, then the user doesn’t have to download it again. It will cache the resource for future use.
Now let’s take an example of an app.
Service Workers In An PWA App
First of all, we have to register the new service worker in the app.js file.
It is registered against the site by ServiceWorkerContainer.register(). You can execute the file after registration. Here, everything is written in an sw.js file which is service worker specific.
When you finish registering, the sw.js file automatically downloads and installs it, as well as activating it. We can add event trackers/listeners for key events if we want to see them.
We can add an “install” event:
Here, we can start caching the files for offline use. A variable is created for cache name and sell files listed in one array.
Now, the images to be loaded from the data/games.js file. After it generates the second array, both arrays will combine using aray.prototype.concat().
Now, we can manage ‘’install.‘’
Activation
It is used the same as install, but it also deletes the files that are no longer necessary. You can skip it if you don’t want to.
Fetch responding
You can see that there is also another event fetch which sends HTTP requests. It is useful and allows to intercept requests and respond with custom responses.
The answer can be anything we want: the requested file, a cached duplicate of it, or a piece of JavaScript code that does something special — the options are unlimited.
Here, we are serving content from the cache rather than using the network as long as we can see that resource is in the cache. It can happen whether the app is online or offline. If the file is not in the cache, then the app adds it before serving.
Here you can see that FetchEvent.respondWith takes control. This section serves as a proxy server between the app and the network. It allows us to respond to each request with any response we want: created by the Service Worker, taken from the cache, and changed if necessary.
How to update when a new version of the app contains new assets?
First of all, you have to do like below:
Now we have to update from V1 to V2. We can add all files to the new cache.
Now, a new service worker is installed in the background.
Cache Clearing
You can use the activate event to clear unnecessary files or old cache that are not used anymore.
So now, let’s focus and fix the errors I listed in the initial article.
Hash Mismatch Causing Angular PWA Not Loading in Offline Mode
This error occurs when the file is modified by the server to optimize it or to remove empty white spaces. So, it changes the hash.
Solution 1
Use a workaround to remove the hash from the “index.html” file before deploying.
Solution 2
- First, download the finished sample code from the universal guide
- Unzip and install it with npm install
- Now, enable SW with ng add @angular/pwa — project=angular.io-example
- The next step is, build it with npm run build:ssr
- Now, run with npm run serve:ssr
Here now, it works with offline mode.
Now let’s solve the second probability of the main problem, invalid route direction.
Invalid route direction
The PWA cannot run in offline mode because of invalid route direction. The static cache only serves what’s in the manifest.
Suppose the manifest tells the URL of /index.html and requests to /index.html, then it will be answered by a cache, but a request to “/” will go to the network.
Here you can use the route direction plugin. It examines the manifest’s routing configuration and redirects configured routes to a specified index route.
The “routing” has two keys. Here, “index” manages the URL to satisfy all routes. The “routes” key has a map of URLs to route configurations. Currently, you can only set the property config of the “prefix.”
Now, if the prefix is false, then the route path matches correctly. If it’s true, then the URL with the prefix will match, and it tells the service worker to serve a new or configured index.
Here is an example of route direction.
Conclusion
I hope that you found the solution to your angular app problem. We all know that problems are not limited to those described in the article. The errors have no range of difficulties, so it sometimes very difficult to solve the problem alone; also, for startups, it’s better to get someone’s help rather than make silly mistakes; you can Hire Top Angular Developers in India.
Related Article : How to Add Push Notifications in Angular App?
