Create a simple project with Spring Boot and PWA (Progressive Web Apps) combined with Lighthouse extension

Sunday, 05/03/2023

Tram Ho

In this article, I will guide you how to install PWA as well as Service Worker, I divide it into parts as below:

Create project with Spring Boot 3 with Thymeleaf
Create Controller – Model
Create a config file web manifest online
Create a simple service worker script file

In this article, I will not repeat what a PWA is, I just summarize a few basic characteristics of PWA:

If a website has applied PWA -> for example, when a user using a mobile device accesses the website from a browser -> there will be a PWA icon appearing on the home screen (address bar on the right) -> the user can click go to the icon and select “Install”, after successful installation -> will rebuild into a native app with the icon appearing outside the phone screen and for the next time the user does not need to open the browser to access the website anymore, Instead, users just need to open the newly created app to get quick access to the website
Service worker, can be understood simply, its job is to cache data, that is, after the data is cached successfully -> if the user is offline (no need to connect to the network) -> can still load the data successfully , because at that time the system will check in the cache and find the corresponding data and upload it. But the condition to be able to cache successfully -> for the first time accessing the website, the user still needs to connect to the network for the service worker to be registered -> scan -> proceed to cache
The prerequisite to be able to apply PWA is to successfully apply the web manifest with the service worker

Tools and libraries used in the article:

Spring tool suite
Spring boot 3
Thymeleaf
Maven
Java 17
Service worker script file
Web manifest file
Lighthouse extension

1. Create a Spring boot project with the directory structure as below:

2. Contents of pom file:

3. Application class content:

4. Controller content:

Main Controller:

UserController :

5. User model content:

I proceed to start the project up:

I check Cache Storage:

=> Currently no data is cached

Next, I will test a scenario, I check the “Offline” option on devtools and reload the page:

=> Website can’t load because it’s offline

Before applying web manifest and service worker, I create an api with “POST” method to load “name” and “message”

I update the MainController again:

I created a function to send request data in index.html:

I restart the project and check:

=> Call api success

6. Apply web manifest:

Before applying the web manifest, I would like to introduce a few websites currently under PWA application:

Youtube:

Angular homepage:

To apply web manifest -> need config manifest file, config manifest file will have content similar to below:

In this article, I will guide you to create a web manifest config file online, visit the website: https://manifest-gen.netlify.app/

We only need to enter information for some required fields as below:

App Name
Short Name
Background color
Start Url
Icon

For the icon, you can download any icon yourself or design it yourself if you want, after having the icon file -> upload this icon, here I have already downloaded an icon:

After uploading the icon successfully -> click “SUBMIT” to generate the config manifest file with the necessary icons:

In the folder “app-image” there is a folder “images” (containing icons with corresponding sizes) along with the web manifest config file:

Contents of web manifest file:

Next, I copied them all to the “static” folder:

In the index.html file, I need to specify the path to the web manifest config file and the theme color:

I restart the Project and check the “Application -> Manifest” tab to see if the config manifest file is successfully applied or not:

=> Web manifest config file applied successfully

Next, before applying the service worker, I introduce a pretty cool tool called Lighthouse, which can be installed here:

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

After successful installation, check at the devtools interface, there will be a “Lighthouse” tab added:

Here, I just wanted to check what I am currently missing to be able to apply the PWA, so I just selected the PWA option -> click “Analyze page load”:

You can see that this website currently lacks 2 more things to be able to apply PWA successfully, I will detail the missing parts:

=> 2 missing parts related to service worker have not been applied and 1 error related to icon seems to not load, I will check this first

I check the “Network” tab and see the “144×144” resolution icon loaded successfully:

Next I checked the “Application – Manifest” tab and saw a few warnings related to incorrect resolution:

I am only interested in icons with a resolution of “144×144” and see that the height of the icon is only 95px -> I will try to get another icon with the correct resolution “144×144″, here I take the icon temporarily from the page ” angular.io “:

I copied this icon to the “icons” folder and edited the icon information in the config manifest:

I restart the project and check if the icon error is resolved:

