@wonder-partners/ar-button - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

@@ -8,2 +8,14 @@ # Changelog
 
+## [1.0.2] 2023-03-20
+
+### Fixed
+
+- iOS on Chrome browser compatibility issue. See readme for more information.
+
+## [1.0.1] 2023-02-07
+
+### Fixed
+
+- Backward compatibility with old versions
+
 ## [1.0.0] 2023-01-26
@@ -13,3 +25,3 @@
 
-- Public API to defer an `ar-button` initialization. 
+- Public API to defer an `ar-button` initialization.
 - Minimized `main.js`.
@@ -16,0 +28,0 @@

main.js

@@ -44,2 +44,6 @@ // @ts-check
 
+function isChromeIOS() {
+  return navigator.userAgent.match(/(crios)[/\s]([\d.]+)/ig) !== null;
+}
+
 /**
@@ -78,3 +82,3 @@ * @param {*} condition The condition to check.
   if (isMobile.iOS() || isMobile.iPadOS()) {
-    if (isARQuickLookCompatible()) {
+    if (isChromeIOS() || isARQuickLookCompatible()) {
       anchor.appendChild(document.createElement('img'));
@@ -234,2 +238,2 @@ anchor.setAttribute('rel', 'ar');
 
-export { init, isARQuickLookCompatible };
+export { init, isARQuickLookCompatible, isChromeIOS };

main.min.js

@@ -1,1 +0,1 @@
-class t extends Error{constructor(t){super(t),this.name="Requirement Error"}}const e="deferred",n={Android:()=>null!==navigator.userAgent.match(/Android/i),BlackBerry:()=>null!==navigator.userAgent.match(/BlackBerry/i),iOS:()=>null!==navigator.userAgent.match(/iPhone|iPad|iPod/i),Opera:()=>null!==navigator.userAgent.match(/Opera Mini/i),Windows:()=>null!==navigator.userAgent.match(/IEMobile/i)||null!==navigator.userAgent.match(/WPDesktop/i),iPadOS:()=>navigator.userAgent.includes("Mac")&&"ontouchend"in document,any:()=>n.Android()||n.iOS()||n.iPadOS||n.Opera()||n.BlackBerry()||n.Windows()};function i(){const t=document.createElement("a").relList.supports("ar");if(n.iOS()){const e=navigator.userAgent.match(/\b[0-9]+_[0-9]+(?:_[0-9]+)?\b/);return!!e&&(t&&Number(e[0].split("_")[0])>12)}return t}function o(e,n=""){if(!e)throw new t(n);return!0}function r(t,e){const n=t.getAttribute(e);if(!n)return null;return encodeURIComponent(n)}function c(t,e=""){const o=document.createElement("a");if(o.setAttribute("id","ar-anchor"),n.iOS()||n.iPadOS()){if(!i())return void console.error("AR is not available.");o.appendChild(document.createElement("img")),o.setAttribute("rel","ar"),o.addEventListener("message",(t=>{"_apple_ar_quicklook_button_tapped"===t.data&&(window.location.href=e)}),!1)}o.setAttribute("href",t),document.body.appendChild(o),o.click()}function l(t){t.setAttribute("ar","quick-look");const e=t.getAttribute("ios-src"),n=t.getAttribute("ios-link")??t.getAttribute("link")??"",i=t.getAttribute("allows-content-scaling"),o=r(t,"checkout-title"),l=r(t,"checkout-subtitle"),a=r(t,"price"),u=r(t,"call-to-action"),s=r(t,"canonical-web-page-url");let d=`${e}#`;o&&(d+=`&checkoutTitle=${o}`),l&&(d+=`&checkoutSubtitle=${l}`),a&&(d+=`&price=${a}`),u&&(d+=`&callToAction=${u}`),s&&(d+=`&canonicalWebPageURL=${s}`),"0"===i&&(d+="&allowsContentScaling=0"),t.addEventListener("click",(()=>c(d,n)))}function a(t){t.setAttribute("ar","scene-viewer");const e=t.getAttribute("src"),n=t.getAttribute("link"),i=r(t,"title"),o=r(t,"fallback-url")??"https://developers.google.com/ar",l=t.hasAttribute("occlusion");let a=`intent://arvr.google.com/scene-viewer/1.0?file=${e}&mode=ar_only`;i&&(a+=`&title=${i}`),n&&(a+=`&link=${n}`),l||(a+="&disable_occlusion=true"),a+="#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;",a+=`S.browser_fallback_url=${o};`,a+="end;",t.addEventListener("click",(()=>c(a)))}function u({element:t,androidConf:i,iosConf:r}){o(t,"element cannot be null"),t.removeAttribute(e),n.Android()&&i&&(o(i.src,"src cannot be null, undefined or empty."),t.setAttribute("src",i.src),i.title&&t.setAttribute("title",i.title),i.link&&t.setAttribute("link",i.link),i.fallbackURL&&t.setAttribute("fallback-url",i.fallbackURL),i.occlusion&&!0===i.occlusion&&t.setAttribute("occlusion",""),a(t)),(n.iOS()||n.iPadOS())&&r&&(o(r.src,"src cannot be null, undefined or empty."),r.checkoutSubtitle??="ㅤ",r.price??="",t.setAttribute("ios-src",r.src),t.setAttribute("checkout-subtitle",r.checkoutSubtitle),t.setAttribute("price",r.price),r.checkoutTitle&&t.setAttribute("checkout-title",r.checkoutTitle),r.link&&t.setAttribute("ios-link",r.link),r.callToAction&&t.setAttribute("call-to-action",r.callToAction),r.canonicalWebPageURL&&t.setAttribute("canonical-web-page-url",r.canonicalWebPageURL),r.allowsContentScaling&&t.setAttribute("allows-content-scaling",r.allowsContentScaling?"1":"0"),l(t))}window.addEventListener("DOMContentLoaded",(function(){if(!n.any())return void console.error("This platform does not support AR.");document.querySelectorAll("ar-button").forEach((t=>{t.hasAttribute(e)||(n.iOS()||n.iPadOS()?l(t):n.Android()&&a(t))}))}));export{u as init,i as isARQuickLookCompatible};
+class t extends Error{constructor(t){super(t),this.name="Requirement Error"}}const e="deferred",n={Android:()=>null!==navigator.userAgent.match(/Android/i),BlackBerry:()=>null!==navigator.userAgent.match(/BlackBerry/i),iOS:()=>null!==navigator.userAgent.match(/iPhone|iPad|iPod/i),Opera:()=>null!==navigator.userAgent.match(/Opera Mini/i),Windows:()=>null!==navigator.userAgent.match(/IEMobile/i)||null!==navigator.userAgent.match(/WPDesktop/i),iPadOS:()=>navigator.userAgent.includes("Mac")&&"ontouchend"in document,any:()=>n.Android()||n.iOS()||n.iPadOS||n.Opera()||n.BlackBerry()||n.Windows()};function i(){const t=document.createElement("a").relList.supports("ar");if(n.iOS()){const e=navigator.userAgent.match(/\b[0-9]+_[0-9]+(?:_[0-9]+)?\b/);return!!e&&(t&&Number(e[0].split("_")[0])>12)}return t}function o(){return null!==navigator.userAgent.match(/(crios)[/\s]([\d.]+)/gi)}function r(e,n=""){if(!e)throw new t(n);return!0}function c(t,e){const n=t.getAttribute(e);if(!n)return null;return encodeURIComponent(n)}function l(t,e=""){const r=document.createElement("a");if(r.setAttribute("id","ar-anchor"),n.iOS()||n.iPadOS()){if(!o()&&!i())return void console.error("AR is not available.");r.appendChild(document.createElement("img")),r.setAttribute("rel","ar"),r.addEventListener("message",(t=>{"_apple_ar_quicklook_button_tapped"===t.data&&(window.location.href=e)}),!1)}r.setAttribute("href",t),document.body.appendChild(r),r.click()}function a(t){t.setAttribute("ar","quick-look");const e=t.getAttribute("ios-src"),n=t.getAttribute("ios-link")??t.getAttribute("link")??"",i=t.getAttribute("allows-content-scaling"),o=c(t,"checkout-title"),r=c(t,"checkout-subtitle"),a=c(t,"price"),u=c(t,"call-to-action"),s=c(t,"canonical-web-page-url");let d=`${e}#`;o&&(d+=`&checkoutTitle=${o}`),r&&(d+=`&checkoutSubtitle=${r}`),a&&(d+=`&price=${a}`),u&&(d+=`&callToAction=${u}`),s&&(d+=`&canonicalWebPageURL=${s}`),"0"===i&&(d+="&allowsContentScaling=0"),t.addEventListener("click",(()=>l(d,n)))}function u(t){t.setAttribute("ar","scene-viewer");const e=t.getAttribute("src"),n=t.getAttribute("link"),i=c(t,"title"),o=c(t,"fallback-url")??"https://developers.google.com/ar",r=t.hasAttribute("occlusion");let a=`intent://arvr.google.com/scene-viewer/1.0?file=${e}&mode=ar_only`;i&&(a+=`&title=${i}`),n&&(a+=`&link=${n}`),r||(a+="&disable_occlusion=true"),a+="#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;",a+=`S.browser_fallback_url=${o};`,a+="end;",t.addEventListener("click",(()=>l(a)))}function s({element:t,androidConf:i,iosConf:o}){r(t,"element cannot be null"),t.removeAttribute(e),n.Android()&&i&&(r(i.src,"src cannot be null, undefined or empty."),t.setAttribute("src",i.src),i.title&&t.setAttribute("title",i.title),i.link&&t.setAttribute("link",i.link),i.fallbackURL&&t.setAttribute("fallback-url",i.fallbackURL),i.occlusion&&!0===i.occlusion&&t.setAttribute("occlusion",""),u(t)),(n.iOS()||n.iPadOS())&&o&&(r(o.src,"src cannot be null, undefined or empty."),o.checkoutSubtitle??="ㅤ",o.price??="",t.setAttribute("ios-src",o.src),t.setAttribute("checkout-subtitle",o.checkoutSubtitle),t.setAttribute("price",o.price),o.checkoutTitle&&t.setAttribute("checkout-title",o.checkoutTitle),o.link&&t.setAttribute("ios-link",o.link),o.callToAction&&t.setAttribute("call-to-action",o.callToAction),o.canonicalWebPageURL&&t.setAttribute("canonical-web-page-url",o.canonicalWebPageURL),o.allowsContentScaling&&t.setAttribute("allows-content-scaling",o.allowsContentScaling?"1":"0"),a(t))}window.addEventListener("DOMContentLoaded",(function(){if(!n.any())return void console.error("This platform does not support AR.");document.querySelectorAll("ar-button").forEach((t=>{t.hasAttribute(e)||(n.iOS()||n.iPadOS()?a(t):n.Android()&&u(t))}))}));export{s as init,i as isARQuickLookCompatible,o as isChromeIOS};

package.json

 {
   "name": "@wonder-partners/ar-button",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A web component to easily display 3D models in native AR across browsers and mobile devices",
@@ -24,5 +24,5 @@ "main": "main.js",
     "dev": "five-server",
-    "publish": "npm run min && npm publish",
-    "pack": "npm run min && npm pack"
+    "publish": "terser main.js -o main.min.js -c --module -m && npm publish",
+    "pack": "terser main.js -o main.min.js -c --module -m && npm pack"
   }
 }

README.md

@@ -52,15 +52,15 @@ # AR Button
 
-A name for the model. If present, it will be displayed in the UI. Only works if supplied alongside *checkout-subtitle*, *price*, and *call-to-action* attributes.
+A name for the model. If present, it will be displayed in the UI. Only works if supplied alongside _checkout-subtitle_, _price_, and _call-to-action_ attributes.
 
 #### `checkout-subtitle`
 
-If present, it will be displayed in the UI. Only works if supplied alongside *checkout-subtitle*, *price*, and *call-to-action*.
+If present, it will be displayed in the UI. Only works if supplied alongside _checkout-subtitle_, _price_, and _call-to-action_.
 
 #### `price`
 
-If present, it will be displayed in the UI. Only works if supplied alongside *checkout-subtitle*, *price*, and *call-to-action*. AR Quick Look displays the subtitle and price separated by a comma below the title. Price should include the currency symbol.
+If present, it will be displayed in the UI. Only works if supplied alongside _checkout-subtitle_, _price_, and _call-to-action_. AR Quick Look displays the subtitle and price separated by a comma below the title. Price should include the currency symbol.
 
 #### `call-to-action`
 
-If present, display this text as a button the quick look default UI. Only works when supplied alongside *checkout-title*, *checkout-subtitle* and *price*. You should also supply an URL to *link* (see above).
+If present, display this text as a button the quick look default UI. Only works when supplied alongside _checkout-title_, _checkout-subtitle_ and _price_. You should also supply an URL to _link_ (see above).
 
@@ -116,3 +116,2 @@ #### `ios-link`
 });
-
 ```
@@ -149,4 +148,8 @@
 
-**Q:** *Why can't I see my custom action in AR Quick Look?*
+**Q:** _Why can't I see my custom action in AR Quick Look?_
 
-**R:** Make sure that at least the `checkout-title`, `checkout-subtitle` and `call-to-action` (can be an non-breaking space) attributes are correctly filled.
+**R:** Make sure that at least the `checkout-title`, `checkout-subtitle` (can be an non-breaking space) and `call-to-action` attributes are correctly filled.
+
+**Q:** _Why can't I open AR on iOS within Chrome based browsers?_
+
+**R:** There is a false negative when checking AR Quicklook compatibility on chrome based browsers. For now, we just bypass the check entirely on those browsers to ensure compatibility. See the official bug report here: [https://bugs.webkit.org/show_bug.cgi?id=239135](https://bugs.webkit.org/show_bug.cgi?id=239135)

No alert changes

Improved metrics

Total package byte prevSize

93755

increased by0.95%

Lines of code

237

increased by1.28%

Number of lines in readme file

153

increased by2%

No dependency changes