gridsome-plugin-pwa icon indicating copy to clipboard operation
gridsome-plugin-pwa copied to clipboard

Serve manifest.json in development mode

Open cco3 opened this issue 4 years ago • 6 comments

It'd be nice if this plugin automatically configured the express server to serve up the manifest.json file

cco3 avatar Dec 20 '19 15:12 cco3

@cco3 feel free to send a PR 👍, Thanks!

rishabh3112 avatar Dec 20 '19 16:12 rishabh3112

I am trying to work on it, but this requires a lot of change. My solution is to write a simple webpack plugin (inspired by vue-cli) and add manifest.json and icons as assets. Currently testing it.

A few behaviors will change:

  • manifest and icons will regenerate every time in development
  • webpack build seems hang forever when there is error in plugin. Need to prevent error before build
  • icons will be located in another location, because gridsome seems to overwrite assets/static/ in development

Is there a better solution?

AllanChain avatar Jun 27 '20 14:06 AllanChain

@AllanChain Thanks for putting efforts into this 😀. I think we can configure express instance of gridsome's development server. Look for configureServer hook in it's server API. We can configure /manifest.json to serve manifest.

rishabh3112 avatar Jun 27 '20 14:06 rishabh3112

@rishabh3112 Serving manifest.json is simple. The problem is the icons. (browser will follow manifest and request icons.)

It's still difficult to configure dev server under assets/static/ because of its special meaning.

Also, generating on plugin init and serving from memory / temp dir, does not sound so good.

AllanChain avatar Jun 28 '20 00:06 AllanChain

@AllanChain why not create icons themselves while serving on the route /manifest.json?, this way we would be generating icons after Gridsome overrides the folder.

Idea for watching icon for changes/regenerating (by configuring devServer in webpack config) justn't look good to me as sharp how ever fast, it would slow down the dev time be approx ~1s in case of a change, plus other caveats you mentioned as well.

rishabh3112 avatar Jun 29 '20 15:06 rishabh3112

Emm, webpack dev server is serving from memory.. Means there is no actual assets/static dir to write. But it's possible to setup temp dir or force dev server write to disk to achieve this

Serving on manifest.json may still lead to icon not found error because browser request might be faster. (Although on my computer, icons are generated in 0.2s)

The path of icons still need to change if you don't want to use ugly /assets/static/${filename}.*?${fileExtension}-like way to config dev server.

And indeed, let dev server to handle this is a good way to solve the first con listed below.


Listing / updating pros and cons of adding as webpack assets:

  • pros
    • one config for dev and prod
  • cons
    • extra build time or extra memory usage (generate every time or save in memory)
    • output to a different path
    • (there is a way to prevent build hang, as an update to above comment)

AllanChain avatar Jun 30 '20 01:06 AllanChain