{"_id":"@danieljaniga/pwa-install","_rev":"2-285e714aa98a4fa1e272f57b2c4b52df","name":"@danieljaniga/pwa-install","dist-tags":{"latest":"0.5.6"},"versions":{"0.5.5":{"name":"@danieljaniga/pwa-install","version":"0.5.5","keywords":["PWA","lit-element","lit"],"author":{"name":"khmyznikov"},"license":"MIT","_id":"@danieljaniga/pwa-install@0.5.5","maintainers":[{"name":"danieljaniga","email":"danieljaniga@gmail.com"}],"homepage":"https://github.com/khmyznikov/pwa-install#readme","bugs":{"url":"https://github.com/khmyznikov/pwa-install/issues"},"dist":{"shasum":"f1e39a41004530993a99b797b2c90e31666b9817","tarball":"https://registry.npmjs.org/@danieljaniga/pwa-install/-/pwa-install-0.5.5.tgz","fileCount":53,"integrity":"sha512-xEQbNVhxxtNM/rj6z/iCHPeLjfeSEVHswnxMEMTXG1t4khI3873rLRfo9iKk7kVrKWcjv53sG+d69oOqtZiLpQ==","signatures":[{"sig":"MEUCIGAVuZfy194L7QtcgtukyMo3EmRmBaMuzsnYUI5pTuzDAiEA2oLf9/tsP4X5ktHmjJOrr4X090xDgrC3ZoI4/XL82/U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1125278},"main":"dist/pwa-install.bundle.js","type":"module","types":"dist/types/index.d.ts","module":"dist/pwa-install.es.js","exports":{".":{"types":"./dist/types/index.d.ts","default":"./dist/pwa-install.es.js"},"./react-legacy":{"types":"./dist/types/react-legacy/pwa-install.react-legacy.d.ts","default":"./dist/react-legacy/pwa-install.react-legacy.js"},"./dist/react-legacy/pwa-install.react-legacy.js":{"types":"./dist/types/react-legacy/pwa-install.react-legacy.d.ts","default":"./dist/react-legacy/pwa-install.react-legacy.js"}},"gitHead":"88f9ea6aea231e3ff61b21b0a4ee93f064fbfaf4","scripts":{"dev":"webpack serve --config webpack/webpack.dev.js --mode=development","test":"npm run build:noloc && node ./webpack/serve.js","build":"npm run localize:extract && npm run localize:build && npm run build:noloc","build:noloc":"webpack --config webpack/webpack.prod.js --mode=production && webpack --config webpack/webpack.prod.module.js --mode=production  && webpack --config webpack/webpack.prod.umd.js --mode=production && npx webpack --config webpack/webpack.prod.react.js --mode=production && npm run cem:analyze  && node ./scripts/postbuild.mjs","cem:analyze":"cem analyze","test:nobuild":"node ./webpack/serve.js","localize:build":"lit-localize build","localize:extract":"lit-localize extract"},"_npmUser":{"name":"danieljaniga","email":"danieljaniga@gmail.com"},"repository":{"url":"git+https://github.com/danieljaniga/pwa-install.git","type":"git"},"_npmVersion":"9.8.1","description":"PWA install dialog provide more convenience user experience and fix lack of native dialogs in some browsers.","directories":{},"_nodeVersion":"18.18.2","typesVersions":{"*":{"react-legacy":["./dist/react-legacy/pwa-install.react-legacy.d.ts"],"dist/react-legacy/pwa-install.react-legacy.js":["./dist/react-legacy/pwa-install.react-legacy.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.87.0","eslint":"^9.26.0","express":"^5.1.0","postcss":"^8.5.3","webpack":"^5.99.7","ts-loader":"9.5.2","typescript":"^5.8.3","@types/node":"^22.15.3","null-loader":"^4.0.1","sass-loader":"^16.0.5","webpack-cli":"^6.0.1","autoprefixer":"^10.4.21","@lit/localize":"^0.12.2","webpack-merge":"^6.0.1","postcss-import":"^16.1.0","postcss-loader":"^8.1.1","lit-scss-loader":"^2.0.1","webpack-dev-server":"^5.2.1","@lit/localize-tools":"^0.8.0","copy-webpack-plugin":"^13.0.0","clean-webpack-plugin":"4.0.0","terser-webpack-plugin":"^5.3.14","minify-lit-html-loader":"github:khmyznikov/minify-lit-html-loader","filemanager-webpack-plugin":"^8.0.0","typescript-lit-html-plugin":"^0.9.0","@custom-elements-manifest/analyzer":"^0.10.4"},"peerDependencies":{"lit":"^3.3.0","@lit/react":"^1.0.7","@types/web-app-manifest":"^1.0.9","@types/dom-chromium-installation-events":"^101.0.4"},"_npmOperationalInternal":{"tmp":"tmp/pwa-install_0.5.5_1748545107828_0.6408180883748638","host":"s3://npm-registry-packages-npm-production"}},"0.5.6":{"name":"@danieljaniga/pwa-install","version":"0.5.6","description":"PWA install dialog provide more convenience user experience and fix lack of native dialogs in some browsers.","repository":{"type":"git","url":"git+https://github.com/danieljaniga/pwa-install.git"},"type":"module","exports":{".":{"types":"./dist/types/index.d.ts","default":"./dist/pwa-install.es.js"},"./react-legacy":{"types":"./dist/types/react-legacy/pwa-install.react-legacy.d.ts","default":"./dist/react-legacy/pwa-install.react-legacy.js"},"./dist/react-legacy/pwa-install.react-legacy.js":{"types":"./dist/types/react-legacy/pwa-install.react-legacy.d.ts","default":"./dist/react-legacy/pwa-install.react-legacy.js"}},"types":"dist/types/index.d.ts","module":"dist/pwa-install.es.js","main":"dist/pwa-install.bundle.js","typesVersions":{"*":{"react-legacy":["./dist/react-legacy/pwa-install.react-legacy.d.ts"],"dist/react-legacy/pwa-install.react-legacy.js":["./dist/react-legacy/pwa-install.react-legacy.d.ts"]}},"scripts":{"build":"npm run localize:extract && npm run localize:build && npm run build:noloc","build:noloc":"webpack --config webpack/webpack.prod.js --mode=production && webpack --config webpack/webpack.prod.module.js --mode=production  && webpack --config webpack/webpack.prod.umd.js --mode=production && npx webpack --config webpack/webpack.prod.react.js --mode=production && npm run cem:analyze  && node ./scripts/postbuild.mjs","localize:extract":"lit-localize extract","localize:build":"lit-localize build","cem:analyze":"cem analyze","test":"npm run build:noloc && node ./webpack/serve.js","test:nobuild":"node ./webpack/serve.js","dev":"webpack serve --config webpack/webpack.dev.js --mode=development"},"author":{"name":"khmyznikov"},"license":"MIT","devDependencies":{"@custom-elements-manifest/analyzer":"^0.10.4","@lit/localize":"^0.12.2","@lit/localize-tools":"^0.8.0","@types/node":"^22.15.3","autoprefixer":"^10.4.21","clean-webpack-plugin":"4.0.0","copy-webpack-plugin":"^13.0.0","eslint":"^9.26.0","express":"^5.1.0","filemanager-webpack-plugin":"^8.0.0","lit-scss-loader":"^2.0.1","minify-lit-html-loader":"github:khmyznikov/minify-lit-html-loader","null-loader":"^4.0.1","postcss":"^8.5.3","postcss-import":"^16.1.0","postcss-loader":"^8.1.1","sass":"^1.87.0","sass-loader":"^16.0.5","terser-webpack-plugin":"^5.3.14","ts-loader":"9.5.2","typescript":"^5.8.3","typescript-lit-html-plugin":"^0.9.0","webpack":"^5.99.7","webpack-cli":"^6.0.1","webpack-dev-server":"^5.2.1","webpack-merge":"^6.0.1"},"peerDependencies":{"lit":"^3.3.0","@lit/react":"^1.0.7","@types/web-app-manifest":"^1.0.9","@types/dom-chromium-installation-events":"^101.0.4"},"bugs":{"url":"https://github.com/khmyznikov/pwa-install/issues"},"homepage":"https://github.com/khmyznikov/pwa-install#readme","keywords":["PWA","lit-element","lit"],"_id":"@danieljaniga/pwa-install@0.5.6","gitHead":"c7d6cdceddf2692dff69099855586b98f86a4cf8","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-dtA7UH8CKkBQVE+DiJ9EWdVpf5Bg7OqORghPmLWQYNHznxy5kpOR8slDkIRji5kNMR+wWdFRyafifig1TLCOUg==","shasum":"a40615a989316dba853f31d7d8dcc1ace1aa5b1e","tarball":"https://registry.npmjs.org/@danieljaniga/pwa-install/-/pwa-install-0.5.6.tgz","fileCount":53,"unpackedSize":1125527,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGtwxiasKRYFNauXx6UBXQjuvDVgC50QCzCpNiaxPYqgAiBUXUwPMvhulh2xJyoeqJluDYv1MLij9PzPkDuS48ftWg=="}]},"_npmUser":{"name":"danieljaniga","email":"danieljaniga@gmail.com"},"directories":{},"maintainers":[{"name":"danieljaniga","email":"danieljaniga@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pwa-install_0.5.6_1748549362897_0.48133240894677787"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-29T18:58:27.702Z","modified":"2025-05-29T20:09:23.340Z","0.5.5":"2025-05-29T18:58:28.030Z","0.5.6":"2025-05-29T20:09:23.155Z"},"bugs":{"url":"https://github.com/khmyznikov/pwa-install/issues"},"author":{"name":"khmyznikov"},"license":"MIT","homepage":"https://github.com/khmyznikov/pwa-install#readme","keywords":["PWA","lit-element","lit"],"repository":{"type":"git","url":"git+https://github.com/danieljaniga/pwa-install.git"},"description":"PWA install dialog provide more convenience user experience and fix lack of native dialogs in some browsers.","maintainers":[{"name":"danieljaniga","email":"danieljaniga@gmail.com"}],"readme":"[![Published on NPM](https://img.shields.io/npm/v/@khmyznikov/pwa-install.svg)](https://www.npmjs.com/package/@khmyznikov/pwa-install)\n[![npm](https://img.shields.io/npm/dt/@khmyznikov/pwa-install)](https://www.npmjs.com/package/@khmyznikov/pwa-install)\n## \\<pwa-install\\>\n\n**New to PWAs? Unsure how to create a Web App? Check out these resources for a quick start: [PWA Intro](https://docs.pwabuilder.com/#/home/pwa-intro), [PWA Starter](https://docs.pwabuilder.com/#/starter/quick-start), [PWA Builder](https://www.pwabuilder.com/)**\n\nInstallation dialog for Progressive Web Application (PWA) and Add to Home Screen/Dock dialog for Web Apps. This offers an enhanced user experience and addresses the absence of native dialogs in certain browsers (Safari, Firefox, Opera, etc.). **20kB brotli** compressed bundle. Translation/localization is supported.\n\nUse it as [Web Component with any **modern** framework](https://custom-elements-everywhere.com/). No polyfill is required.\n- [React <= 18 sample](https://stackblitz.com/edit/vite-react-ts-2eeiak?file=src%2FApp.tsx)\n- [Angular sample](https://stackblitz.com/edit/aozf92?file=package.json,src%2Fapp%2Fpwa-install%2Fpwa-install.component.html,src%2Fapp%2Fpwa-install%2Fpwa-install.component.ts)\n- [Svelte](https://stackblitz.com/edit/svelte-tab-2-sng9wa?file=src%2Froutes%2F%2Bpage.svelte)\n  \n⚡Should work with any other modern framework or just vanila js as web component.\n\n## **[Demo](https://khmyznikov.com/pwa-install/)**\n\n## Gallery\n| iOS default&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Install instruction | App gallery&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |\n|-|-|-|\n|![iOS example default](https://user-images.githubusercontent.com/6115884/169653932-5a9916b6-8d1f-4320-a595-86c3b797ae86.jpg)|![iOS example install instruction](https://user-images.githubusercontent.com/6115884/169654013-7d144d66-0021-44d8-8f1d-9a7d2c71cb07.jpg)|![iOS example gallery](https://user-images.githubusercontent.com/6115884/169654077-f48c9b63-2b6e-4291-a0e3-b33daf86d468.jpg)|\n\n| MacOS 14+ (Sonoma) | Install instruction |\n|---|---|\n|![sonoma_dialog-min](https://github.com/khmyznikov/pwa-install/assets/6115884/4ee02327-9abd-4d5e-a581-537dccb2187f)|![sonoma-dialog-open-min](https://github.com/khmyznikov/pwa-install/assets/6115884/6b147938-b55b-479a-85ea-1778868e6ff5)|\n\n\n\n| iPadOS |\n|---|\n|![iPadOS example light](https://user-images.githubusercontent.com/6115884/169654199-1b474920-089c-44b5-8eca-534229ce0720.jpg)|\n\n\n| Android | Firefox/Opera/Others | App gallery&nbsp;&nbsp; |\n|-|-|-|\n|![Android example default](https://user-images.githubusercontent.com/6115884/169654789-41fb88b3-97b2-4992-aab5-0def6015be21.jpg)|![Firefox Opera and others](https://github.com/user-attachments/assets/03131c42-8cd0-4e93-a2fe-d75a75223550)|![Android example white](https://user-images.githubusercontent.com/6115884/169654871-33f30d44-b70c-4912-a678-3d97fd0d80a8.jpg)|\n\n| Chrome&nbsp; | App Gallery&nbsp;&nbsp; |\n|---|---|\n|![Chrome example default](https://user-images.githubusercontent.com/6115884/169655166-07f02a6b-a72a-4eb8-8ae1-e5a32fcac530.jpg)|![Chrome example gallery](https://user-images.githubusercontent.com/6115884/169655205-34b9b1a8-328b-45f8-8cd2-f6524e82469e.jpg)|\n\n<br>\n\n## Install\n\n```bash\nnpm i @khmyznikov/pwa-install\n```\n\nAlternatively, you can use [unpkg](https://unpkg.com) or [esm.sh](https://esm.sh).\n\n\n## Import\n\n```js\nimport '@khmyznikov/pwa-install';\n```\n\n## TS Config\n```json\n\"compilerOptions\": {\n  \"moduleResolution\": \"Bundler\",\n  \"types\": [\"dom-chromium-installation-events\", \"web-app-manifest\"]\n}\n```\n\n## Use\n\n```html\n<pwa-install></pwa-install>\n```\n[React <= 18 polyfill](https://stackblitz.com/edit/vite-react-ts-2eeiak?file=src%2FApp.tsx)\n\n### **[Demo](https://khmyznikov.com/pwa-install/)**\n\n<br>\n\n## Supported params\n```html\n<pwa-install\n  manual-apple=\"true\"\n  manual-chrome=\"true\"\n  disable-chrome=\"true\"\n  disable-close=\"true\"\n  use-local-storage=\"true\"\n\n  install-description=\"Custom call to install text\"\n  disable-install-description=\"true\"\n  disable-screenshots=\"true\"\n  disable-screenshots-apple=\"true\"\n  disable-screenshots-chrome=\"true\"\n\n  disable-android-fallback=\"true\"\n\n  manifest-url=\"/manifest.json\"\n  name=\"PWA\"\n  description=\"Progressive web application\"         \n  icon=\"/icon.png\">\n</pwa-install>\n<!-- \n  manual-apple/chrome params means you want to show the Dialog manually by showDialog().\n  disable-chrome param is for completely disabling custom logic and interception for Chromium browsers (will work built-in browser logic).\n  use-local-storage will store the user's preference to ignore the prompt in long-lived storage (so they will not be prompted again unless they clear application data)\n  disable-android-fallback will disable instructions for non-Chrome browsers on Android\n--->\n```\n*Make a good manifest file and don't use name/descr/icon params. Boolean attributes needs to be removed to act like \"false\"*\n\n<br>\n\n## Supported events\n- pwa-install-success-event\n- pwa-install-fail-event\n- pwa-install-available-event\n- pwa-user-choice-result-event\n- pwa-install-how-to-event\n- pwa-install-gallery-event\n\n```html\n<script type=\"text/javascript\">\n  var pwaInstall = document.getElementsByTagName('pwa-install')[0];\n\n  pwaInstall.addEventListener('pwa-install-success-event', (event) => {console.log(event.detail.message)});\n</script>\n```\n*⚠️ success/fail/choice events is Chromium only, iOS don't have them.*\n\n<br>\n\n## Supported properties (readonly)\n- userChoiceResult: string;\n- isDialogHidden: boolean\n- isInstallAvailable: boolean\n- isAppleMobilePlatform: boolean\n- isAppleDesktopPlatform: boolean\n- isUnderStandaloneMode: boolean\n- isRelatedAppsInstalled: boolean\n\n```html\n<script type=\"text/javascript\">\n  var pwaInstall = document.getElementsByTagName('pwa-install')[0];\n\n  console.log(pwaInstall.isUnderStandaloneMode);\n</script>\n```\n<br>\n\n## Supported methods\n- install\n- hideDialog\n- showDialog\n- getInstalledRelatedApps: async\n\n```html\n<script type=\"text/javascript\">\n  var pwaInstall = document.getElementsByTagName('pwa-install')[0];\n\n  pwaInstall.install();\n</script>\n```\n\n*getInstalledRelatedApps is Chromium only, always empty on iOS.*\n\n<br>\n\n## Async mode\n\nIf you need to target Chromium browsers but you want to postpone component mounting, you can do it!\nBut, need to capture *beforeinstallprompt* manually and pass it to the component's *externalPromptEvent* property(not attribute).\n\n```javascript\n// capture event asap, better right in index.html script tag\nwindow.addEventListener('beforeinstallprompt', (e) => {\n  e.preventDefault();\n  e.stopPropagation();\n  e.stopImmediatePropagation();\n\n  // save it somewhere\n  window.promptEvent = e;\n});\n\n// later render the component on demand and pass event\ndocument.getElementById(\"pwa-install\").externalPromptEvent = window.promptEvent;\n```\n<br>\n\n## Supported localization\n\nTranslations available:\n- *EN*\n- *RU*\n- *TR*\n- *DE*\n- *ES*\n- *NL*\n- *EL*\n- *FR*\n- *SR*\n- *PL*\n- *ZH-CN*/*ZH-HK*\n- *IT*\n- *UK*\n- *CS*\n- *NO/NB*\n- *PT*\n- *JA*\n- *SV*\n- *KO*\n- *KM*\n- *DA*\n- *VI*\n- *FA*\n- *HU*\n- *SK*\n\nLanguage should change automatically based on browser settings. Please create the pull-request if you want to help with translation to your language. It's an easy process.\n\n[Contribution Guidelines](./CONTRIBUTING.md)\n\n<br>\n\n## ROADMAP\n- samsung mobile support\n- mozilla mobile support\n- manual theme\n\n\n[<img alt=\"buy me a coffee QR\" src=\"https://github.com/khmyznikov/pwa-install/assets/6115884/5168f0db-2317-4ec2-8362-d828ffa2a8bf\" width=\"200\">](https://www.buymeacoffee.com/khmyznikov)\n[<img alt=\"PayPal QR\" src=\"https://github.com/khmyznikov/pwa-install/assets/6115884/6290b136-d525-4f8e-95fe-4729ea4c6414\" width=\"200\">](https://paypal.me/hmyznikov)\n\n## One-time Backers ❤️\n[Patrick Voigt](https://github.com/pvo13)<br>\n[Darren Debono](https://github.com/amigabits)<br>\n[Angelo Fan](https://github.com/angelofan)<br>\n[Chris Cherniakov](https://github.com/Taequn)<br>\n[Moddy](https://github.com/moddyio)<br>\n[Pavlo Hromadchuk](https://github.com/hromadchuk)<br>\nLeek Duck\n","readmeFilename":"README.md"}