{"_id":"@storedotapp/pwa-install-dialog","_rev":"37-015b19bb9c9610bad6abc082a95fcaac","name":"@storedotapp/pwa-install-dialog","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"@storedotapp/pwa-install-dialog","version":"1.0.0","dependencies":{},"main":"./index.js","module":"./index.mjs","typings":"./index.d.ts","keywords":["pwa","webcomponents","web-components"],"_id":"@storedotapp/pwa-install-dialog@1.0.0","gitHead":"af248fbc004b667f09c12d4654af037c53e7d6e4","description":"Web component for PWA managing installation modal with store.app metadata included.","_nodeVersion":"20.7.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-6dQIPo87hrvaGMW8toBHip9CCtYOsoGIXUYF18ro8Hv1ETuxa9u0YjfD9E6o2759TvKoklnXIfHy+1KscUvUZQ==","shasum":"d18ca58a4af3c05a3a28ccb17f7ae0dabfea23c8","tarball":"https://registry.npmjs.org/@storedotapp/pwa-install-dialog/-/pwa-install-dialog-1.0.0.tgz","fileCount":7,"unpackedSize":61971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBeufIepb3pgy6Bz7NshW7WxDcv5JI8SjI4Bu5c5jCNBAiEA83eIT7Eb+54/ordBvbwGlAfOnOyVHkjxKwu7u/o1Kms="}]},"_npmUser":{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"},"directories":{},"maintainers":[{"name":"pwalabs","email":"morgan@pwalabs.com"},{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-install-dialog_1.0.0_1697154460836_0.608378296108856"},"_hasShrinkwrap":false},"1.0.1":{"name":"@storedotapp/pwa-install-dialog","version":"1.0.1","dependencies":{},"main":"./index.js","module":"./index.mjs","typings":"./index.d.ts","keywords":["pwa","webcomponents","web-components"],"_id":"@storedotapp/pwa-install-dialog@1.0.1","gitHead":"bf376456f3e415aa58a76350f15fea8785b59e22","description":"Web component for PWA managing installation modal with store.app metadata included.","_nodeVersion":"20.7.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-iqRsx3S0Ytzl97Lan37BSAOrMlQxFWZe8G5KZ+XzobLo0NVma+zizQGfKvK5ozgRlXUR5eMB7nHjJLXRQxrf7Q==","shasum":"079d8bd0f3e1fae88fc6623a8f7048c7e26f0068","tarball":"https://registry.npmjs.org/@storedotapp/pwa-install-dialog/-/pwa-install-dialog-1.0.1.tgz","fileCount":7,"unpackedSize":76628,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQzgncGLmOdnpd9+w31BMvvwMmGNEC4uq768Ry70TwDgIhALxkZI81ddJ7+Z/2hcMyRHWZ3A068lC6mYv6rwqxkUFp"}]},"_npmUser":{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"},"directories":{},"maintainers":[{"name":"pwalabs","email":"morgan@pwalabs.com"},{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-install-dialog_1.0.1_1697501618742_0.8220461605889706"},"_hasShrinkwrap":false},"1.1.0":{"name":"@storedotapp/pwa-install-dialog","version":"1.1.0","dependencies":{},"main":"./index.js","module":"./index.mjs","typings":"./index.d.ts","keywords":["pwa","webcomponents","web-components"],"_id":"@storedotapp/pwa-install-dialog@1.1.0","gitHead":"ffd0f3cb2723f00f0b514e58b4e5002f7aaadf03","description":"Web component for PWA managing installation modal with store.app metadata included.","_nodeVersion":"20.7.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-p13R/Tv1fajPnRbJO+q0dzmL5yD7lr0t+7/Tx/NZaiJD4pO9Nm8Zh8LtY7hWMZHXplIm3CgeprpEv47LL+E2hw==","shasum":"f0306265176f027c6f38c338d2569741e81fd727","tarball":"https://registry.npmjs.org/@storedotapp/pwa-install-dialog/-/pwa-install-dialog-1.1.0.tgz","fileCount":7,"unpackedSize":80669,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdPm1e6U4ggFQLcyuBF3C3T4ANmsmkm/sp8kAQO4rRJAiAtqLrM/8DCw7f5x6n5y+pdJq4wnvjyccsZzWDSQf6VzA=="}]},"_npmUser":{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"},"directories":{},"maintainers":[{"name":"pwalabs","email":"morgan@pwalabs.com"},{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-install-dialog_1.1.0_1698684139631_0.035473883903785586"},"_hasShrinkwrap":false},"1.1.1":{"name":"@storedotapp/pwa-install-dialog","version":"1.1.1","dependencies":{},"main":"./index.js","module":"./index.mjs","typings":"./index.d.ts","keywords":["pwa","webcomponents","web-components"],"_id":"@storedotapp/pwa-install-dialog@1.1.1","gitHead":"df32ce582baad13a9dd24f3b73ada6a0824df75c","description":"Web component for PWA managing installation modal with store.app metadata included.","_nodeVersion":"20.7.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-7oby0la7JeySsd+ergRAse6AhWP7tG7Njxw6ZGPo0DjWLA225iqEAylNXkMxwiMaEhZ7jiTfc4WFW/Jk55nhHA==","shasum":"bbe37d0d3dbe3bb30a467b4e65ef885a765da81a","tarball":"https://registry.npmjs.org/@storedotapp/pwa-install-dialog/-/pwa-install-dialog-1.1.1.tgz","fileCount":7,"unpackedSize":81681,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjoQeWSDBdSMzK9dLbzRh+CspRvqTG4FpZEe0pKINYlAiEAnzOi+K3cWNRzVQW7iGIIjkZpPIoDyNfrQVavoQ0jocA="}]},"_npmUser":{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"},"directories":{},"maintainers":[{"name":"pwalabs","email":"morgan@pwalabs.com"},{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-install-dialog_1.1.1_1699562743415_0.42447566800018044"},"_hasShrinkwrap":false},"1.1.2":{"name":"@storedotapp/pwa-install-dialog","version":"1.1.2","dependencies":{},"main":"./index.js","module":"./index.mjs","typings":"./index.d.ts","keywords":["pwa","webcomponents","web-components"],"_id":"@storedotapp/pwa-install-dialog@1.1.2","gitHead":"c78dc9ca129e26b7d819be662bbee6d72f372699","description":"Web component for PWA managing installation modal with store.app metadata included.","_nodeVersion":"20.7.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-m2H/MnACp2KdMaj4uI2rLJn2oihO/sgqNFtQUVOjZddQW9vU+nWZFmOZ3CPqrCZsOsJh8wWj62e4lPSY3bo4AQ==","shasum":"d2fdb067985a6de4461c3e5d0147e3cb6082d995","tarball":"https://registry.npmjs.org/@storedotapp/pwa-install-dialog/-/pwa-install-dialog-1.1.2.tgz","fileCount":7,"unpackedSize":82105,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4sb4TspcPYlyGSqwPJPZynhbpSRZl3Xv7TXkSo+MFDAiEAwCoZU6vOA4UO7Omno0mH35tgMSdoYyZl4JaxISbglm8="}]},"_npmUser":{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"},"directories":{},"maintainers":[{"name":"pwalabs","email":"morgan@pwalabs.com"},{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-install-dialog_1.1.2_1701114224976_0.7011740661433843"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-11T00:40:01.055Z","0.0.1":"2023-10-11T00:40:01.413Z","modified":"2023-11-27T19:43:45.389Z","0.0.2":"2023-10-11T19:58:41.055Z","0.0.3-beta-1":"2023-10-11T20:30:30.662Z","0.0.3":"2023-10-11T20:49:29.658Z","0.0.4":"2023-10-11T22:12:27.882Z","0.0.5":"2023-10-11T22:25:08.635Z","0.0.6-beta-1":"2023-10-11T22:27:34.392Z","0.0.6-beta-2":"2023-10-11T22:45:33.123Z","0.0.6-beta-3":"2023-10-11T22:49:33.992Z","0.0.6-beta-4":"2023-10-11T22:52:29.116Z","0.0.6-beta-5":"2023-10-11T22:59:24.052Z","0.0.6-beta-6":"2023-10-11T23:05:57.976Z","0.0.6-beta-7":"2023-10-11T23:26:38.801Z","0.0.6-beta-8":"2023-10-11T23:48:09.237Z","0.0.7":"2023-10-11T23:59:09.270Z","0.0.8":"2023-10-12T00:50:43.029Z","1.0.0":"2023-10-12T23:47:41.194Z","1.0.1":"2023-10-17T00:13:39.038Z","1.1.0":"2023-10-30T16:42:19.881Z","1.1.1":"2023-11-09T20:45:43.646Z","1.1.2":"2023-11-27T19:43:45.167Z"},"maintainers":[{"name":"pwalabs","email":"morgan@pwalabs.com"},{"name":"mathieu-pwalabs","email":"mathieu@pwalabs.com"}],"readme":"# pwa-install-dialog\n\nWeb component for PWA managing installation modal with store.app metadata included.\n\n## Features\n\n- Show/hide modal with installation instructions according to OS/Browser\n- Includes Rating and Verified status from store.app with link to the listing\n- Light/Dark theme\n- Responsive: center modal on desktop, bottom drawer on mobile\n- `[>=1.1.0]` Tracking events\n- `[>=1.1.0]` Auto-open modal when coming from store.app listing (can be disabled)\n\n## Requirements\n\nYour PWA needs to be listed on https://store.app.\nList your app for free:\n\n1. Sign up on [store.app](https://store.app)\n2. Request a Dev Account\n3. Claim your App\n4. Publish your listing\n\n### How to use\n\n1. Install\n\n```shell\nnpm i @storedotapp/pwa-install-dialog\n```\n\n2. Import in your `main.ts` or `main.js` or any top level file\n\n```js\nimport \"@storedotapp/pwa-install-dialog\";\n```\n\n3. Use the web component in your html or template file. See attribute list below for more details.\n\n```html\n<!-- Examples-->\n<pwa-install-dialog id=\"install-dialog\" app=\"fitness-app\" theme=\"dark\"></pwa-install-dialog>\n<pwa-install-dialog id=\"install-dialog\" app=\"fitness-app\" open></pwa-install-dialog>\n```\n\n4. Define your opening trigger on the event you want (usually a click on an <Install> button).\n   Call the `show()` method on the component\n\n```html\n<!-- Example-->\n<button onclick=\"document.getElementById('install-dialog').show()\">Install</button>\n```\n\n### Attributes\n\n| Attribute | Required | Type     | Default                       | Description                                                                                                  |\n|:----------|:--------:|----------|:------------------------------|--------------------------------------------------------------------------------------------------------------|\n| `app`     | Required | `string` | n/a                           | Your app id from your listing page (eg. `fitness-app` if the listing page is `https://store.app/fitness-app` |\n| `theme`   | Optional | `string` | User's `prefers-color-scheme` | Color theme for the modal. Supports `light` and `dark`                                                       |\n| `open`    | Optional | `bool`   | n/a                           | Whether the modal is visible or not. Can be omitted and controlled via `show()`/`hide()` methods             |\n\n### Methods\n\n| Method   | Description                                                                                                               |\n|:---------|---------------------------------------------------------------------------------------------------------------------------|\n| `show()` | Set `open` to `true`                                                                                                      |\n| `hide()` | Set `open` to `false`. This is taken care of automatically when the backdrop is clicked but you can add your own triggers |\n\n### Events\n\n#### Ready (from `1.1.1`)\n\nThe component dispatches a `ready` event when it finishes initializing. You can wait for this event to trigger before making the Install button available to your user.\n\n```js\ndocument.getElementById(\"pwa-install\").addEventListener(\"ready\", () => {\n  document.getElementById(\"dialog-trigger\").style.visibility = \"visible\"\n})\n```\n\n#### Interactions (from `1.1.0`)\n\nThe component dispatches `interact` events when the user interacts with the dialog, allowing you to react to or track behaviors on your app.\n\nThe event `detail` always has an `interaction` value, plus some optional payload depending on the interaction.\n\n```js\ndocument.getElementById(\"pwa-install\").addEventListener(\"interact\", (e) => {\n  console.log(e.detail) // { interaction: 'first-open', mode: 'support' }\n})\n```\n\n| Interaction          | Description                                                                  | Additional Payload    | Details                                                                                         |\n|:---------------------|:-----------------------------------------------------------------------------|-----------------------|:------------------------------------------------------------------------------------------------|\n| `first-open`         | The user opened the install modal for the first time since last page refresh | `mode`: `<see_below>` | Whether or not the device supports native prompt; if not, what custom instructions are provided |\n| `open-listing`       | The user opened the app listing from the dialog                              |                       |                                                                                                 |\n| `click-instructions` | The user clicked the manual install instructions section (no effect)         |                       |                                                                                                 |\n| `install`            | The user triggered the native install prompt                                 |                       |                                                                                                 |\n\nSupported values for `mode` currently are:\n\n- `native-prompt`\n- `not-supported`\n- `ios-safari`\n- `ios-chrome`\n- `ios-edge`\n- `ios-firefox`\n- `android-chrome`\n- `android-edge`\n- `android-firefox`\n- `android-opera`\n- `android-samsung-browser`\n- `macos-safari`\n\n## Screenshots\n\n#### Native Prompt in Dark Mode\n\n<img src=\"https://static.store.app/docs/install-modal/dark-native-prompt.png\" alt=\"Native Prompt in Dark Mode\" width=\"500\"/>\n\n#### iOS/Safari in Light Mode\n\n<img src=\"https://static.store.app/docs/install-modal/light-ios-safari.png\" alt=\"iOS-Safari Light Mode\" width=\"500\"/>\n\n#### Opera/Android in Dark Mode\n\n<img src=\"https://static.store.app/docs/install-modal/dark-android-opera.png\" alt=\"Opera-Android in Dark Mode\" width=\"500\"/>\n","readmeFilename":"README.md","description":"Web component for PWA managing installation modal with store.app metadata included.","keywords":["pwa","webcomponents","web-components"]}