@nuxtjs/pwa Documentation

The @nuxtjs/pwa module provides a zero-config Progressive Web App (PWA) solution for Nuxt.js. Key capabilities include:

• Service Worker Registration: Automatically registers a service worker to handle offline caching.
• Manifest Generation: Automatically generates the manifest.json file required for PWA installation.
• SEO Integration: Automatically adds SEO-friendly metadata that integrates with the web manifest.
• Icon Generation: Automatically generates app icons in various required sizes.
• Push Notifications: Supports free background push notifications via OneSignal integration.

Setting meta.nativeUI to true optimizes the viewport and mobile settings to make the PWA feel more like a native mobile application.

When nativeUI: true is set:

• viewport defaults to: width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui.
• mobileAppIOS is enabled automatically (unless explicitly set to false).

When configuring your manifest, it is important to distinguish between these two identity fields:

• name: The primary identifier of the app (maximum 45 characters). It is displayed in the install dialog, extension management UI, and the Chrome Web Store.
• short_name: A shorter version of the app's name (maximum 12 characters recommended). It is used in UI areas with limited space, such as device home screens and the New Tab page. If short_name is not specified, the name will be used, but it may be truncated.

The Icon Module automatically generates app icons and favicons of various sizes using jimp. It resizes a source icon using the cover method and populates the manifest.icons[] array with the resulting asset paths.

You can customize the icon generation process by providing an icon object within the pwa configuration in your nuxt.config.js.

pwa: {
  icon: {
    /* icon options */
  }
}

You can customize Workbox behavior by passing options to pwa.workbox in your nuxt.config.js. This allows you to override default settings for precaching, runtime caching, and service worker behavior.

pwa: {
  workbox: {
    /* workbox options */
  }
}

To start the documentation site in development mode, run the following command:

yarn dev

To set up the local development environment for the documentation site, install the necessary dependencies using yarn.

yarn install

Install the @nuxtjs/pwa dependency as a development dependency using Yarn or NPM, then register it in your nuxt.config.js file under the buildModules array.

Note: If you are using ssr: false in production mode without running nuxt generate, you must add the module to the modules array instead of buildModules.

yarn add --dev @nuxtjs/pwa
# or
npm i --save-dev @nuxtjs/pwa

// nuxt.config.js
{
  buildModules: [
    '@nuxtjs/pwa',
  ]
}

To build the documentation site for static hosting, use the generate command. This creates a dist/ directory. To preview the resulting static site locally, use the start command.

yarn generate
yarn start

You can configure the Web App Manifest by passing options to pwa.manifest within your nuxt.config.js. This allows you to override the default values derived from your package.json or the module's internal defaults.

pwa: {
  manifest: {
    name: 'My Awesome App',
    lang: 'fa',
    useWebmanifestExtension: false
  }
}