Please notice if right at the icon used by chrome -> the new icon is applied successfully

I’ll double check with Lighthouse:

=> Currently, after scanning with Lighthouse -> only one condition is missing is apply service worker -> issue icon has been fixed, in addition, instead of finding another icon, you just need to set the size again

7. Apply Service worker:

Similar to the web manifest, we also need a service worker script file to register, to generate a simple service worker file, you can do it in a few ways as below:

Create a script file manually and add the necessary functions. You can refer to this page: https://developer.chrome.com/docs/workbox/caching-strategies-overview/
Create an automatic script file online. You can use this website to download a simple service worker script file: https://www.simicart.com/manifest-generator.html/

You see on this page there is also support for generating config web manifest files and service workers

In this article, I create a service worker script file with the following content:

// Establish a cache name
const cacheName = 'LocalHostCache';

self.addEventListener('fetch', event =&gt; {
	  try {
	    var request = event.request;
	    
		event.respondWith(caches.open(cacheName).then((cache) =&gt; {
			  return cache.match(request).then((cachedResponse) =&gt; {
				const fetchedResponse = fetch(request).then((networkResponse) =&gt; {
				  cache.put(request, networkResponse.clone());

				  return networkResponse;
				});

				return cachedResponse || fetchedResponse;
			  });
			}));
	    
	  } catch (e) {
	    return event.respondWith(new Response('Error thrown ' + e.message));
	  }
	});

// Establish a cache name

const cacheName = 'LocalHostCache';

self.addEventListener('fetch', event => {

try {

var request = event.request;

event.respondWith(caches.open(cacheName).then((cache) => {

return cache.match(request).then((cachedResponse) => {

const fetchedResponse = fetch(request).then((networkResponse) => {

cache.put(request, networkResponse.clone());

return networkResponse;

});

return cachedResponse || fetchedResponse;

});

}));

} catch (e) {

return event.respondWith(new Response('Error thrown ' + e.message));

}

});

Next, I proceed to register the service worker from the script file above, in the index.html file I add the function:

   if ("serviceWorker" in navigator) {
      // Register a service worker hosted at the root of the
      // site using the default scope.
      navigator.serviceWorker.register("/ngsw-worker.js").then(
        (registration) =&gt; {
          console.log("Service worker registration succeeded:", registration);
        },
        (error) =&gt; {
          console.error(`Service worker registration failed: ${error}`);
        }
      );
    } else {
      console.error("Service workers are not supported.");
    }

