Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
add-to-homescreen-control
Advanced tools
add-to-homescreen-control - npm Package Compare versions
Comparing version 0.1.1 to 0.1.2
@@ -1,1 +0,1 @@ | ||
| !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var r=null,o={enable:function(){var e=this;window.addEventListener("beforeinstallprompt",function(t){t.preventDefault(),r=t,e.canPrompt=!0})},prompt:function(){return new Promise(function(e,t){canPrompt?e(r.prompt()):t("Add to Home Screen criteria not met. You can read about this criteria here: https://developers.google.com/web/fundamentals/app-install-banners/")})},canPrompt:!1};t.default=o}]); | ||
| !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var r=null,o={enable:function(){var e=this;window.addEventListener("beforeinstallprompt",function(t){t.preventDefault(),r=t,e.canPrompt=!0})},prompt:function(){var e=this;return new Promise(function(t,n){e.canPrompt?(r.prompt(),t(r.userChoice)):n("Add to Home Screen criteria not met. You can read about this criteria here: https://developers.google.com/web/fundamentals/app-install-banners/")})},canPrompt:!1};t.default=o}]); |
| { | ||
| "name": "add-to-homescreen-control", | ||
| "version": "0.1.1", | ||
| "version": "0.1.2", | ||
| "description": "Library that allows you to control new Add to Home Screen prompt behavior", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -11,3 +11,5 @@ # Add To Home Screen banner control | ||
| - `prompt(): Promise` - shows the Add to Home Screen banner (if the criteria are met). This banner can be shown to the user only once per route. Moreover if the user declines (not ignores the prompt) to install the app it cannot be shown for the next 3 months. | ||
| - `prompt(): Promise` - shows the Add to Home Screen banner (if the criteria are met) and resolves when user decides either to install or decline on Add to Home Screen. The resolved Promise value is an object with two values: | ||
| - `outcome: string` - outcome of the homescreen installation. Contains `accepted` if the app was succesfully installed, otherwise contains `dismissed` string. | ||
| - `platform: string` - platform used for installation | ||
@@ -29,23 +31,14 @@ - `canPrompt(): boolean` - returns `true` if the ATHS criteria are met and `prompt()` method can be fired | ||
| 3. Show the Add To Home Screen banner whenever you want to with `prompt()` method. The banner will appear only if the [criteria](https://developers.google.com/web/fundamentals/app-install-banners#criteria) are met. You can handle unmet criteria in two ways: | ||
| - you can use `canPrompt` property to check if the `prompt()` method is available: | ||
| - make use of the fact that `prompt()` returns a Promise (recommended): | ||
| ````js | ||
| const ATHSBtn = document.querySelector('#add-to-homescreen-btn') | ||
| ATHSBtn.addEventListener('click', () => { | ||
| if ( ATHS.canPrompt ) { | ||
| ATHS.prompt() | ||
| } else { | ||
| // handle scenario when ATHS criteria are not met | ||
| } | ||
| }) | ||
| ```` | ||
| - or make use of the fact that `prompt()` returns a Promise: | ||
| ````js | ||
| ATHS.prompt( | ||
| .then(() => console.log('success')) | ||
| .catch(err => console.log(err)) | ||
| ATHS.prompt() | ||
| .then(({ outcome }) => console.log('user interacted with ATHS banner with outcome of', outcome)) | ||
| .catch(err => console.log(err)) | ||
| ```` | ||
| - or you can use `canPrompt` property to check if the `prompt()` method is available: | ||
| [Here](https://github.com/filrak/add-to-homescreen-control/blob/master/index.html) you can find example usage of this library (with local import) | ||
| # Useful information | ||
@@ -73,2 +66,6 @@ | ||
| ### Good practices and gotchas | ||
| - It's a good practice to show ATHS prompt in a context and as a response to user gesture (for example button click). Showing it right after it's available is an anti-pattern. | ||
| - banner can be shown only once per navigation route. | ||
| - Once user click `x` on a banner it can't be shown again for a significant amount of time (currently ~3 months) |
@@ -14,3 +14,4 @@ let deferredEvent = null | ||
| if ( this.canPrompt ) { | ||
| resolve(deferredEvent.prompt()) | ||
| deferredEvent.prompt() | ||
| resolve(deferredEvent.userChoice) | ||
| } else { | ||
@@ -20,4 +21,3 @@ reject('Add to Home Screen criteria not met. You can read about this criteria here: https://developers.google.com/web/fundamentals/app-install-banners/') | ||
| }) | ||
| } | ||
| , | ||
| }, | ||
| canPrompt: false | ||
@@ -24,0 +24,0 @@ } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.75%
25238
Worsened metrics
- Number of lines in readme file
- decreased by-4.17%
69
No dependency changes