{"id":16700103,"url":"https://github.com/jacobdb/pwa-install-prompt","last_synced_at":"2025-03-15T13:30:50.052Z","repository":{"id":57276225,"uuid":"154219705","full_name":"JacobDB/pwa-install-prompt","owner":"JacobDB","description":"Prompt users to add your PWA to their home screen, since Apple won’t.","archived":false,"fork":false,"pushed_at":"2020-12-03T14:55:08.000Z","size":91,"stargazers_count":127,"open_issues_count":5,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-10T21:49:55.363Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jacobdb.github.io/pwa-install-prompt/demo/","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/JacobDB.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-22T21:28:20.000Z","updated_at":"2025-02-05T12:35:53.000Z","dependencies_parsed_at":"2022-08-24T23:51:40.380Z","dependency_job_id":null,"html_url":"https://github.com/JacobDB/pwa-install-prompt","commit_stats":null,"previous_names":["jacobdb/ios-install-prompt"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobDB%2Fpwa-install-prompt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobDB%2Fpwa-install-prompt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobDB%2Fpwa-install-prompt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobDB%2Fpwa-install-prompt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JacobDB","download_url":"https://codeload.github.com/JacobDB/pwa-install-prompt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243735796,"owners_count":20339530,"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":[],"created_at":"2024-10-12T18:09:20.728Z","updated_at":"2025-03-15T13:30:49.540Z","avatar_url":"https://github.com/JacobDB.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PWA Install Prompt\n\n![screenshot](screenshot.png)\n\nPrompt users to add your PWA to their home screen, since Apple won’t.\n\nBy default, this module checks if the user has not visited the site before, or if the last time they visited the site was more than 90 days ago, and if they are using iOS. If all conditions are met, then the prompt is shown. The conditions that get checked can be overridden in order to use this prompt for custom scenarios.\n\n*[Inspired by Scott Batson @ DockYard](https://dockyard.com/blog/2017/09/27/encouraging-pwa-installation-on-ios)*\n\n## Demo\n\nhttps://jacobdb.github.io/pwa-install-prompt/demo/\n\n## Installation\n\n### via npm\n\n```sh\nnpm install pwa-install-prompt --save\n```\n\n### via yarn\n\n```sh\nyarn add pwa-install-prompt\n```\n\n## Usage\n\n```js\nimport pwaInstallPrompt from \"pwa-install-prompt\";\n\nnew pwaInstallPrompt(\".pwa-install-prompt__container\", {\n    active_class: \"is-active\",\n    closer: \".pwa-install-prompt__overlay\",\n    condition: null,\n    expires: 180,\n    show_after: 90,\n    on: {\n        beforeOpen: function () {\n            console.log(\"before open!\");\n        },\n        afterOpen: function () {\n            console.log(\"after open!\");\n        },\n        beforeClose: function () {\n            console.log(\"before close!\");\n        },\n        afterClose: function () {\n            console.log(\"after close!\");\n        },\n    }\n});\n```\n\n## Default Markup\n\n```html\n\u003cdiv class=\"pwa-install-prompt__container\"\u003e\n    \u003cbutton class=\"pwa-install-prompt__overlay\"\u003eClose\u003c/button\u003e\n    \u003cdiv class=\"pwa-install-prompt\"\u003e\n        \u003cdiv class=\"pwa-install-prompt__icon__container\"\u003e\n            \u003cimg class=\"pwa-install-prompt__icon\" src=\"/path/to/icon/file.png\" alt=\"{app_name}\" /\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"pwa-install-prompt__content\"\u003e\n            \u003ch3 class=\"pwa-install-prompt__title\"\u003eInstall {app_name}\u003c/h3\u003e\n            \u003cp class=\"pwa-install-prompt__text\"\u003eInstall this application on your home screen for quick and easy access when you’re on the go.\u003c/p\u003e\n            \u003cp class=\"pwa-install-prompt__guide\"\u003eJust tap \u003csvg class=\"pwa-install-prompt__guide__icon\" viewBox=\"0 0 128 128\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\u003e\u003ctitle\u003eShare\u003c/title\u003e\u003cpath fill=\"#007AFF\" d=\"M48.883,22.992L61.146,10.677L61.146,78.282C61.146,80.005 62.285,81.149 64,81.149C65.715,81.149 66.854,80.005 66.854,78.282L66.854,10.677L79.117,22.992C79.693,23.57 80.256,23.853 81.114,23.853C81.971,23.853 82.534,23.57 83.11,22.992C84.25,21.848 84.25,20.125 83.11,18.981L65.997,1.794C65.715,1.511 65.421,1.215 65.139,1.215C64.563,0.932 63.718,0.932 62.861,1.215C62.579,1.498 62.285,1.498 62.003,1.794L44.89,18.981C43.75,20.125 43.75,21.848 44.89,22.992C46.029,24.149 47.744,24.149 48.883,22.992ZM103.936,35.32L81.114,35.32L81.114,41.053L103.936,41.053L103.936,121.27L24.064,121.27L24.064,41.053L46.886,41.053L46.886,35.32L24.064,35.32C20.928,35.32 18.355,37.904 18.355,41.053L18.355,121.27C18.355,124.419 20.928,127.003 24.064,127.003L103.936,127.003C107.072,127.003 109.645,124.419 109.645,121.27L109.645,41.053C109.645,37.891 107.072,35.32 103.936,35.32Z\" /\u003e\u003c/svg\u003e then “Add to Home Screen”\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Options\n\n| Option         | Type       | Default                                 | Description                                                 |\n|----------------|------------|-----------------------------------------|-------------------------------------------------------------|\n| `active_class` | `string`   | `is-active`                             | Class name to be added when the prompt is visible           |\n| `closer`       | `string`   | `.pwa-install-prompt__overlay`          | Query selector to target to handle closing the prompt       |\n| `condition`    | `function` | `null`                                  | Set a custom condition to determine when to show the prompt |\n| `expires`      | `number`   | `180`                                   | Number of days before the `last_visit` cookie expires       |\n| `show_after`   | `number`   | `90`                                    | Number of days to wait before showing the prompt again      |\n| `on`           | `object`   | `null`                                  | Register event handlers                                     |\n\n## Events\n\nEvents can be assigned in two ways:\n\n1. Using on parameter on PWA Install Prompt initialization:\n\n        var prompt = new pwaInstallPrompt(\".pwa-install-prompt__container\", {\n            // ...\n            on: {\n                open: function () {\n                    console.log(\"prompt opened!\");\n                },\n            },\n        });\n\n2. Using on method after PWA Install Prompt initialization.\n\n        var prompt = new pwaInstallPrompt(\".pwa-install-prompt__container\", {\n            // ...\n        });\n\n        prompt.on(\"open\", function () {\n            console.log(\"prompt opened!\");\n        });\n\n| Name          | Description                                       |\n|---------------|---------------------------------------------------|\n| `beforeOpen`  | Event will be fired right before prompt is opened |\n| `afterOpen`   | Event will be fired right after prompt is opened  |\n| `beforeClose` | Event will be fired right before prompt is closed |\n| `afterClose`  | Event will be fired right after prompt is closed  |\n\n## Contributors\n\n- [Jacob Bearce](https://github.com/JacobDB) \u0026ndash; [Commits](https://github.com/JacobDB/pwa-install-prompt/commits?author=JacobDB)\n- [Sergio Arbeo](https://github.com/Serabe) \u0026ndash; [Commits](https://github.com/JacobDB/pwa-install-prompt/commits?author=Serabe)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobdb%2Fpwa-install-prompt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacobdb%2Fpwa-install-prompt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobdb%2Fpwa-install-prompt/lists"}