if ("serviceWorker" in navigator) {

// Register a service worker hosted at the root of the

// site using the default scope.

navigator.serviceWorker.register("/ngsw-worker.js").then(

(registration) => {

console.log("Service worker registration succeeded:", registration);

(error) => {

console.error(`Service worker registration failed: ${error}`);

}

);

} else {

console.error("Service workers are not supported.");

}

Refer to this page for more information: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register

I restart the project and check:

=> Service worker is registered successfully, I will check again with Lighthouse:

Lighthouse informs that the PWA is successfully applied to this website, I check if the PWA icon is created successfully:

=> Icon created successfully

Next, I click the icon and install to build a native app:

=> Successfully build 1 app -> each time if you want to access this website, instead of going to the browser, you just need to run the external app.

Next, I check the Cache Storage to see if the cache was created successfully:

I will test with the offline mode, I check the offline option in the browser and reload the page:

=> You see in the offline case -> the data will be loaded from cache storage if found and the loading time is very fast

In this article, I will guide more how to be able to cache data with POST method, by default service worker can only cache data with GET method, you can refer to this at point 4 on this page:

https://w3c.github.io/ServiceWorker/#cache-put

I will try calling api with POST method and test in Cache Storage:

=> Service worker can scan this api but can’t save cache

The solution here is to convert back to the GET method and save the cache, I update the script file as follows:

 // Establish a cache name
const cacheName = 'LocalHostCache';

self.addEventListener('fetch', event =&gt; {
	  try {
	    var request = event.request;
	    if (event.request.method == 'POST') {
	    	  const body = event.request.clone().text();

	    	  // Create new request
	    	  const cacheUrl = new URL(event.request.url);

	    	  // Store the URL in cache 
	    	  cacheUrl.pathname = '/POST' + cacheUrl.pathname;

	    	  // Convert to a GET to be able to cache
	    	  const cacheKey = new Request(cacheUrl.toString(), {
	    	    headers: request.headers,
	    	    method: 'GET',
	    	  });
			  
			  request = cacheKey;

	    }
		event.respondWith(caches.open(cacheName).then((cache) =&gt; {
			  return cache.match(request).then((cachedResponse) =&gt; {
				const fetchedResponse = fetch(event.request).then((networkResponse) =&gt; {
				  cache.put(request, networkResponse.clone());

				  return networkResponse;
				});

				return cachedResponse || fetchedResponse;
			  });
			}));
	    
	  } catch (e) {
	    return event.respondWith(new Response('Error thrown ' + e.message));
	  }
	});

// Establish a cache name

const cacheName = 'LocalHostCache';

self.addEventListener('fetch', event => {

try {

var request = event.request;

if (event.request.method == 'POST') {

const body = event.request.clone().text();

// Create new request

const cacheUrl = new URL(event.request.url);

// Store the URL in cache

cacheUrl.pathname = '/POST' + cacheUrl.pathname;

// Convert to a GET to be able to cache

const cacheKey = new Request(cacheUrl.toString(), {

headers: request.headers,

method: 'GET',

});

request = cacheKey;

}

event.respondWith(caches.open(cacheName).then((cache) => {

return cache.match(request).then((cachedResponse) => {

const fetchedResponse = fetch(event.request).then((networkResponse) => {

cache.put(request, networkResponse.clone());

return networkResponse;

});

return cachedResponse || fetchedResponse;

});

}));

} catch (e) {

return event.respondWith(new Response('Error thrown ' + e.message));

}

});

I restart the project and check Cache Storage:

=> POST method is cached successfully

I’ll check again with the offline script:

For those who want to apply PWA in angular js, you can use the command:

ng add @angular/pwa

1 2	ng add @angular/pwa

When using this command, the default will get all the things needed to apply the PWA such as the web manifest – service worker config and icons file, and will automatically register the service worker in the app module and add the web manifest path. in angular.json. To test directly locally with angular you can install “http-server”

npm install --global http-server

1 2	npm install --global http-server

There will be some cases when you add PWA in angular -> only angular package is added, and other methods like web manifest – icons – service worker config are not applied successfully -> maybe due to the current angular version In your project -> should install the PWA corresponding to the current angular version, for example in the project you are using angular 10 -> when adding the PWA, you should add the version like:

 ng add @angular/pwa@0.1002.4

1 2	ng add @angular/pwa@0.1002.4

One thing to note when applying PWA, you need to make sure that the path declared in the “start_url” of the web manifest must be the same as the scope of the service worker config file, that is, for example, my service worker config file is currently located. in the “static” folder -> the path will be: ” http://localhost:8080/manifest.json ” -> start_url I leave the default as “/” -> it will interpret itself as ” http ://localhost:8080/manifest.json” ://localhost:8080/ ” and the service worker should do the same thing:
” http://localhost:8080/ngsw-worker.js ” -> default scope will be ” http://localhost:8080/ ”

If your project is single page application -> don’t worry much about this but if your project uses microservices architecture -> there will be some challenges to apply service worker, some people will call remote service worker config file from another service to register and will encounter some issues related to cors and if the domain is different -> will fail, some cases can be solved by applying reverse proxy on the server

In the future, if I have time, I will write a PWA application on a project using microservices architecture.

Share the news now

Source : Viblo

Create a simple project with Spring Boot and PWA (Progressive Web Apps) combined with Lighthouse extension

1. Create a Spring boot project with the directory structure as below:

2. Contents of pom file:

3. Application class content:

4. Controller content:

5. User model content:

6. Apply web manifest:

7. Apply Service worker:

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers