resolve path redirect flash and enable iOS Chrome AR support

packages/model-viewer/src/constants.ts

@@ -88,15 +88,15 @@ export const IS_WKWEBVIEW =
 // (DuckDuckGo). All other iOS browsers / apps will fail by default.
 export const IS_AR_QUICKLOOK_CANDIDATE = (() => {
   if (IS_IOS) {
-    if (!IS_WKWEBVIEW) {
-      const tempAnchor = document.createElement('a');
-      return Boolean(
-          tempAnchor.relList && tempAnchor.relList.supports &&
-          tempAnchor.relList.supports('ar'));
-    } else {
-      return Boolean(/CriOS\/|EdgiOS\/|FxiOS\/|GSA\/|DuckDuckGo\//.test(
-          navigator.userAgent));
+    const isSupportedThirdParty =
+        /CriOS\/|EdgiOS\/|FxiOS\/|GSA\/|DuckDuckGo\//.test(navigator.userAgent);
+    if (isSupportedThirdParty) {
+      return true;
     }
+    const tempAnchor = document.createElement('a');
+    return Boolean(
+        tempAnchor.relList && tempAnchor.relList.supports &&
+        tempAnchor.relList.supports('ar'));
   } else {
     return false;
   }

packages/modelviewer.dev/data/docs.json

@@ -8,7 +8,7 @@
         "htmlName": "src",
         "description": "The URL to the 3D model. Only <a href=\"https://github.com/KhronosGroup/glTF/tree/master/specification/2.0\">glTF</a>/<a href=\"https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#glb-file-format-specification\">GLB</a> models are supported.",
         "links": [
-          "<a href=\"../examples/loading\">Related examples</a>"
+          "<a href=\"../examples/loading/\">Related examples</a>"
         ],
         "default": {
           "default": "empty string",
@@ -20,7 +20,7 @@
         "htmlName": "alt",
         "description": "Configures the model with custom text that will be used to describe the model to viewers who use a screen reader or otherwise depend on additional semantic context to understand what they are viewing.",
         "links": [
-          "<a href=\"../examples/loading\">Related examples</a>"
+          "<a href=\"../examples/loading/\">Related examples</a>"
         ],
         "default": {
           "default": "empty string",
@@ -32,7 +32,7 @@
         "htmlName": "poster",
         "description": "Displays an image instead of the model, useful for showing the user something before a model is loaded and ready to render.",
         "links": [
-          "<a href=\"../examples/loading\">Related examples</a>"
+          "<a href=\"../examples/loading/\">Related examples</a>"
         ],
         "default": {
           "default": "empty string",
@@ -44,7 +44,7 @@
         "htmlName": "loading",
         "description": "An enumerable attribute describing under what conditions the model should be preloaded. The supported values are \"auto\", \"lazy\" and \"eager\". Auto is equivalent to lazy, which loads the model when it is near the viewport for <span class='attribute'>reveal=\"auto\"</span>, and when interacted with for <span class='attribute'>reveal=\"interaction\"</span>. Eager loads the model immediately.",
         "links": [
-          "<a href=\"../examples/loading\">Related examples</a>"
+          "<a href=\"../examples/loading/\">Related examples</a>"
         ],
         "default": {
           "default": "auto",
@@ -56,7 +56,7 @@
         "htmlName": "reveal",
         "description": "This attribute controls when the model should be revealed. If <span class='attribute'>reveal</span> is set to \"auto\", the model will be revealed as soon as it is done loading and rendering. If <span class='attribute'>reveal</span> is set to \"manual\", the model will remain hidden until <span class='attribute'>dismissPoster()</span> is called.",
         "links": [
-          "<a href=\"../examples/loading\">Related examples</a>"
+          "<a href=\"../examples/loading/\">Related examples</a>"
         ],
         "default": {
           "default": "auto",

packages/modelviewer.dev/data/mve.json

@@ -9,7 +9,7 @@
         "htmlName": "renderMode",
         "description": "This property sets the EffectComposer frame-buffer type to either UnsignedByteType if set to 'performance', or HalfFloatType if set to 'quality'. By setting this to 'quality', the effects under this EffectComposer will have access to high-precision buffers that are not limited to regular sRGB buffers, which have values clamped to [0.0, 1.0]. This can lead to noticeable improvements in color accuracy when used with the <color-grade-effect>, and reduce banding in dark scenes, especially with the <bloom-effect>.",
         "links": [
-          "<a href=\"../examples/postprocessing#setup\">Related examples</a>"
+          "<a href=\"../examples/postprocessing/#setup\">Related examples</a>"
         ],
         "default": {
           "default": "performance",
@@ -21,7 +21,7 @@
         "htmlName": "msaa",
         "description": "This property controls the number of samples used for the default Multi-Sample Anti Aliasing. Set this to any factor of 2 to enable - it is set to 0 by default (disabled). This is best for effect workflows that don't use the WebGLRenderer's depth buffer, such as &lt;color-grade-effect&gt;, &lt;glitch-effect&gt;, etc. <br>This antialiasing solution may not work well with &lt;selective-bloom-effect&gt;, &lt;ssao-effect&gt;, &lt;outline-effect&gt;, where it may introduce visual artifacting. If you use these effects you may prefer to use the &lt;smaa-effect&gt;.",
         "links": [
-          "<a href=\"../examples/postprocessing#setup\">Related examples</a>"
+          "<a href=\"../examples/postprocessing/#setup\">Related examples</a>"
         ],
         "default": {
           "default": "0",
@@ -350,7 +350,7 @@
         "htmlName": "blend-mode",
         "description": "This attribute controls the function used to blend the effect with the base render. Note that unlike the wiki link below, setting this to <code>skip</code> actually does disable the effect completely.",
         "links": [
-          "<a href=\"../examples/postprocessing#effects\"><span class='attribute'>blend-mode</span> example</a>"
+          "<a href=\"../examples/postprocessing/#effects\"><span class='attribute'>blend-mode</span> example</a>"
         ],
         "default": {
           "default": "default",
@@ -362,7 +362,7 @@
         "htmlName": "opacity",
         "description": "The opacity of the effect that will be blended with the base render.",
         "links": [
-          "<a href=\"../examples/postprocessing#effects\"><span class='attribute'>opacity</span> example</a>"
+          "<a href=\"../examples/postprocessing/#effects\"><span class='attribute'>opacity</span> example</a>"
         ],
         "default": {
           "default": "1.0",
@@ -388,7 +388,7 @@
         "htmlName": "selection",
         "description": "This attribute controls the selected objects to be affected. If no value is provided, the default <a href=\"#entrydocs-effectcomposer-properties-selection\"><span class='attribute'>selection</span></a> is used.",
         "links": [
-          "<a href=\"../examples/postprocessing#selective-effects\"><span class='attribute'>selection</span> example</a>"
+          "<a href=\"../examples/postprocessing/#selective-effects\"><span class='attribute'>selection</span> example</a>"
         ],
         "default": {
           "default": "<a href=\"#entrydocs-effectcomposer-properties-selection\"><span class='attribute'>selection</span></a>",

packages/modelviewer.dev/src/docs-and-examples/create-html.ts

@@ -131,7 +131,7 @@ function createExampleSidebarCategory(category: any) {
   container!.innerHTML += `
 <div class="category">
   <h3 id=${id}>
-    <a class="darken" href="../${htmlName}" onclick="sidebarClick()">${
+    <a class="darken" href="../${htmlName}/" onclick="sidebarClick()">${
       category['name']}</a>
   </h3>
   <div class="subCategory">

packages/modelviewer.dev/src/docs-and-examples/utils.ts

@@ -24,7 +24,7 @@ export function switchPages(oldLocation: string, newLocation: string) {
     let URI = '';
     if (oldLocation === 'docs') {
       const category = getSidebarCategoryForNewPage();
-      URI = '../examples/'.concat(category);
+      URI = '../examples/'.concat(category).concat('/');
     } else {
       URI = newLocation;
     }