@ohos-ports/layer0-prefetch 4.20.0-beta.0

package/window/registerServiceWorker.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* istanbul ignore file */
+const isSafari_1 = require("./isSafari");
+function registerServiceWorker(serviceWorkerPath) {
+    if (isSafari_1.isSafariPrivateWindow()) {
+        // Private windows in safari have a known bug with sending cookies
+        // in POST requests.  This often breaks cart and checkout, so we choose
+        // not to use service workers at all when in safari private windows.
+        // See the bug report here: https://bugs.webkit.org/show_bug.cgi?id=186617
+        console.log('skipping service worker in Safari private window');
+        unregisterServiceWorker();
+        return;
+    }
+    if ('serviceWorker' in navigator) {
+        if (document.readyState === 'complete') {
+            registerValidSW(serviceWorkerPath);
+        }
+        else {
+            window.addEventListener('load', () => {
+                registerValidSW(serviceWorkerPath);
+            });
+        }
+    }
+}
+exports.registerServiceWorker = registerServiceWorker;
+function registerValidSW(swUrl) {
+    navigator.serviceWorker
+        .register(swUrl)
+        .then(registration => {
+        registration.onupdatefound = () => {
+            const installingWorker = registration.installing;
+            if (!installingWorker)
+                return;
+            installingWorker.onstatechange = () => {
+                console.log('[layer0 service worker] state:', installingWorker.state);
+                if (installingWorker.state === 'installed') {
+                    if (navigator.serviceWorker.controller) {
+                        // At this point, the old content will have been purged and
+                        // the fresh content will have been added to the cache.
+                        // It's the perfect time to display a "New content is
+                        // available; please refresh." message in your web app.
+                        document.dispatchEvent(new CustomEvent('sw-update-available'));
+                    }
+                    else {
+                        // At this point, everything has been precached.
+                        // It's the perfect time to display a
+                        // "Content is cached for offline use." message.
+                        console.log('Content is cached for offline use.');
+                    }
+                }
+            };
+        };
+    })
+        .catch(error => {
+        console.error('Error during service worker registration:', error);
+    });
+}
+function unregisterServiceWorker() {
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.ready.then(registration => {
+            registration.unregister();
+        });
+    }
+}
+exports.unregisterServiceWorker = unregisterServiceWorker;

package/window/runWhenVisible.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Runs a callback function when an element it is visible in the viewport
+ * @param {HTMLElement} el The element
+ * @param {Function} callback The function to call once the element is visible
+ */
+export default function runWhenVisible(el: HTMLElement, callback: (param: HTMLElement) => void): void;

package/window/runWhenVisible.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Runs a callback function when an element it is visible in the viewport
+ * @param {HTMLElement} el The element
+ * @param {Function} callback The function to call once the element is visible
+ */
+function runWhenVisible(el, callback) {
+    /* istanbul ignore next */
+    if (typeof IntersectionObserver === 'undefined')
+        return;
+    const observer = new IntersectionObserver(entries => {
+        // if intersectionRatio is 0, the element is out of view and we do not need to do anything.
+        if (entries[0].intersectionRatio > 0) {
+            observer.disconnect();
+            callback(el);
+        }
+    }, {
+        // setting this to > 0 to avoid a race condition where an element comes into the
+        // viewport at the same time as display/visibility becomes block/visible, and
+        // the IntersectionObserver is then only triggered with a ratio of 0
+        threshold: 0.01,
+    });
+    // Note: apparently we don't need to clean these up when the observed node is removed.
+    // See https://stackoverflow.com/questions/51106261/should-mutationobservers-be-removed-disconnected-when-the-attached-dom-node-is-r/51106262#51106262
+    observer.observe(el);
+}
+exports.default = runWhenVisible;

package/window/waitForServiceWorker.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Resolves when the service worker has been installed.
+ */
+export default function waitForServiceWorker(): Promise<ServiceWorker>;

package/window/waitForServiceWorker.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Resolves when the service worker has been installed.
+ */
+async function waitForServiceWorker() {
+    if (!navigator.serviceWorker || !navigator.serviceWorker.ready) {
+        throw new Error('service worker not supported');
+    }
+    await navigator.serviceWorker.ready;
+    if (navigator.serviceWorker.controller) {
+        return navigator.serviceWorker.controller;
+    }
+    else {
+        return new Promise((resolve, reject) => {
+            navigator.serviceWorker.addEventListener('controllerchange', () => {
+                if (navigator.serviceWorker.controller) {
+                    resolve(navigator.serviceWorker.controller);
+                }
+                else {
+                    reject(new Error('service worker not supported'));
+                }
+            });
+        });
+    }
+}
+exports.default = waitForServiceWorker;

package/window/watchElements.d.ts

@@ -0,0 +1,7 @@
+import { PrefetchWatcherConfig } from './InstallOptions';
+/**
+ * Sets up observers to watch for elements matching the list of selectors, then
+ * perform the given callback when an element becomes visible
+ * @param {PrefetchWatcherConfig[]} configArr Contains the list of selector/callback pairs
+ */
+export default function watchElements(configArr: PrefetchWatcherConfig[] | undefined): void;

package/window/watchElements.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const runWhenVisible_1 = __importDefault(require("./runWhenVisible"));
+let observer;
+const watchConfigs = new Set();
+/**
+ * Sets up observers to watch for elements matching the list of selectors, then
+ * perform the given callback when an element becomes visible
+ * @param {PrefetchWatcherConfig[]} configArr Contains the list of selector/callback pairs
+ */
+function watchElements(configArr) {
+    /* istanbul ignore next */
+    if (typeof MutationObserver === 'undefined')
+        return;
+    if (!configArr || !configArr.length)
+        return;
+    configArr.forEach(watch => watchConfigs.add(watch));
+    if (!observer) {
+        observer = new MutationObserver(mutationsList => {
+            for (let mutation of mutationsList) {
+                ;
+                [...watchConfigs].forEach(watch => {
+                    filterBySelector(mutation.addedNodes, watch.selector).forEach(match => runWhenVisible_1.default(match, watch.callback));
+                });
+            }
+        });
+    }
+    observer.observe(document.body, {
+        subtree: true,
+        childList: true,
+    });
+    configArr.forEach(watch => {
+        document.querySelectorAll(watch.selector).forEach(match => {
+            const el = match;
+            runWhenVisible_1.default(el, watch.callback);
+        });
+    });
+}
+exports.default = watchElements;
+/**
+ * Returns all nodes in the node list that match one of the given selectors
+ * @param {NodeList} nodes A node list to filter
+ * @param {String} selector Selector used to match elements
+ */
+function filterBySelector(nodes, selector) {
+    const results = new Set();
+    Array.from(nodes).forEach(n => {
+        if (n.nodeType === Node.ELEMENT_NODE) {
+            const el = n;
+            if (el.matches(selector)) {
+                results.add(el);
+            }
+            else {
+                const matches = el.querySelectorAll(selector);
+                matches.forEach(match => results.add(match));
+            }
+        }
+    });
+    return results;
+}

package/window/watchLinks.d.ts

@@ -0,0 +1,9 @@
+import CacheManifest from '@layer0/core/router/CacheManifest';
+import { ObserveOptionsConfig } from './InstallOptions';
+/**
+ * Watches the DOM for all current and future links whose href matches one of the
+ * specified URL patterns
+ * @param {CacheManifest} cacheManifest Regular expressions that will be tested against link href attributes
+ * @param {ObserveOptionsConfig} observeOpts Configuration for how the DOM is observed for node changes
+ */
+export default function watchLinks(cacheManifest: CacheManifest, observerOpts?: ObserveOptionsConfig): void;

package/window/watchLinks.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prefetchWhenVisible_1 = __importDefault(require("./prefetchWhenVisible"));
+const CacheManifest_1 = __importDefault(require("@layer0/core/router/CacheManifest"));
+const observerDefaults = {
+    disabled: false,
+    attributes: false,
+};
+let observer;
+const searchedEntries = new Set();
+/**
+ * Watches the DOM for all current and future links whose href matches one of the
+ * specified URL patterns
+ * @param {CacheManifest} cacheManifest Regular expressions that will be tested against link href attributes
+ * @param {ObserveOptionsConfig} observeOpts Configuration for how the DOM is observed for node changes
+ */
+function watchLinks(cacheManifest, observerOpts) {
+    /* istanbul ignore next */
+    if (typeof MutationObserver === 'undefined')
+        return;
+    cacheManifest.entries.forEach(entry => searchedEntries.add(entry));
+    observerOpts = { ...observerDefaults, ...observerOpts };
+    if (!observer) {
+        observer = new MutationObserver(mutationsList => {
+            for (let mutation of mutationsList) {
+                filterByHref(mutation.addedNodes, CacheManifest_1.default.fromEntries([...searchedEntries.values()])).forEach(prefetchWhenVisible_1.default);
+            }
+        });
+        if (!observerOpts.disabled) {
+            observer.observe(document.body, {
+                attributes: observerOpts.attributes,
+                childList: true,
+                subtree: true,
+            });
+        }
+    }
+    filterByHref(document.querySelectorAll('a'), cacheManifest).forEach(prefetchWhenVisible_1.default);
+}
+exports.default = watchLinks;
+/**
+ * Returns all nodes in the node list whose href matches at least one of the specified patterns.
+ * @param {NodeList} nodes A node list to filter
+ * @param {CacheManifest} cacheManifest Contains the list of route patterns to check
+ */
+function filterByHref(nodes, cacheManifest) {
+    const isMatchingLink = (el) => {
+        const href = el.getAttribute('href');
+        if (!href || el.tagName.toLowerCase() !== 'a') {
+            return false;
+        }
+        return cacheManifest.shouldPrefetch(new URL(href, window.location.href));
+    };
+    const results = new Set();
+    Array.from(nodes).forEach(n => {
+        if (n.nodeType === Node.ELEMENT_NODE) {
+            const el = n;
+            const links = [el, ...Array.from(el.querySelectorAll('a'))];
+            links.filter(isMatchingLink).forEach(link => results.add(link));
+        }
+    });
+    return results;
+}