I have a Vue Cli 3 project with @vue/cli-plugin-pwa
plugin installed and configured (in vue.config.js
), but when I run vue-cli-service build --modern
no manifest.json
is generated based on my config.
I'm expecting to see a manifest.json
that would contain, at the very least, the paths of the icons I specified. Maybe also the settings that I put in the vue.config.js
.
Am I doing something wrong or maybe my expectation of how the plugin should work doesn't match the actual behavior?
How am I supposed to make Vue generate my manifest.json
?
Making your Vue app a PWA The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you. For existing projects, you can run the vue add command to install the PWA plugin for Vue.
Default Service Worker Let's start with adding the Vue/PWA plugin to our Vue app (to generate a new app with the Vue CLI, read the docs over here). This will give you an extra file in the /src directory: registerServiceWorker. js . This file is then imported in main.
To install and invoke PWA Vue CLI plugin execute this command: Build your app again in production mode and deploy it locally. Now we can ask Mr. Taster about the PWA factor.
Especially since the default usecase of Vue CLI 3 is to use the generated index.html, which doesn't require a manifest for anything. Sorry, something went wrong. Thanks. I didn't know that it would be that easy.
If the path is an URL, the plugin won't generate a manifest.json in the dist directory during the build. The object will be used to generate the manifest.json If the following attributes are not defined in the object, the options of pwa or default options will be used instead.
'GenerateSW' (default), will lead to a new service worker file being created each time you rebuild your web app. 'InjectManifest' allows you to start with an existing service worker file, and creates a copy of that file with a "precache manifest" injected into it.
I had the same issue. I ran a production build: yarn build
or npm build
and found the manifest.json
file in the dist
folder.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With