markdalgleish / web-app-manifest-loader Goto Github PK

41.0 2.0 8.0 18 KB

Web app manifest loader for webpack

License: MIT License

JavaScript 100.00%

web-app-manifest-loader's Introduction

web-app-manifest-loader

Load images referenced in the icons and splash_screens fields in your Web App Manifest using webpack.

$ npm install --save-dev web-app-manifest-loader

Usage

Documentation: Using loaders

In your webpack config:

module: {
  loaders: [
    {
      test: /manifest.json$/,
      loader: 'file-loader?name=manifest.json!web-app-manifest-loader'
    }
  ]
}

Note that this example also uses file-loader.

Then, require the manifest in your application code:

require('./manifest.json');

This allows you to provide image paths in the standard webpack format inside your manifest:

{
  "name": "Hello World",
  ...
  "splash_screens": [
    {
      "src": "./images/splash-hi.png",
      "sizes": "2560x1440",
      "type": "image/png"
    },
    ...
  ],
  "icons": [
    {
      "src": "./images/icon-hi.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    ...
  ]
}

License

MIT License

web-app-manifest-loader's People

Contributors

Stargazers

Watchers

Forkers

amay richardivan fiuzagr halkeye georgespyropoulos luizb

web-app-manifest-loader's Issues

Automatically insert link to head

Currently I have to insert link manually with both file-loader and this one:

import manifest from './manifest.json';

<Helmet>
          <link rel="manifest" href={manifest} />
</Helmet>

It should behave like style-loader, which automatically insert link to <head>. So we can leverage modules like CommonsChunkPlugin etc...

Wrong relative path

I added the loader like the following:

{
     test: /manifest.json$/,
     loader: 'file-loader?name=static/[name].[hash].[ext]!web-app-manifest-loader'
}

I required the manifest require('./manifest.json') and got a manifest like this:

{
  "name": "Web Application Manifest Sample",
  "icons": [
    {
      "src": "static/48.582dae785db93a86476fce708f6d4965.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": 0.75
    }
...

It is embedded in the html like the following:

<link rel="manifest" href="static/manifest.c9c8aa597bfdf6603f400152c60c27e4.json">

According to MDN, relative urls should be relative to the manifest, quoting

Quoting MDN:

The path to the image file. If src is a relative URL, the base URL will be the URL of the manifest.

This seems like a bug. The JSON should look like this:

{
  "name": "Web Application Manifest Sample",
  "icons": [
    {
      "src": "48.582dae785db93a86476fce708f6d4965.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": 0.75
    }
...

FaviconsWebpackPlugin

Hi,

This loader should be able to get its icon files from the FaviconWebpackPlugin.

Or should the manifest webpack plugin also have an option to output a web manifest?

What do you think?

JSON.parse invalid json

In this try

try { var manifest = JSON.parse(source); } catch (err) { return callback(new Error('Invalid JSON in Web App Manifest')); }

I'm getting the error message Invalid JSON in Web App Manifest

But JSON in my manifest.json is valid

Loaders can't be specified inline

For example, the following won't work:

{
  "icons": [
    "src": "file-loader!./image.png",
    "sizes": "256x256",
    "type": "image/png"
  ]
}

Webpack 4 support?

Are you planning on adding webpack 4 support? :)

markdalgleish / web-app-manifest-loader Goto Github PK

web-app-manifest-loader's Introduction

web-app-manifest-loader

Usage

License

web-app-manifest-loader's People

Contributors

Stargazers

Watchers

Forkers

web-app-manifest-loader's Issues

Automatically insert link to head

Wrong relative path

FaviconsWebpackPlugin

JSON.parse invalid json

Loaders can't be specified inline

Webpack 4 support?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent