Adding a PWA in Nuxt.js

Most people don't realise how easy it really is to add a PWA with Nuxt.js. Progressive Web Apps (PWA) deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. You can turn your website into a PWA which will give you the benefits of better offline support as well as that app like look and feel. Just save it to the home screen and open it from there and you will see how amazing it is.

The Nuxt.js PWA module registers a service worker for you to deal with offline caching.

• It automatically generates a manifest.json file
• It automatically adds SEO friendly meta data with manifest integration
• It automatically generates app icons with different sizes
• And you can even set up free push notifications using OneSignal

Ok so there is a lot of automatic stuff so what do you need to do exactly?

1) Install the npm package

yarn add @nuxtjs/pwa 
or
npm i @nuxtjs/pwa

2) Add the module to your nuxt.config.js file

{
    modules: [
        '@nuxtjs/pwa',
    ]
}

3) Add an icon.png file to your static directory. It should be square and be at least 512px x 512px.

4) In your .gitignore file make sure you ignore the service worker file.

sw.*

And that's it you now have a PWA up and running.

You can also further customise the PWA by modifying the title and author or name for example. The module by default adds the package.json name and author but you can modify this by creating a pwa key in your nuxt.config.js file and modifying the meta or manifest properties.

pwa: {
  meta: {
    title: 'My PWA',
    author: 'Me',
  },
  manifest: {
    name: 'Nuxt.js PWAs are so easy',
    short_name: 'Nuxt.js PWA',
    lang: 'en',
  },
}

For a full list of meta options for your pwa see the Nuxt PWA docs

Comments

[Jérôme Pott]

Thanks for the quick guide.

I encourage web developers to first consider whether a PWA really makes sense for the website they're building. Is there a real benefit to install it? Is it performant? Does it really work offline? The problem with most PWAs is that they fall back to the cache when the user is completely offline, but not on a flaky network or on lie-fie.

If you deem that a PWA will bring an added value, then please think carefully about the best time for showing the install banner. For example, after a purchase (here more about this topic: web.dev/promote-install/). You can save the native install prompt and show it when you see it fit.

Personally I hate PWA install banners popping up the first time I visit a website. At this rate, there will be a global setting to block them as it's currently the case for push notifications.

So yes, it's indeed easy to install that module, but it's much harder to have a PWA that truly behaves like a native app. Also, developers should take the time to examine the different caching strategies and then choose the most appropriate one for their websites. The Nuxt PWA module is based on the excellent Workbox library and you can customize the module to your needs. Don't hesitate to read the Workbox docs.

[Debbie O'Brien]

Thanks for your comments. Yes I agree. I never install anything which is why I only use a PWA for better performance and it does work great especially for some sites when you are in airplane mode but can still access the site and read articles etc. So yes it does work offline if you have first connected online and it is therefore in your cache. Google recommends creating a PWA for better performance and as I generally encourage good performance I would personally recommend installing a PWA. How far you take that PWA into the native world and how many push notifications you create is another story. Personally I just use the basics for performance and nothing else though I am sure having some push notifications could bring some added benefit.

[Sanusi Victor Olajuwon]

Hi Debbie, thanks for sharing this 😃. I seem to be finding it difficult to setup this up on a Nuxt 2 app. The app is server side rendered and after installing and setting up the pwa config, the install option is not available in my browser. I also checked and found out that the manifest.json was not missing. What do You think could be the problem? Thanks.

[Debbie O'Brien]

emmm no idea. i was using static site for mine so not server side. not sure if that is the issue. check the module though that it is compatabile with Nuxt 2 as there might be an update or something that has changed

[Sanusi Victor Olajuwon]

Thanks for your reply Debbie. I'll keep looking though. Have an amazing evening.

[riyaz7us]

I successfully setup the application with pwa. However, I cannot serve it via nginx reverse proxy (Although it works on localhost:3000, not virtual hosts, not even static generated app).

[Javier Pomachagua]

Yep I have the same problem!
Running my backend (Laravel) and Frontend in VM Homestead with VirtualHost.

[riyaz7us]

I've found the solution i.e., NGINX configuration (Here, I'm serving laravel backend from subdomain like api.example.com and nuxt frontend from example.com). I made it successful using the configuration below within example.test.conf at nginx/sites-enabled and updating virtual hosts.

# HERE, I'M USING LARAGON TO SERVE MY PAGES LOCALLY
# MY FRONTEND URL -- NUXT (Static Directory) 
server {
    listen 80;
    server_name example.test;
        root "C:/laragon/www/Example/NuxtDirectory/dist/";

    index index.html index.htm;


    location / {
        try_files $uri $uri/ /index.php$is_args$args;
        autoindex on;
    }   

    charset utf-8;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }
    location ~ /\.ht {
        deny all;
    }
}
# MY BACKEND URL -- LARAVEL
server {
    listen 80;
    server_name api.example.test;
        root "C:/laragon/www/EXAMPLE/LaravelDirectory/public";

    index index.html index.htm index.php;


    location / {
        try_files $uri $uri/ /index.php$is_args$args;
        autoindex on;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass php_upstream;      
        #fastcgi_pass unix:/run/php/php7.0-fpm.sock;
    }


    charset utf-8;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }
    location ~ /\.ht {
        deny all;
    }
}

P.S. You may need to use reverse proxy if you're serving frontend with nuxt (SSR) like this:

    location / {
        proxy_pass     http://127.0.0.1:3000; 
    }

Nuxt has comprehensive guide for reverse proxy here: nuxtjs.org/faq/nginx-proxy/

I hope you'd achieve it with similar configuration.

P.P.S: Laravel will block cross origin requests if you're using older laravel versions, this might be helpful:
github.com/fruitcake/laravel-cors

[Dries Bos]

Just added it! Quick update: as of Nuxt 2.9+ the PWA needs to be registered in the build modules:

{
buildModules: [
'@nuxtjs/pwa',
]
}