Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
<pwa-install>
Progressive web apps install (add to home screen) vanilla web component.
Install
npm i @progressivewebcomponents/pwa-installInstall web components polyfills (needed for older browsers):
npm i -D @webcomponents/webcomponentsjsAlternatively, you can use unpkg.
Import
Load web components polyfill (if needed):
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>In JS files
import '../node_modules/@progressivewebcomponents/pwa-install/pwa-install.js';In HTML files
ES Modules (recommended)
<script type="module" src="../node_modules/@progressivewebcomponents/pwa-install/pwa-install.js"></script>HTML Imports (deprecated)
<link rel="import" href="../node_modules/@progressivewebcomponents/pwa-install/pwa-install.html">getInstalledRelatedApps
https://developers.chrome.com/origintrials/#/view_trial/855683929200394241
chrome://flags/#enable-experimental-web-platform-features
Use
Polymer
<pwa-install
id="a2hs"
available="{{installAvailable}}"
platforms="{{platforms}}"
choice-result="{{choiceResult}}"
supported="{{relatedAppsSupported}}"
related-apps="{{relatedApps}}"
on-pwa-install-available="handlePWAInstallAvailable"
on-pwa-install-install="handlePWAInstall"
on-pwa-install-installed="handlePWAInstalled"
on-pwa-install-error="handlePWAInstallError"
on-available-changed="handleAvailableChanged"
on-platforms-changed="handlePlatformsChanged"
on-choice-result-changed="handleChoiceResultChanged"
on-supported-changed="handleSupportedChanged"
on-related-apps-changed="handleRelatedAppsChanged">
</pwa-install>const pwaInstall = this.$.a2hs;
pwaInstall.install();
pwaInstall.getInstalledRelatedApps();LitHTML/LitElement
<pwa-install
id="a2hs"
@pwa-install-available="${this.handlePWAInstallAvailable}"
@pwa-install-install="${this.handlePWAInstall}"
@pwa-install-installed="${this.handlePWAInstalled}"
@pwa-install-error="${this.handlePWAInstallError}"
@available-changed="${this.handleAvailableChanged}"
@platforms-changed="${this.handlePlatformsChanged}"
@choice-result-changed="${this.handleChoiceResultChanged}"
@supported-changed="${this.handleSupportedChanged}"
@related-apps-changed="${this.handleRelatedAppsChanged}">
</pwa-install>const pwaInstall = this.shadowRoot.getElementById('a2hs');
pwaInstall.install();
pwaInstall.getInstalledRelatedApps();Vanilla (without any frameworks/libraries)
<pwa-install id="a2hs"></pwa-install>const pwaInstall = document.getElementById('a2hs');
pwaInstall.addEventListener('pwa-install-available', handlePWAInstallAvailable);
pwaInstall.addEventListener('pwa-install-install', handlePWAInstallInstall);
pwaInstall.addEventListener('pwa-install-installed', handlePWAInstallInstalled);
pwaInstall.addEventListener('pwa-install-error', handlePWAInstallError);
pwaInstall.addEventListener('available-changed', handleAvailableChanged);
pwaInstall.addEventListener('platforms-changed', handlePlatformsChanged);
pwaInstall.addEventListener('choice-result-changed', handleChoiceResultChanged);
pwaInstall.addEventListener('supported-changed', handleSupportedChanged);
pwaInstall.addEventListener('related-apps-changed', handleRelatedAppsChanged);
pwaInstall.install();
pwaInstall.getInstalledRelatedApps();Google Analytics
handlePWAInstallAvailable() {
if (window.ga) {
ga('send', 'event', 'pwa-install', 'available', this.platforms);
}
}
handlePWAInstallInstall() {
if (window.ga) {
ga('send', 'event', 'pwa-install', this.choiceResult.outcome, this.choiceResult.platform);
}
}
handlePWAInstallInstalled() {
if (window.ga) {
ga('send', 'event', 'pwa-install', 'installed', this.choiceResult.platform);
}
}
handlePWAInstallError() {
if (window.ga) {
ga('send', 'event', 'pwa-install', 'error', this.choiceResult.platform);
}
}