How to use static content in app root directory in grails

In Grails latest version, it provides static assets management mechanism. You can use different files under the corresponding folders.

All the images will go under the images directory, js files go under the javascripts directory and CSS goes under the stylesheets directory. These files will be accessed by the URL path start with "/assets/".

Now, what if you don't want to use this structure or need to use the root path for some static file content.

For this, grails provide another option to manage static resources. So, what you can do is create the /resources/public directory under /src/main/ and use static resources there.

For example, if you had a file under /src/main/resources/public/images/example.jpg path then you can access that file using https://example.com/static/images/example.jpg.

This means, your file can be accessed with "/static/" URL by default.

If you want to access the file in the app root directory, setup the following configuration under application.groovy

grails.resources.pattern = '/**'

Now, for the above example the file can be accessed with https://example.com/images/example.jpg URL and if the file is in /public/ directory that file can be accessed with root path https://example.com/file.js

Read More

Adding PWA support in existing VueJs application

In this tutorial, we are going to add the PWA support in the existing VueJs application.

1. Install Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2. Add PWA in our application

Let's open the terminal or command prompt and go to the project directory and add PWA  to the project.

vue add pwa

This will add a couple of files and settings for PWA in our existing application.

1. registerServiceWorker.js under ./src directory.

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

Inside this file, the service worker is registered, and also, we can see the different hooks implemented which we can use in different cases like when the update is found in the app when the user is offline etc.

2. Dependencies added

Under package.json you can see the register-service-worker and PWA plugin is added.

3. Added some icons

Under public/img/icons/ folder some icons are added for mobile, desktop display. Make sure to change your icons for different devices. For more detail on changing this follow the following article.

VueJs Progressive Web Apps(PWA): How to Change the App Name, Icon, Color, Display for Mobile Devices.

If you want to configure via config file follow this guide.

Besides this, registerServiceWorker is imported inside main.js file.

3. Build and Deploy the application.

Build and deploy the application, you can see the service worker is activated and running.

You can see the cached file inside cache storage.

By default, it uses default mode which means a service worker is generated for us. If you want to customize it follow the following articles.

How to Use and Customize Service Worker in VueJs Progressive Web Apps(PWA)

To notify the users about the app update follow the following post.

VueJs PWA: Notify User about the App Update | skipWaiting

Read More