{"id":21822347,"url":"https://github.com/sebastian-software/app-manifest-loader","last_synced_at":"2025-07-20T11:31:29.493Z","repository":{"id":23730277,"uuid":"99710066","full_name":"sebastian-software/app-manifest-loader","owner":"sebastian-software","description":"Web App Manifest Loader for Webpack","archived":true,"fork":false,"pushed_at":"2022-12-07T17:31:34.000Z","size":3669,"stargazers_count":13,"open_issues_count":18,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-30T20:51:55.545Z","etag":null,"topics":["browserconfig","icons","json","loader","manifest","pwa","tiles","webpack","xml"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sebastian-software.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-08T15:49:42.000Z","updated_at":"2025-03-25T19:50:11.000Z","dependencies_parsed_at":"2023-01-14T00:00:22.680Z","dependency_job_id":null,"html_url":"https://github.com/sebastian-software/app-manifest-loader","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/sebastian-software/app-manifest-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fapp-manifest-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fapp-manifest-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fapp-manifest-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fapp-manifest-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebastian-software","download_url":"https://codeload.github.com/sebastian-software/app-manifest-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fapp-manifest-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266117054,"owners_count":23878997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browserconfig","icons","json","loader","manifest","pwa","tiles","webpack","xml"],"created_at":"2024-11-27T17:14:23.279Z","updated_at":"2025-07-20T11:31:24.485Z","avatar_url":"https://github.com/sebastian-software.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web App Manifest Loader for Webpack\u003cbr/\u003e[![Sponsored by][sponsor-img]][sponsor] [![Version][npm-version-img]][npm] [![Downloads][npm-downloads-img]][npm] [![Build Status Unix][travis-img]][travis] [![Build Status Windows][appveyor-img]][appveyor] [![Dependencies][deps-img]][deps]\n\n[sponsor]: https://www.sebastian-software.de\n[deps]: https://david-dm.org/sebastian-software/app-manifest-loader\n[npm]: https://www.npmjs.com/package/app-manifest-loader\n[travis]: https://travis-ci.org/sebastian-software/app-manifest-loader\n[appveyor]: https://ci.appveyor.com/project/swernerx/app-manifest-loader/branch/master\n[sponsor-img]: https://badgen.net/badge/Sponsored%20by/Sebastian%20Software/692446\n[deps-img]: https://badgen.net/david/dep/sebastian-software/app-manifest-loader\n[npm-downloads-img]: https://badgen.net/npm/dm/app-manifest-loader\n[npm-version-img]: https://badgen.net/npm/v/app-manifest-loader\n[travis-img]: https://badgen.net/travis/sebastian-software/app-manifest-loader?label=unix%20build\n[appveyor-img]: https://badgen.net/appveyor/ci/swernerx/app-manifest-loader?label=windows%20build\n\nLoader to deal with modern PWA/SPA manifest files:\n\n- [Web Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest): Chrome 39+\n- [Browserconfig](\u003chttps://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)\u003e): IE11+, Windows 8+\n\nEasy to use. Two formats, one loader. Ready for Webpack v4. Enjoy.\n\n```bash\n$ npm install --save-dev app-manifest-loader\n```\n\n## Web App Manifest\n\nRe-References all images declared in the `icons` and `screenshots` fields.\n\nHere you'll find additional documentation on the corresponding standard:\n\n- [Google Developers](https://developers.google.com/web/fundamentals/web-app-manifest/)\n- [Mozilla](https://developer.mozilla.org/en-US/docs/Web/Manifest)\n- [W3C](http://www.w3.org/TR/appmanifest/)\n\n## Browserconfig\n\nRe-References all images find in any of the `tile` configurations.\n\n## Usage\n\n[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/#using-loaders)\n\nIn your Webpack config:\n\n```js\nmodule: {\n  rules: [\n    {\n      test: /(manifest\\.webmanifest|browserconfig\\.xml)$/,\n      use: [\n        {\n          loader: \"file-loader\"\n        },\n        {\n          loader: \"app-manifest-loader\"\n        }\n      ]\n    }\n  ]\n}\n```\n\nNote that this example also uses [file-loader](https://github.com/webpack-contrib/file-loader).\n\nThen, require the manifest in your application code:\n\n```js\nimport manifest from \"./manifest.webmanifest\"\nimport browserconfig from \"./browserconfig.xml\"\n```\n\nIn typical React application you might want to use React Helmet. Then the typical approach is to use the imported URL at the corresponding `link` element:\n\n```html\n\u003clink rel=\"manifest\" href=\"{manifest}\" /\u003e\n\u003cmeta name=\"msapplication-config\" content=\"{browserconfig}\" /\u003e\n```\n\nFor ReactJS you typically might want to use it together with [React Helmet Async](https://github.com/staylor/react-helmet-async):\n\n```js\nimport Helmet from \"react-helmet-async\"\n\nimport manifest from \"./manifest.webmanifest\"\nimport browserconfig from \"./browserconfig.xml\"\n\nfunction renderHead() {\n  return (\n    \u003cHelmet\u003e\n      \u003clink rel=\"manifest\" href={manifest} /\u003e\n      \u003cmeta name=\"msapplication-config\" content={browserconfig} /\u003e\n    \u003c/Helmet\u003e\n  )\n}\n```\n\nThe manifest allows you to provide image paths in the standard Webpack format inside your manifest:\n\n```js\n{\n  \"name\": \"Hello World\",\n  ...\n  \"screenshots\": [\n    {\n      \"src\": \"./images/screenshot-portrait.png\",\n      \"sizes\": \"2560x1440\",\n      \"type\": \"image/png\"\n    },\n    ...\n  ],\n  \"icons\": [\n    {\n      \"src\": \"./images/icon.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image/png\"\n    },\n    ...\n  ]\n}\n```\n\n## Alternatives\n\nWe chose to implement this as a loader to be able to import hand written and optimized manifests with their matching images.\n\nAn alternative concept would be to generate most of the required image by automatic image scaling by just defining a few master images. In this case you would typically use this well maintained plugin:\n\n- [Webpack PWA Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest)\n\nCompared to the loader based solution this moves application specific data into the Webpack configuration. One could argue that with shared Webpack configurations this introduces some app specific sections in a tooling related file.\n\n## Copyright\n\n\u003cimg src=\"https://cdn.rawgit.com/sebastian-software/sebastian-software-brand/0d4ec9d6/sebastiansoftware-en.svg\" alt=\"Logo of Sebastian Software GmbH, Mainz, Germany\" width=\"460\" height=\"160\"/\u003e\n\nCopyright 2017-2019\u003cbr/\u003e[Sebastian Software GmbH](http://www.sebastian-software.de)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian-software%2Fapp-manifest-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebastian-software%2Fapp-manifest-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian-software%2Fapp-manifest-loader/lists"}