pwa-module VS pwa-asset-generator

My go-to is https://pwa.nuxtjs.org/ + pwabuilder. You can have the barebones scaffolding made in 1 minute. Then just add your custom UI/logic, and deploy, and point the PWA Builder at the deployed Nuxt site, and it will generate your App store package.

In terms of stack I would recommend taking a look at Vue and Nuxt. There is a PWA module for Nuxt, which handles everything for you, so you literally only need to add 5 lines of config (implementing service workers yourself can be tedious).

Note that if your original project is built with Nuxt (a Vue meta-framework), you have a better-suited solution readily available in the Nuxt PWA module. Nuxt and its ecosystem of plugins are a bit much to tackle in the scope of this post, but the same PWA general principles we’ll cover here apply there, too. The difference is how the config options are entered. So, while the concepts translate, if you’re using Nuxt, I’ll refer you to the Nuxt PWA module docs for the details.

Documentation

The stack behind Journalistic is Django and Nuxt. The nuxt/pwa module takes care of everything PWA-related on the app side: manifest, service worker, etc. Easy peasy.

It's Nuxt.js with @nuxtjs/pwa, BTW.

Nuxt.js modules: Progressive Web App (PWA)

To generate icons, we use pwa-asset-generator. The first command generates a favicon icon with a transparent background, the second one creates all the necessary icons for a progressive web app, and the third one creates images for splash screens. The last command is optional, in case you have an icon for dark mode.

the easiest to use is still: https://github.com/onderceylan/pwa-asset-generator

Creating our home screen icons manually can be a very complicated task, but not to worry. We'll take advantage of a third-party module known as pwa-asset-generator to generate icons of different sizes from our main app icon inside the public directory with the command below:

If you want to create PWA, you will need icons for your application for different platforms. This package uses pwa-assets-generator to create icons from an image. It will automatically insert links to icons into the HTML of every page and in the manifest.json file along with generated icons. All you need is an image as a template for future icons. By default, it is a favicon.png under the src directory.

pwa-asset-generator

Thank you for the article. It is certainly alluring to reduce the number of generated images linked in the in PWA apps.

I use https://github.com/onderceylan/pwa-asset-generator to generate assets for PWA's(have left a message on this repo to read your article!)