@khmyznikov/pwa-install - npm Package Compare versions

Comparing version 0.4.8 to 0.5.0

.vscode/launch.json

@@ -0,0 +0,0 @@ {

.vscode/settings.json

@@ -0,0 +0,0 @@ {

CONTRIBUTING.md

@@ -0,0 +0,0 @@ ## Contributor guidelines

custom-elements.json

@@ -133,2 +133,11 @@ {
               "kind": "field",
+              "name": "disableFallback",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disable-android-fallback"
+            },
+            {
+              "kind": "field",
               "name": "useLocalStorage",
@@ -204,2 +213,20 @@ "type": {
               "kind": "field",
+              "name": "isAndroidFallback",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "isAndroid",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
               "name": "isUnderStandaloneMode",
@@ -392,2 +419,10 @@ "type": {
             {
+              "name": "disable-android-fallback",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disableFallback"
+            },
+            {
               "name": "use-local-storage",
@@ -394,0 +429,0 @@ "type": {

dist/types/index.d.ts

@@ -17,2 +17,3 @@ import { LitElement, PropertyValues } from 'lit';
     disableClose: boolean;
+    disableFallback: boolean;
     useLocalStorage: boolean;
@@ -27,2 +28,4 @@ static get styles(): CSSStyleSheet[];
     isAppleDesktopPlatform: boolean;
+    isAndroidFallback: boolean;
+    isAndroid: boolean;
     isUnderStandaloneMode: boolean;
@@ -40,5 +43,6 @@ isRelatedAppsInstalled: boolean;
     getInstalledRelatedApps: () => Promise<IRelatedApp[]>;
-    private _howToForApple;
+    private _toggleHowTo;
     private _toggleGallery;
-    private _checkInstalled;
+    private _checkPlatform;
+    private _checkInstallAvailable;
     private _init;
@@ -45,0 +49,0 @@ private _requestUpdate;

dist/types/localization/locales/cs.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/da.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/de.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/el.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/es.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/fr.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/it.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/ja.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/km.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/ko.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/nl.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/no.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/pl.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/pt.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/ru.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/sr.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -11,3 +14,2 @@ sa5ef80b4bb9b39f8: string;
     sc79fd7641eb9a975: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
@@ -14,0 +16,0 @@ sfea652f6580ff086: string;

dist/types/localization/locales/sv.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/tr.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/uk.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/zh-CN.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/localization/locales/zh-HK.d.ts

 export declare const templates: {
+    s1488e73779d7682f: string;
     s182ab2d6c997515f: string;
     s1b9047d53d9f9d22: string;
+    s2d90afa5dcca2c0e: string;
     s37a9e8aec5713460: string;
-    s5c6aad7a7e4a1437: string;
+    s4593f304dac8848c: string;
+    s54cfbb14f46396d4: string;
     s6196153c4b0c1ea0: string;
@@ -13,5 +16,4 @@ s922329d6f6213590: string;
     scdaf4bbff76674c8: string;
-    sdfe23506a3b0cdc8: string;
     se740f75b95a51807: string;
     sfea652f6580ff086: string;
 };

dist/types/templates/chrome/bottom-sheet/index.d.ts

@@ -8,2 +8,3 @@ import { LitElement } from 'lit';
 export default class PWABottomSheetElement extends LitElement {
+    static get styles(): CSSStyleSheet[];
     props: IProps;
@@ -15,2 +16,7 @@ install: {
     disableClose: boolean;
+    fallback: boolean;
+    howToRequested: boolean;
+    toggleHowTo: {
+        handleEvent: () => void;
+    };
     private _callInstall;
@@ -24,3 +30,2 @@ private _callHide;
     firstUpdated(): void;
-    createRenderRoot(): this;
     connectedCallback(): void;
@@ -27,0 +32,0 @@ render(): import("lit").TemplateResult<1>;

dist/types/templates/chrome/bottom-sheet/template-bottom-sheet.d.ts

@@ -1,2 +0,2 @@
-declare const template: (name: string, description: string, icon: string, install: any) => import("lit").TemplateResult<1>;
+declare const template: (name: string, description: string, icon: string, install: any, fallback?: boolean, howToRequested?: boolean) => import("lit").TemplateResult<1>;
 export default template;

dist/types/templates/chrome/template.d.ts

 import { WebAppManifest } from 'web-app-manifest';
-declare const template: (name: string, description: string, installDescription: string, disableDescription: boolean, disableScreenshots: boolean, disableClose: boolean, icon: string, manifest: WebAppManifest, installAvailable: any, hideDialog: any, install: any, toggleGallery: any, galleryRequested: boolean) => import("lit").TemplateResult<1>;
+declare const template: (name: string, description: string, installDescription: string, disableDescription: boolean, disableScreenshots: boolean, disableClose: boolean, icon: string, manifest: WebAppManifest, installAvailable: any, hideDialog: any, install: any, toggleGallery: any, galleryRequested: boolean, toggleHowTo: any, howToRequested: boolean, isAndroidFallback: boolean) => import("lit").TemplateResult<1>;
 export default template;

dist/types/types/types.d.ts

@@ -9,2 +9,3 @@ import { ImageResource } from 'web-app-manifest';
     defferedPromptEvent: BeforeInstallPromptEvent | null;
+    BeforeInstallPromptEvent: BeforeInstallPromptEvent;
 }
@@ -11,0 +12,0 @@ type Booleanish = 'true' | 'false';

dist/types/utils.d.ts

@@ -6,2 +6,4 @@ import { WebAppManifest } from 'web-app-manifest';
     static isAppleDesktop(): boolean;
+    static isAndroid(): boolean;
+    static isAndroidFallback(): boolean;
     static deviceFormFactor(): 'narrow' | 'wide';
@@ -20,2 +22,8 @@ static isStandalone(): boolean;
     static normalizeManifestAssetUrls(manifest: WebAppManifest, manifestUrl: string): void;
+    static fetchAndProcessManifest(manifestUrl: string, icon: string, name: string, description: string): Promise<{
+        _manifest: WebAppManifest;
+        icon: string;
+        name: string;
+        description: string;
+    }>;
 }

docs/service-worker.js

@@ -1,1 +0,1 @@
-var cacheName="PWAinstallDemo-17.10.2024/22:35:41",filesToCache=["/pwa-install/","manifest.json"];function sendMessage(e,n){return new Promise((function(t,s){var a=new MessageChannel;e.postMessage(n,[a.port2])}))}function sendMessageToAll(e,n){clients.matchAll().then((t=>{t.forEach((n=>{sendMessage(n,e)})),n&&"function"==typeof n&&n()}))}self.addEventListener("install",(function(e){e.waitUntil(caches.open(cacheName).then((function(e){return e.addAll(filesToCache)}))),self.skipWaiting()})),self.addEventListener("activate",(function(e){return e.waitUntil(caches.keys().then((function(e){return Promise.all(e.map((function(e){if(e!==cacheName)return sendMessageToAll("NEW_VERSION"),caches.delete(e)})))}))),self.clients.claim()})),self.addEventListener("fetch",(function(e){e.respondWith(caches.match(e.request,{ignoreSearch:!0}).then((function(n){return n||fetch(e.request)})))})),self.addEventListener("message",(e=>{e&&e.data&&e.data.message}));
+var cacheName="PWAinstallDemo-31.12.2024/12:24:14",filesToCache=["/pwa-install/","manifest.json"];function sendMessage(e,n){return new Promise((function(t,s){var a=new MessageChannel;e.postMessage(n,[a.port2])}))}function sendMessageToAll(e,n){clients.matchAll().then((t=>{t.forEach((n=>{sendMessage(n,e)})),n&&"function"==typeof n&&n()}))}self.addEventListener("install",(function(e){e.waitUntil(caches.open(cacheName).then((function(e){return e.addAll(filesToCache)}))),self.skipWaiting()})),self.addEventListener("activate",(function(e){return e.waitUntil(caches.keys().then((function(e){return Promise.all(e.map((function(e){if(e!==cacheName)return sendMessageToAll("NEW_VERSION"),caches.delete(e)})))}))),self.clients.claim()})),self.addEventListener("fetch",(function(e){e.respondWith(caches.match(e.request,{ignoreSearch:!0}).then((function(n){return n||fetch(e.request)})))})),self.addEventListener("message",(e=>{e&&e.data&&e.data.message}));

package.json

 {
   "name": "@khmyznikov/pwa-install",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "PWA install dialog provide more convenience user experience and fix lack of native dialogs in some browsers.",
@@ -49,11 +49,11 @@ "repository": {
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@lit/localize": "^0.12.2",
     "@lit/localize-tools": "^0.8.0",
-    "@types/node": "^20.16.11",
+    "@types/node": "^20.17.10",
     "autoprefixer": "^10.4.20",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^12.0.2",
-    "eslint": "^9.12.0",
-    "express": "^4.21.1",
+    "eslint": "^9.17.0",
+    "express": "^4.21.2",
     "filemanager-webpack-plugin": "^8.0.0",
@@ -63,14 +63,14 @@ "lit-scss-loader": "^2.0.1",
     "null-loader": "^4.0.1",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
-    "sass": "^1.80.1",
-    "sass-loader": "^16.0.2",
-    "terser-webpack-plugin": "^5.3.10",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.4",
+    "terser-webpack-plugin": "^5.3.11",
     "ts-loader": "9.5.1",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "typescript-lit-html-plugin": "^0.9.0",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0",
     "webpack-merge": "^6.0.1"
@@ -77,0 +77,0 @@ },

README.md

@@ -7,3 +7,3 @@ [![Published on NPM](https://img.shields.io/npm/v/@khmyznikov/pwa-install.svg)](https://www.npmjs.com/package/@khmyznikov/pwa-install)
 
-Installation dialog for Progressive Web Application (PWA) and Add to Home Screen/Dock dialog for Web Apps. This offers an enhanced user experience and addresses the absence of native dialogs in certain browsers. **20kB brotli** compressed bundle. Translation/localization is supported.
+Installation dialog for Progressive Web Application (PWA) and Add to Home Screen/Dock dialog for Web Apps. This offers an enhanced user experience and addresses the absence of native dialogs in certain browsers (Safari, Firefox, Opera, etc.). **20kB brotli** compressed bundle. Translation/localization is supported.
 
@@ -13,2 +13,5 @@ Use it as [Web Component with any **modern** framework](https://custom-elements-everywhere.com/). No polyfill is required.
 - [Angular sample](https://stackblitz.com/edit/aozf92?file=package.json,src%2Fapp%2Fpwa-install%2Fpwa-install.component.html,src%2Fapp%2Fpwa-install%2Fpwa-install.component.ts)
+- [Svelte](https://stackblitz.com/edit/svelte-tab-2-sng9wa?file=src%2Froutes%2F%2Bpage.svelte)
+  
+⚡Should work with any other modern framework or just vanila js as web component.
 
@@ -33,5 +36,5 @@ ## **[Demo](https://khmyznikov.com/pwa-install/)**
 
-| Android | App gallery   | Light theme   |
+| Android | Firefox/Opera/Others       | App gallery   |
 |-|-|-|
-|![Android example default](https://user-images.githubusercontent.com/6115884/169654789-41fb88b3-97b2-4992-aab5-0def6015be21.jpg)|![Android example gallery](https://user-images.githubusercontent.com/6115884/169654833-b09c1eff-cfea-41c8-b2d0-66515cd1bc2c.jpg)|![Android example white](https://user-images.githubusercontent.com/6115884/169654871-33f30d44-b70c-4912-a678-3d97fd0d80a8.jpg)|
+|![Android example default](https://user-images.githubusercontent.com/6115884/169654789-41fb88b3-97b2-4992-aab5-0def6015be21.jpg)|![Firefox Opera and others](https://github.com/user-attachments/assets/03131c42-8cd0-4e93-a2fe-d75a75223550)|![Android example white](https://user-images.githubusercontent.com/6115884/169654871-33f30d44-b70c-4912-a678-3d97fd0d80a8.jpg)|
 
@@ -93,2 +96,4 @@ | Chrome  | App Gallery   |
 
+  disable-android-fallback="true"
+
   manifest-url="/manifest.json"
@@ -103,2 +108,3 @@ name="PWA"
   use-local-storage will store the user's preference to ignore the prompt in long-lived storage (so they will not be prompted again unless they clear application data)
+  disable-android-fallback will disable instructions for non-Chrome browsers on Android
 --->
@@ -226,6 +232,9 @@ ```
 
-## Backers ❤️
+## One-time Backers ❤️
 [Patrick Voigt](https://github.com/pvo13)<br>
 [Darren Debono](https://github.com/amigabits)<br>
 [Angelo Fan](https://github.com/angelofan)<br>
+[Chris Cherniakov](https://github.com/Taequn)<br>
+[Moddy](https://github.com/moddyio)<br>
+[Pavlo Hromadchuk](https://github.com/hromadchuk)<br>
 Leek Duck

src/index.ts

@@ -17,2 +17,3 @@ import { LitElement, PropertyValues, html } from 'lit';
 import styles from './templates/chrome/styles.scss';
+import stylesCommon from './templates/chrome/styles-common.scss'
 import stylesApple from './templates/apple/styles-apple.scss';
@@ -47,6 +48,7 @@
 	@property({attribute: 'disable-close', type: Boolean}) disableClose = false;
+	@property({attribute: 'disable-android-fallback', type: Boolean}) disableFallback = false;
 	@property({attribute: 'use-local-storage', type: Boolean}) useLocalStorage = false;
 
 	static get styles() {
-		return [ styles, stylesApple ];
+		return [ styles, stylesCommon, stylesApple ];
 	}
@@ -63,2 +65,4 @@
 	public isAppleDesktopPlatform = false;
+	public isAndroidFallback = false;
+	public isAndroid = false;
 	public isUnderStandaloneMode = false;
@@ -131,3 +135,3 @@ public isRelatedAppsInstalled = false;
 	/** @internal */
-	private _howToForApple = {
+	private _toggleHowTo = {
         handleEvent: () => {
@@ -159,3 +163,3 @@ this._howToRequested = !this._howToRequested;
 	/** @internal */
-	private async _checkInstalled() {
+	private async _checkPlatform() {
 		this.isUnderStandaloneMode = Utils.isStandalone();
@@ -165,27 +169,26 @@ this.isRelatedAppsInstalled = await Utils.isRelatedAppsInstalled();
 		this.isAppleDesktopPlatform = Utils.isAppleDesktop();
+		this.isAndroidFallback = Utils.isAndroidFallback();
+		this.isAndroid = Utils.isAndroid();
+	}
+	/** @internal */
+	private _checkInstallAvailable() {
+		if (this.isUnderStandaloneMode)
+			return;
 
 		if (this.isAppleMobilePlatform || this.isAppleDesktopPlatform) {
-			if (!this.isUnderStandaloneMode) {
-				this.manualApple && this.hideDialog();
-				setTimeout(
-					() => {
-						this.isInstallAvailable = true;
-						this.requestUpdate()
-						Utils.eventInstallAvailable(this);
-					},
-					1000
-				);
-			}
+			this.manualApple && this.hideDialog();
+			setTimeout(
+				() => {
+					this.isInstallAvailable = true;
+					this.requestUpdate()
+					Utils.eventInstallAvailable(this);
+				},
+				1000
+			);
+			return;
 		}
-		else {
+
+		let _promptTriggered = false;
+		if (!this.disableChrome && window.BeforeInstallPromptEvent) {
 			this.manualChrome && this.hideDialog();
-		}
-	}
-	/** @internal */
-	private _init = async () => {
-		window.defferedPromptEvent = null;
-
-		this._checkInstalled();
-
-		if (!this.disableChrome) {
 			const _promptHandler = (e: BeforeInstallPromptEvent) => {
@@ -197,3 +200,3 @@ window.defferedPromptEvent = e;
 
-				if (this.isRelatedAppsInstalled || this.isUnderStandaloneMode) {
+				if (this.isRelatedAppsInstalled) {
 					this.isInstallAvailable = false;
@@ -210,2 +213,4 @@ } else {
 
+				_promptTriggered = true;
+				this.isAndroidFallback = false;
 				this.requestUpdate();
@@ -218,29 +223,52 @@ }
 		}
+		
+		if (!this.disableFallback && this.isAndroid && !_promptTriggered) {
+			// browsers without BeforeInstallPromptEvent
+			if (this.isAndroidFallback) {
+				setTimeout(
+					() => {
+						this.isInstallAvailable = true;
+						this.requestUpdate()
+						Utils.eventInstallAvailable(this);
+					},
+					1000
+				);
+				return;
+			}
+			// trying to fix browsers like Opera with BeforeInstallPromptEvent not working
+			if ('userActivation' in navigator) {
+				const _activation = navigator.userActivation;
+				const _activationHandler = setInterval(() => {
+					if (_activation.isActive || _activation.hasBeenActive) {
+						if (!_promptTriggered) {
+							this.isAndroidFallback = true;
+							this.isInstallAvailable = true;
+							this.requestUpdate();
+							Utils.eventInstallAvailable(this);
+						}
+						clearInterval(_activationHandler);
+					}
+				}, 1000);
+				setTimeout(() => clearInterval(_activationHandler), 30000);
+			}
+		}
+	}
 
-		window.addEventListener('appinstalled', (e) => {
-			window.defferedPromptEvent = null;
-			this.isInstallAvailable = false;
+	/** @internal */
+	private _init = async () => {
+		window.defferedPromptEvent = null;
 
-			this.requestUpdate();
-			Utils.eventInstalledSuccess(this);
-		});
+		await this._checkPlatform();
+		this._checkInstallAvailable();
 
+		if ('onappinstalled' in window)
+			window.addEventListener('appinstalled', (e) => {
+				window.defferedPromptEvent = null;
+				this.isInstallAvailable = false;
 
-		try{
-			const _response = await fetch(this.manifestUrl);
-			const _json = await _response.json() as WebAppManifest;
-			if (!_response.ok || !_json || !Object.keys(_json))
-				throw new Error('Manifest not found');
-			Utils.normalizeManifestAssetUrls(_json, this.manifestUrl);
-			
-			this.icon = this.icon || _json.icons?.length ? _json.icons![0].src : '';
-			this.name = this.name || _json['short_name'] || _json.name || '';
-			this.description = this.description || _json.description || '';
-			this._manifest = _json;
-		}
-		catch(e) {
-			this.icon = this.icon || this._manifest.icons?.[0].src || '';
-			this.name = this.name || this._manifest['short_name'] || '';
-			this.description = this.description || this._manifest.description || '';
-		}
+				this.requestUpdate();
+				Utils.eventInstalledSuccess(this);
+			});
+
+		Object.assign(this, await Utils.fetchAndProcessManifest(this.manifestUrl, this.icon, this.name, this.description));
 	};
@@ -282,3 +310,3 @@ /** @internal */
 				this._hideDialogUser,
-				this._howToForApple,
+				this._toggleHowTo,
 				this.isAppleDesktopPlatform,
@@ -303,3 +331,6 @@ this._howToRequested,
 				this._toggleGallery,
-				this._galleryRequested
+				this._galleryRequested,
+				this._toggleHowTo,
+				this._howToRequested,
+				this.isAndroidFallback
 			)}`;
@@ -306,0 +337,0 @@ }

src/localization/locales/cs.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Přidejte jej na plochu pro rozšířené využití a snadný přístup.`,
+      's1488e73779d7682f': `1) Otevřete nabídku prohlížeče`,
+'s182ab2d6c997515f': `Přidejte jej na plochu pro rozšířené využití a snadný přístup.`,
 's1b9047d53d9f9d22': `2) Stiskněte tlačítko Sdílet na navigačním panelu`,
+'s2d90afa5dcca2c0e': `3) Projděte dolů k "Přidat na plochu"`,
 's37a9e8aec5713460': `Vice`,
-'s5c6aad7a7e4a1437': `3) Stiskněte tlačítko Přidat na plochu`,
+'s4593f304dac8848c': `2) Klepněte na "Přidat na plochu"`,
+'s54cfbb14f46396d4': `1) Otevřete v hlavním prohlížeči`,
 's6196153c4b0c1ea0': `Nainstalovat`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Přidat do Docku`,
 'scdaf4bbff76674c8': `Přidat na plochu`,
-'sdfe23506a3b0cdc8': `1) Otevřete v prohlížeči Safari`,
 'se740f75b95a51807': `Přidejte jej do svého Docku pro rozšířené využití a snadný přístup.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Tento web má funkce aplikace.`,

src/localization/locales/da.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Tilføj den til din hjemmeskærm for en bedre oplevelse og nem adgang.`,
+      's1488e73779d7682f': `1) Åbn din browsermenu`,
+'s182ab2d6c997515f': `Tilføj den til din hjemmeskærm for en bedre oplevelse og nem adgang.`,
 's1b9047d53d9f9d22': `2) Tryk på Del-knappen i navigationslinjen`,
+'s2d90afa5dcca2c0e': `3) Rul ned til "Tilføj til hjemmeskærm"`,
 's37a9e8aec5713460': `Mere`,
-'s5c6aad7a7e4a1437': `3) Vælg Tilføj til hjemmeskærm`,
+'s4593f304dac8848c': `2) Tryk på "Tilføj til hjemmeskærm"`,
+'s54cfbb14f46396d4': `1) Åbn i din primære browser`,
 's6196153c4b0c1ea0': `Installer`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Tilføj til Dock`,
 'scdaf4bbff76674c8': `Tilføj til hjemmeskærm`,
-'sdfe23506a3b0cdc8': `1) Åbn i Safari-browseren`,
 'se740f75b95a51807': `Tilføj den til din Dock for en bedre oplevelse og nem adgang.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Denne side har app-funktionalitet.`,

src/localization/locales/de.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Fügen Sie es zu Ihrem Startbildschirm hinzu, um eine umfassende Erfahrung und einen leichten Zugriff zu erhalten.`,
+      's1488e73779d7682f': `1) Öffnen Sie das Menü Ihres Browsers`,
+'s182ab2d6c997515f': `Fügen Sie es zu Ihrem Startbildschirm hinzu, um eine umfassende Erfahrung und einen leichten Zugriff zu erhalten.`,
 's1b9047d53d9f9d22': `2) Drücken Sie auf Teilen in der Navigationsleiste`,
+'s2d90afa5dcca2c0e': `3) Scrollen Sie nach unten zu "Zum Startbildschirm hinzufügen"`,
 's37a9e8aec5713460': `Mehr`,
-'s5c6aad7a7e4a1437': `3) Drücken Sie Hinzufügen zum Startbildschirm`,
+'s4593f304dac8848c': `2) Tippen Sie auf "Zum Startbildschirm hinzufügen"`,
+'s54cfbb14f46396d4': `1) Öffnen Sie es in Ihrem Hauptbrowser`,
 's6196153c4b0c1ea0': `Installieren`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Zum Dock hinzufügen`,
 'scdaf4bbff76674c8': `Hinzufügen zum Startbildschirm`,
-'sdfe23506a3b0cdc8': `1) In Safari-Browser öffnen`,
 'se740f75b95a51807': `Fügen Sie es zu Ihrem Dock hinzu, um eine umfassende Erfahrung und einen leichten Zugriff zu erhalten.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Diese Website verfügt über App-Funktionalität.`,

src/localization/locales/el.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Προσθέστε το στην οθόνη Αφετηρίας για εκτεταμένη εμπειρία και εύκολη πρόσβαση.`,
+      's1488e73779d7682f': `1) Ανοίξτε το μενού του περιηγητή σας`,
+'s182ab2d6c997515f': `Προσθέστε το στην οθόνη Αφετηρίας για εκτεταμένη εμπειρία και εύκολη πρόσβαση.`,
 's1b9047d53d9f9d22': `2) Πατήστε Κοινοποίηση στη γραμμή πλοήγησης`,
+'s2d90afa5dcca2c0e': `3) Κάντε κύλιση προς τα κάτω στο "Προσθήκη στην οθόνη Αφετηρίας"`,
 's37a9e8aec5713460': `Περισσότερα`,
-'s5c6aad7a7e4a1437': `3) Πατήστε Προσθήκη στην οθόνη Αφετηρίας`,
+'s4593f304dac8848c': `2) Πατήστε "Προσθήκη στην οθόνη Αφετηρίας"`,
+'s54cfbb14f46396d4': `1) Ανοίξτε στον κύριο περιηγητή σας`,
 's6196153c4b0c1ea0': `Εγκατάσταση`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Προσθήκη στην Πρόσβαση`,
 'scdaf4bbff76674c8': `Προσθήκη στην Οθόνη Αφετηρίας`,
-'sdfe23506a3b0cdc8': `1) Ανοίξτε τον περιηγητή Safari`,
 'se740f75b95a51807': `Προσθέστε το στην Πρόσβαση για εκτεταμένη εμπειρία και εύκολη πρόσβαση.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Αυτός ο ιστότοπος έχει λειτουργική εφαρμογής.`,

src/localization/locales/es.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Añádelo a tu pantalla de inicio para una experiencia amplia y acceso fácil.`,
+      's1488e73779d7682f': `1) Abre el menú de tu navegador`,
+'s182ab2d6c997515f': `Añádelo a tu pantalla de inicio para una experiencia amplia y acceso fácil.`,
 's1b9047d53d9f9d22': `2) Presionar Compartir en la barra de direcciones`,
+'s2d90afa5dcca2c0e': `3) Desplázate hacia abajo hasta "Añadir a pantalla de inicio"`,
 's37a9e8aec5713460': `Más`,
-'s5c6aad7a7e4a1437': `3) Presionar Añadir a pantalla de inicio`,
+'s4593f304dac8848c': `2) Toca "Añadir a pantalla de inicio"`,
+'s54cfbb14f46396d4': `1) Abre en tu navegador principal`,
 's6196153c4b0c1ea0': `Instalar`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Añadir al Dock`,
 'scdaf4bbff76674c8': `Añadir a pantalla de inicio`,
-'sdfe23506a3b0cdc8': `1) Abrir en el navegador web Safari`,
 'se740f75b95a51807': `Añádelo a tu Dock para una experiencia amplia y acceso fácil.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Este sitio tiene funcionalidad de aplicación.`,

src/localization/locales/fr.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Ajoutez-le à votre écran d'accueil pour une expérience étendue et un accès facile.`,
+      's1488e73779d7682f': `1) Ouvrez le menu de votre navigateur`,
+'s182ab2d6c997515f': `Ajoutez-le à votre écran d'accueil pour une expérience étendue et un accès facile.`,
 's1b9047d53d9f9d22': `2) Appuyez sur Partager dans la barre de navigation`,
+'s2d90afa5dcca2c0e': `3) Faites défiler vers le bas jusqu'à "Ajouter à l'écran d'accueil"`,
 's37a9e8aec5713460': `Plus`,
-'s5c6aad7a7e4a1437': `3) Appuyez sur Ajouter à l'écran d'accueil`,
+'s4593f304dac8848c': `2) Touchez "Ajouter à l'écran d'accueil"`,
+'s54cfbb14f46396d4': `1) Ouvrir dans votre navigateur principal`,
 's6196153c4b0c1ea0': `Installer`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Ajouter au Dock`,
 'scdaf4bbff76674c8': `Ajouter à l'écran d'accueil`,
-'sdfe23506a3b0cdc8': `1) Ouvrir dans le navigateur Safari`,
 'se740f75b95a51807': `Ajoutez-le à votre Dock pour une expérience étendue et un accès facile.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Ce site possède des fonctionnalités d'application.`,

src/localization/locales/it.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Aggiungilo alla schermata principale per un'esperienza più completa e un accesso facile.`,
+      's1488e73779d7682f': `1) Apri il menu del tuo browser`,
+'s182ab2d6c997515f': `Aggiungilo alla schermata principale per un'esperienza più completa e un accesso facile.`,
 's1b9047d53d9f9d22': `2) Premi Condividi nella barra di navigazione`,
+'s2d90afa5dcca2c0e': `3) Scorri verso il basso fino a "Aggiungi alla schermata principale"`,
 's37a9e8aec5713460': `Più`,
-'s5c6aad7a7e4a1437': `3) Premi Aggiungi alla schermata principale`,
+'s4593f304dac8848c': `2) Tocca "Aggiungi alla schermata principale"`,
+'s54cfbb14f46396d4': `1) Apri nel tuo browser principale`,
 's6196153c4b0c1ea0': `Installa`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Aggiungi al Dock`,
 'scdaf4bbff76674c8': `Aggiungi alla schermata principale`,
-'sdfe23506a3b0cdc8': `1) Apri nel browser Safari`,
 'se740f75b95a51807': `Aggiungilo al Dock per un'esperienza più completa e un accesso facile.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Questo sito ha funzionalità di app.`,

src/localization/locales/ja.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `ホーム画面に追加して、幅広い体験と簡単なアクセスを実現してください。`,
+      's1488e73779d7682f': `1) ブラウザメニューを開く`,
+'s182ab2d6c997515f': `ホーム画面に追加して、幅広い体験と簡単なアクセスを実現してください。`,
 's1b9047d53d9f9d22': `2) ナビゲーションバーで共有を押す`,
+'s2d90afa5dcca2c0e': `3) 「ホーム画面に追加」までスクロールする`,
 's37a9e8aec5713460': `展開`,
-'s5c6aad7a7e4a1437': `3) 「ホーム画面に追加」を押す`,
+'s4593f304dac8848c': `2) 「ホーム画面に追加」をタップする`,
+'s54cfbb14f46396d4': `1) メインブラウザで開く`,
 's6196153c4b0c1ea0': `インストール`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Dockに追加`,
 'scdaf4bbff76674c8': `ホーム画面に追加`,
-'sdfe23506a3b0cdc8': `1) Safariで開く`,
 'se740f75b95a51807': `ドックに追加して、幅広い体験と簡単なアクセスを実現してください。`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `このサイトはアプリ機能があります。`,

src/localization/locales/km.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `បន្ថែមវាទៅកាន់ផ្ទាំងអេក្រង់ដើមដើម្បីទទួលបាននូវបទពិសោធន៍កាន់តែល្អនិងងាយស្រួលប្រើ។`,
+      's1488e73779d7682f': `1) បើកម៉ឺនុយកម្មវិធីរុករករបស់អ្នក`,
+'s182ab2d6c997515f': `បន្ថែមវាទៅកាន់ផ្ទាំងអេក្រង់ដើមដើម្បីទទួលបាននូវបទពិសោធន៍កាន់តែល្អនិងងាយស្រួលប្រើ។`,
 's1b9047d53d9f9d22': `2) ចុចលើ ប៊ូតុងចែករំលែក នៅក្នុងរបារទិសដៅ`,
+'s2d90afa5dcca2c0e': `3) អូសចុះទៅកាន់ "បន្ថែមទៅផ្ទាំងអេក្រង់ដើម"`,
 's37a9e8aec5713460': `បង្ហាញបន្ថែម`,
-'s5c6aad7a7e4a1437': `3) ចុចលើ បន្ថែមទៅកាន់ផ្ទាំងអេក្រង់ដើម`,
+'s4593f304dac8848c': `2) ចុចលើ "បន្ថែមទៅកាន់ផ្ទាំងអេក្រង់ដើម"`,
+'s54cfbb14f46396d4': `1) បើកនៅក្នុងកម្មវិធីរុករកសំខាន់របស់អ្នក`,
 's6196153c4b0c1ea0': `តំឡើង`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `បន្ថែមទៅកាន់ Dock`,
 'scdaf4bbff76674c8': `បន្ថែមទៅកាន់ផ្ទាំងអេក្រង់ដើម`,
-'sdfe23506a3b0cdc8': `1) បើកនៅក្នុងកម្មវិធី Safari`,
 'se740f75b95a51807': `បន្ថែមវាទៅកាន់ Dock ដើម្បីទទួលបាននូវបទពិសោធន៍កាន់តែល្អនិងងាយស្រួលប្រើ។`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `គេហទំព័រនេះមានមុខងារជាកម្មវិធី។`,

src/localization/locales/ko.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `더 많은 기능과 쉬운 접근을 위해 홈 화면에 추가해주세요.`,
+      's1488e73779d7682f': `1) 브라우저 메뉴 열기`,
+'s182ab2d6c997515f': `더 많은 기능과 쉬운 접근을 위해 홈 화면에 추가해주세요.`,
 's1b9047d53d9f9d22': `2) 내비게이션 바에서 공유 버튼 누르기`,
+'s2d90afa5dcca2c0e': `3) "홈 화면에 추가"로 스크롤하기`,
 's37a9e8aec5713460': `더보기`,
-'s5c6aad7a7e4a1437': `3) 홈 화면에 추가 버튼 누르기`,
+'s4593f304dac8848c': `2) "홈 화면에 추가" 탭하기`,
+'s54cfbb14f46396d4': `1) 주 브라우저에서 열기`,
 's6196153c4b0c1ea0': `설치`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Dock에 추가`,
 'scdaf4bbff76674c8': `홈 화면에 추가`,
-'sdfe23506a3b0cdc8': `1) Safari 브라우저에서 열기`,
 'se740f75b95a51807': `더 많은 기능과 쉬운 접근을 위해 Dock에 추가해주세요.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `이 사이트는 앱 기능을 가지고 있습니다.`,

src/localization/locales/nl.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Voeg het toe aan je startscherm voor een uitgebreide ervaring en gemakkelijke toegang.`,
+      's1488e73779d7682f': `1) Open je browsermenu`,
+'s182ab2d6c997515f': `Voeg het toe aan je startscherm voor een uitgebreide ervaring en gemakkelijke toegang.`,
 's1b9047d53d9f9d22': `2) Druk op delen in de navigatiebalk`,
+'s2d90afa5dcca2c0e': `3) Scrol naar beneden naar "Toevoegen aan startscherm"`,
 's37a9e8aec5713460': `Meer`,
-'s5c6aad7a7e4a1437': `3) Druk op Toevoegen aan het startscherm`,
+'s4593f304dac8848c': `2) Tik op "Toevoegen aan startscherm"`,
+'s54cfbb14f46396d4': `1) Open in je hoofdprogramma`,
 's6196153c4b0c1ea0': `Installeren`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Toevoegen aan Dock`,
 'scdaf4bbff76674c8': `Toevoegen aan het startscherm`,
-'sdfe23506a3b0cdc8': `1) Open in Safari-browser`,
 'se740f75b95a51807': `Voeg het toe aan je Dock voor een uitgebreide ervaring en makkelijke toegang.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Deze site heeft app-functionaliteit.`,

src/localization/locales/no.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Legg den til på Hjem-skjermen din for å få en bedre brukeropplevelse og raskere tilgang.`,
+      's1488e73779d7682f': `1) Åpne menyen i nettleseren din`,
+'s182ab2d6c997515f': `Legg den til på Hjem-skjermen din for å få en bedre brukeropplevelse og raskere tilgang.`,
 's1b9047d53d9f9d22': `2) Trykk på Del-knappen i navigasjonslinjen`,
+'s2d90afa5dcca2c0e': `3) Rull ned til «Legg til på Hjem-skjerm»`,
 's37a9e8aec5713460': `Mer`,
-'s5c6aad7a7e4a1437': `3) Velg Legg til på Hjem-skjerm`,
+'s4593f304dac8848c': `2) Trykk på "Legg til på Hjem-skjerm"`,
+'s54cfbb14f46396d4': `1) Åpne i hovednettleseren din`,
 's6196153c4b0c1ea0': `Installer`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Legg til i Dock`,
 'scdaf4bbff76674c8': `Legg til på Hjem-skjerm`,
-'sdfe23506a3b0cdc8': `1) Åpne i Safari`,
 'se740f75b95a51807': `Legg den til i Docken din for å få en bedre brukeropplevelse og raskere tilgang.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Denne siden har app-funksjonalitet.`,

src/localization/locales/pl.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Dodaj do swojego Ekranu Głównego, aby uzyskać bogate doświadczenie i łatwy dostęp.`,
+      's1488e73779d7682f': `1) Otwórz menu przeglądarki`,
+'s182ab2d6c997515f': `Dodaj do swojego Ekranu Głównego, aby uzyskać bogate doświadczenie i łatwy dostęp.`,
 's1b9047d53d9f9d22': `2) Wybierz "Udostępnij"`,
+'s2d90afa5dcca2c0e': `3) Przewiń w dół do opcji "Dodaj do Ekranu Głównego"`,
 's37a9e8aec5713460': `Więcej`,
-'s5c6aad7a7e4a1437': `3) Wybierz "Dodaj do Ekranu Głównego"`,
+'s4593f304dac8848c': `2) Naciśnij "Dodaj do Ekranu Głównego"`,
+'s54cfbb14f46396d4': `1) Otwórz w swojej głównej przeglądarce`,
 's6196153c4b0c1ea0': `Zainstaluj`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Dodaj do Docka`,
 'scdaf4bbff76674c8': `Dodaj do Ekranu Głównego`,
-'sdfe23506a3b0cdc8': `1) Otwórz przeglądarkę Safari`,
 'se740f75b95a51807': `Dodaj do swojego Docka, aby uzyskać bogate doświadczenie i łatwy dostęp.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Ta strona posiada funkcje aplikacji.`,

src/localization/locales/pt.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Adicione à Tela de Início para uma melhor experiência e mais fácil acesso.`,
+      's1488e73779d7682f': `1) Abra o menu do seu navegador`,
+'s182ab2d6c997515f': `Adicione à Tela de Início para uma melhor experiência e mais fácil acesso.`,
 's1b9047d53d9f9d22': `2) Pressione Compartilhar na barra de endereço`,
+'s2d90afa5dcca2c0e': `3) Role para baixo até "Adicionar à Tela de Início"`,
 's37a9e8aec5713460': `Mais`,
-'s5c6aad7a7e4a1437': `3) Pressione Adicionar à Tela de Início`,
+'s4593f304dac8848c': `2) Toque em "Adicionar à Tela de Início"`,
+'s54cfbb14f46396d4': `1) Abra no seu navegador principal`,
 's6196153c4b0c1ea0': `Instalar`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Adicionar ao Dock`,
 'scdaf4bbff76674c8': `Adicionar à Tela de Início`,
-'sdfe23506a3b0cdc8': `1) Abra no navegador Safari`,
 'se740f75b95a51807': `Adicione ao Dock para uma melhor experiência e mais fácil acesso.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Este site possui funcionalidade de aplicativo.`,

src/localization/locales/ru.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Добавьте его на главный экран, чтобы получить дополнительные возможности и удобство использования.`,
+      's1488e73779d7682f': `1) Откройте меню вашего браузера`,
+'s182ab2d6c997515f': `Добавьте его на главный экран, чтобы получить дополнительные возможности и удобство использования.`,
 's1b9047d53d9f9d22': `2) Нажать "Поделиться"`,
+'s2d90afa5dcca2c0e': `3) Прокрутите вниз до "Добавить на главный экран"`,
 's37a9e8aec5713460': `Подробнее`,
-'s5c6aad7a7e4a1437': `3) Нажать "На экран «Домой»"`,
+'s4593f304dac8848c': `2) Нажмите "Добавить на главный экран"`,
+'s54cfbb14f46396d4': `1) Откройте в вашем основном браузере`,
 's6196153c4b0c1ea0': `Установить`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Добавить в Dock`,
 'scdaf4bbff76674c8': `На экран «Домой»`,
-'sdfe23506a3b0cdc8': `1) Открыть в Safari браузере`,
 'se740f75b95a51807': `Добавьте его в Dock, чтобы получить дополнительные возможности и удобство использования.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Этот веб-сайт имеет функционал приложения.`,

src/localization/locales/sr.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Додајте га на Home Screen за широке могућности и лак приступ.`,
+      's1488e73779d7682f': `1) Отворите мени вашег прегледача`,
+'s182ab2d6c997515f': `Додајте га на Home Screen за широке могућности и лак приступ.`,
 's1b9047d53d9f9d22': `2) Притисните Share у навигационој траци`,
+'s2d90afa5dcca2c0e': `3) Померите се надоле до "Add to Home Screen"`,
 's37a9e8aec5713460': `Више`,
-'s5c6aad7a7e4a1437': `3) Притисните Add to Home Screen`,
+'s4593f304dac8848c': `2) Додирните "Add to Home Screen"`,
+'s54cfbb14f46396d4': `1) Отворите у вашем главном прегледачу`,
 's6196153c4b0c1ea0': `Инсталирај`,
@@ -22,3 +25,2 @@ 'sa5ef80b4bb9b39f8': `Мање`,
 'sc79fd7641eb9a975': `Сакриј упутство`,
-'sdfe23506a3b0cdc8': `1) Отворите у Safari прегледачу`,
 'se740f75b95a51807': `Додајте га у вашу Dock за широке могућности и лак приступ.`,
@@ -25,0 +27,0 @@ 'sfea652f6580ff086': `Овај сајт има функционалност апликације.`,

src/localization/locales/sv.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Lägg till på hemskärmen för att få en bättre användarupplevelse och enklare åtkomst.`,
+      's1488e73779d7682f': `1) Öppna din webbläsares meny`,
+'s182ab2d6c997515f': `Lägg till på hemskärmen för att få en bättre användarupplevelse och enklare åtkomst.`,
 's1b9047d53d9f9d22': `2) Tryck på Dela-knappen i verktygsfältet`,
+'s2d90afa5dcca2c0e': `3) Scrolla ner till "Lägg till på hemskärmen"`,
 's37a9e8aec5713460': `Mer`,
-'s5c6aad7a7e4a1437': `3) Välj Lägg till på hemskärmen`,
+'s4593f304dac8848c': `2) Tryck på "Lägg till på hemskärmen"`,
+'s54cfbb14f46396d4': `1) Öppna i din huvudsakliga webbläsare`,
 's6196153c4b0c1ea0': `Installera`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Lägg till i Dock`,
 'scdaf4bbff76674c8': `Lägg till på hemskärmen`,
-'sdfe23506a3b0cdc8': `1) Öppna i Safari`,
 'se740f75b95a51807': `Lägg till i Dock för att få en bättre användarupplevelse och enklare åtkomst.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Denna webbsajt har app-funktionalitet.`,

src/localization/locales/tr.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Daha iyi bir deneyim ve kolay erişim için Ana Ekranınıza ekleyin.`,
+      's1488e73779d7682f': `1) Tarayıcı menünüzü açın`,
+'s182ab2d6c997515f': `Daha iyi bir deneyim ve kolay erişim için Ana Ekranınıza ekleyin.`,
 's1b9047d53d9f9d22': `2) Gezinme çubuğunda Paylaş'a basın`,
+'s2d90afa5dcca2c0e': `3) "Ana Ekrana Ekle" seçeneğine kadar aşağı kaydırın`,
 's37a9e8aec5713460': `Daha Fazla`,
-'s5c6aad7a7e4a1437': `3) Ana Ekrana Ekle'ye basın`,
+'s4593f304dac8848c': `2) "Ana Ekrana Ekle"ye dokunun`,
+'s54cfbb14f46396d4': `1) Ana tarayıcınızda açın`,
 's6196153c4b0c1ea0': `Yükle`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Dock’a Ekle`,
 'scdaf4bbff76674c8': `Ana Ekrana Ekle`,
-'sdfe23506a3b0cdc8': `1) Safari tarayıcısında açın`,
 'se740f75b95a51807': `Daha iyi bir deneyim ve kolay erişim için Dock’a ekleyin.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Bu site uygulama işlevselliğine sahiptir.`,

src/localization/locales/uk.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `Додайте на Домашній екран для зручного доступу та ширших можливостей.`,
+      's1488e73779d7682f': `1) Відкрити меню браузера`,
+'s182ab2d6c997515f': `Додайте на Домашній екран для зручного доступу та ширших можливостей.`,
 's1b9047d53d9f9d22': `2) Натиснути «Поділитися»`,
+'s2d90afa5dcca2c0e': `3) Прокрутіть вниз до «На Початковий экран»`,
 's37a9e8aec5713460': `Детальніше`,
-'s5c6aad7a7e4a1437': `3) Натиснути «На Початковий екран»`,
+'s4593f304dac8848c': `2) Натиснути «На Початковий экран»`,
+'s54cfbb14f46396d4': `1) Відкрити у вашому основному браузері`,
 's6196153c4b0c1ea0': `Встановити`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `Додати на Dock`,
 'scdaf4bbff76674c8': `На Початковий экран`,
-'sdfe23506a3b0cdc8': `1) Відкрити в Safari браузері`,
 'se740f75b95a51807': `Додайте на панель Dock для зручного доступу та ширших можливостей.`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `Цей сайт має функції додатку.`,

src/localization/locales/zh-CN.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `将其添加到主屏幕，以享受更丰富的体验并便于访问。`,
+      's1488e73779d7682f': `1) 打开浏览器菜单`,
+'s182ab2d6c997515f': `将其添加到主屏幕，以享受更丰富的体验并便于访问。`,
 's1b9047d53d9f9d22': `2) 点击导航栏中的“分享”按钮`,
+'s2d90afa5dcca2c0e': `3) 向下滚动至“添加到主屏幕”`,
 's37a9e8aec5713460': `更多`,
-'s5c6aad7a7e4a1437': `3) 点击“添加到主屏幕”`,
+'s4593f304dac8848c': `2) 轻触“添加到主屏幕”`,
+'s54cfbb14f46396d4': `1) 在您的主浏览器中打开`,
 's6196153c4b0c1ea0': `安装`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `添加到程序坞`,
 'scdaf4bbff76674c8': `添加到主屏幕`,
-'sdfe23506a3b0cdc8': `1) 在 Safari 浏览器中打开此页面`,
 'se740f75b95a51807': `将其添加到您的程序坞，以享受更全面的体验并便于访问。`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `此网站具备 App 功能特性。`,

src/localization/locales/zh-HK.ts

@@ -12,6 +12,9 @@
     export const templates = {
-      's182ab2d6c997515f': `將其加入主屏幕，以獲得更豐富的體驗和便捷訪問。`,
+      's1488e73779d7682f': `1) 打開您的瀏覽器菜單`,
+'s182ab2d6c997515f': `將其加入主屏幕，以獲得更豐富的體驗和便捷訪問。`,
 's1b9047d53d9f9d22': `2) 點擊列表上的分享按鈕`,
+'s2d90afa5dcca2c0e': `3) 向下滾動到「添加到主屏幕」`,
 's37a9e8aec5713460': `詳細資訊`,
-'s5c6aad7a7e4a1437': `3) 點擊加入主畫面`,
+'s4593f304dac8848c': `2) 點擊「添加到主屏幕」`,
+'s54cfbb14f46396d4': `1) 在您的主要瀏覽器中打開`,
 's6196153c4b0c1ea0': `安裝`,
@@ -24,3 +27,2 @@ 's922329d6f6213590': `添加到Dock欄`,
 'scdaf4bbff76674c8': `將App加入主畫面`,
-'sdfe23506a3b0cdc8': `1) 在Safari上瀏覽此網頁`,
 'se740f75b95a51807': `將其加入你的Dock欄，以獲得更豐富的體驗和便捷訪問。`,
@@ -27,0 +29,0 @@ 'sfea652f6580ff086': `此網站具有應用程式功能。`,

src/react-legacy/pwa-install.react-legacy.ts

@@ -0,0 +0,0 @@

src/templates/apple/template-apple.ts

@@ -39,3 +39,3 @@ import { html } from 'lit';
                             </div>
-                            <div class="step-text">${msg('1) Open in Safari browser')}</div>
+                            <div class="step-text">${msg('1) Open in your main browser')}</div>
                         </div>`: ''}
@@ -63,3 +63,3 @@ <div class="description-step">
                             </div>
-                            <div class="step-text">${isDesktop? msg('2) Press Add to Dock'): msg('3) Press Add to Home Screen')}</div>
+                            <div class="step-text">${isDesktop? msg('2) Press Add to Dock'): msg('3) Scroll down to "Add to Home Screen"')}</div>
                         </div>
@@ -66,0 +66,0 @@ </div>

src/templates/chrome/bottom-sheet/index.ts

 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 
+import stylesCommon from '../styles-common.scss'
+import styles from './styles-bottom-sheet.scss';
+
 // import TouchDragListener from "./touch-listener";
@@ -17,2 +20,6 @@
 export default class PWABottomSheetElement extends LitElement {
+	static get styles() {
+		return [stylesCommon, styles];
+	}
+
 	@property({type: Object}) props: IProps = {
@@ -25,5 +32,15 @@ name: '',
 	@property() hideDialog = () => {};
-	@property() disableClose = false;
+	@property({type: Boolean}) disableClose = false;
 
+	@property({type: Boolean}) fallback = false;
+	@property({type: Boolean}) howToRequested = false;
+	@property({type: Object}) toggleHowTo = {handleEvent: () => {}};
+
 	private _callInstall = () => {
+		if (this.fallback) {
+			this.toggleHowTo.handleEvent();
+			setTimeout(() => this.setupAppearence(true), 210);
+			
+			return;
+		}
 		this.install.handleEvent();
@@ -47,3 +64,4 @@ }
 		const bounceOffset = 35;
-		const bottomSize = touchTargetElement.clientHeight + infoElement.clientHeight;
+		
+		const bottomSize = infoElement.offsetHeight + infoElement.offsetTop;
 
@@ -60,2 +78,4 @@ const getYCoord = (e: MouseEvent | TouchEvent): number => {
 
+			e.preventDefault();
+
 			dragOffset = getYCoord(e) - touchTargetElement.getBoundingClientRect().top;
@@ -77,3 +97,3 @@
 				try {
-					Utils.eventGallery((this.getRootNode() as ShadowRoot).host);
+					!this.howToRequested && Utils.eventGallery((this.getRootNode() as ShadowRoot).host);
 				} catch (e) {}
@@ -148,3 +168,3 @@ return
 		touchTargetElement.addEventListener('mousedown', dragMouseDown);
-		touchTargetElement.addEventListener('touchstart', dragMouseDown, {passive: true});
+		touchTargetElement.addEventListener('touchstart', dragMouseDown, {passive: false});
 
@@ -159,3 +179,3 @@ closeDragElement(new MouseEvent('mouseup'), window.innerHeight - bottomSize - bounceOffset);
 
-	private setupAppearence = () => {
+	private setupAppearence = (fullOpen?: boolean) => {
 		if (this.bindedElement) {
@@ -165,7 +185,7 @@ this.bindedElement.touchElement.removeEventListener('mousedown', this.bindedElement.listener);
 		}
-
+		
 		this.bindedElement = this.dragMobileSheet(
-			this.parentElement?.parentElement,
-			this.parentElement?.getElementsByClassName('touch-header')[0] as HTMLElement,
-			this.parentElement?.getElementsByClassName('body-header')[0] as HTMLElement);
+			this.parentElement,
+			this.shadowRoot?.querySelector('.dialog-body .touch-header') as HTMLElement,
+			this.shadowRoot?.querySelector(`.dialog-body ${fullOpen? '.how-to-body': '.body-header'}`) as HTMLElement);
 	}
@@ -175,3 +195,3 @@ private _init = () => {
 
-		window.addEventListener('resize', this.setupAppearence);
+		window.addEventListener('resize', () => this.setupAppearence());
 
@@ -186,6 +206,2 @@ return;
 
-    createRenderRoot() {
-        return this;
-    }
-
 	connectedCallback() {
@@ -197,4 +213,4 @@ super.connectedCallback()
 	render() {
-        return html`${template(this.props.name, this.props.description, this.props.icon, this._callInstall)}`;
+        return html`${template(this.props.name, this.props.description, this.props.icon, this._callInstall, this.fallback, this.howToRequested)}`;
 	}
 }

src/templates/chrome/bottom-sheet/template-bottom-sheet.ts

 import { html } from 'lit';
 import { msg } from '@lit/localize';
+import { classMap } from 'lit/directives/class-map.js';
 
-const template = (name: string, description: string, icon: string, install: any) => {
+const fallbackClass = (isAndroidFallback: boolean = false, howToRequested: boolean = false) => {
+    return {fallback: isAndroidFallback, 'how-to': howToRequested};
+}
+
+const template = (name: string, description: string, icon: string, install: any, fallback?: boolean, howToRequested?: boolean) => {
     return html`
+    <div class="dialog-body ${classMap(fallbackClass(fallback, howToRequested))}">
         <div class="touch-header" id="touch-header"></div>
@@ -17,7 +23,26 @@ <div class="body-header">
             </div>
-            <button class="material-button primary install" @click='${install}'>${msg('Install')}</button>
+            <button class="material-button primary install" @click='${install}'>
+                <svg class="check-icon" height="24px" viewBox="0 -960 960 960" width="24px" fill=""><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
+                <span class="button-text">${msg('Install')}</span>
+            </button>
         </div>
+        <div class="how-to-body">
+            <div class="description-step">
+                <div class="svg-wrap">
+                    <svg height="24" viewBox="0 -960 960 960" width="24" fill=""><path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/></svg>
+                </div>
+                <div class="step-text">${msg('1) Open your browser menu')}</div>
+            </div>
+            <div class="description-step">
+                <div class="svg-wrap add-icon">
+                    <svg height="24" viewBox="0 -960 960 960" width="24"><path d="M320-40q-33 0-56.5-23.5T240-120v-160h80v40h400v-480H320v40h-80v-160q0-33 23.5-56.5T320-920h400q33 0 56.5 23.5T800-840v720q0 33-23.5 56.5T720-40H320Zm0-120v40h400v-40H320ZM176-280l-56-56 224-224H200v-80h280v280h-80v-144L176-280Zm144-520h400v-40H320v40Zm0 0v-40 40Zm0 640v40-40Z"/></svg>
+                </div>
+                <div class="step-text">${msg('2) Tap "Add to Home screen"')}</div>
+            </div>
+        </div>
         ${description ? html `<div class="description">${description}</div>`: ''}
+        <slot></slot>
+    </div>
     `;
 };
 export default template;

src/templates/chrome/template.ts

@@ -5,4 +5,5 @@ import { html } from 'lit';
 import { msg } from '@lit/localize';
+import { ManifestScreenshot } from '../../types/types';
 
-const template = (name: string, description: string, installDescription: string, disableDescription: boolean, disableScreenshots: boolean, disableClose: boolean, icon: string, manifest: WebAppManifest, installAvailable: any, hideDialog: any, install: any, toggleGallery: any, galleryRequested: boolean) => {
+const template = (name: string, description: string, installDescription: string, disableDescription: boolean, disableScreenshots: boolean, disableClose: boolean, icon: string, manifest: WebAppManifest, installAvailable: any, hideDialog: any, install: any, toggleGallery: any, galleryRequested: boolean, toggleHowTo: any, howToRequested: boolean, isAndroidFallback: boolean) => {
     const installDialogClasses = () => { return {available: installAvailable, gallery: galleryRequested }};
@@ -32,3 +33,3 @@ const screenshotsAvailable = !disableScreenshots && manifest.screenshots && manifest.screenshots.length;
                         : ''}
-                    ${screenshotsAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots}></pwa-gallery>`: ''}
+                    ${screenshotsAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots as ManifestScreenshot[]}></pwa-gallery>`: ''}
                     <div class="action-buttons">
@@ -41,7 +42,5 @@ ${screenshotsAvailable? html`<button class="material-button secondary" @click='${toggleGallery}'>${galleryRequested?msg('Less'):msg('More')}</button>`:''}
             <div class="install-dialog chrome mobile ${classMap(installDialogClasses())}">
-                <div class="dialog-body">
-                    <pwa-bottom-sheet .props=${{name, icon, description}} .disableClose=${disableClose} .install=${install} .hideDialog=${hideDialog}>
-                    </pwa-bottom-sheet>
-                    ${screenshotsAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots}></pwa-gallery>`: ''}
-                </div>
+                <pwa-bottom-sheet .props=${{name, icon, description}} .disableClose=${disableClose} .install=${install} .hideDialog=${hideDialog} .toggleHowTo=${toggleHowTo} .howToRequested=${howToRequested} .fallback=${isAndroidFallback}>
+                    ${screenshotsAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots as ManifestScreenshot[]}></pwa-gallery>`: ''}
+                </pwa-bottom-sheet>
             </div>
@@ -48,0 +47,0 @@ </div>`;

src/types/types.ts

@@ -11,2 +11,3 @@ import { ImageResource } from 'web-app-manifest';
     defferedPromptEvent: BeforeInstallPromptEvent | null;
+    BeforeInstallPromptEvent: BeforeInstallPromptEvent;
 }
@@ -13,0 +14,0 @@

src/utils.ts

 import { WebAppManifest } from 'web-app-manifest';
-import { IRelatedApp } from './types/types';
+import { IRelatedApp, Manifest } from './types/types';
 
@@ -41,2 +41,14 @@ const _eventDispatcher = (_element: Element, name: string, message: string) => {
 
+    static isAndroid(): boolean {
+        if (navigator.userAgent.toLowerCase().match(/android/))
+            return true;
+        return false;
+    }
+
+    static isAndroidFallback(): boolean {
+        if (this.isAndroid() && !('BeforeInstallPromptEvent' in window))
+            return true;
+        return false;
+    }
+
     static deviceFormFactor(): 'narrow' | 'wide' {
@@ -109,2 +121,27 @@ return window.matchMedia('(orientation: portrait)').matches? 'narrow' : 'wide';
     }
+
+    static async fetchAndProcessManifest(manifestUrl: string, icon: string, name: string, description: string): Promise<{_manifest: WebAppManifest, icon: string, name: string, description: string}> {
+        let _manifest: WebAppManifest = new Manifest();
+        let _json: WebAppManifest | null = null;
+        try{
+			const _response = await fetch(manifestUrl);
+			_json = await _response.json() as WebAppManifest;
+			if (!_response.ok || !_json || !Object.keys(_json))
+				throw new Error('Manifest not found');
+			this.normalizeManifestAssetUrls(_json, manifestUrl);
+        }  
+        catch(e) {}    
+
+        icon = icon || (_json?.icons?.length ? _json?.icons![0].src : _manifest.icons?.[0].src) || '';
+        name = name || (_json? _json['short_name']: _manifest['short_name']) || '';
+        description = description || _json?.description || _manifest.description || '';
+		_manifest = _json || _manifest;
+        
+        return {
+            _manifest,
+            icon,
+            name,
+            description
+        }
+    }
 }

tsconfig.json

@@ -0,0 +0,0 @@ {

webpack/serve.js

@@ -0,0 +0,0 @@ import express  from 'express';

webpack/service-worker-source.js

@@ -0,0 +0,0 @@ var cacheName = 'PWAinstallDemo-' + BUILD_TIMESTAMP;

webpack/webpack.common.js

@@ -0,0 +0,0 @@ import path, { resolve }  from 'path';

webpack/webpack.dev.js

@@ -0,0 +0,0 @@ import common from './webpack.common.js';

webpack/webpack.prod.js

@@ -0,0 +0,0 @@ import common from "./webpack.common.js";

webpack/webpack.prod.module.js

@@ -0,0 +0,0 @@ import prod from './webpack.prod.js';

webpack/webpack.prod.react.js

@@ -0,0 +0,0 @@ import prod from './webpack.prod.js';

webpack/webpack.prod.umd.js

@@ -0,0 +0,0 @@ import prod from './webpack.prod.js';

No alert changes

Improved metrics

Total package byte prevSize

1888066

increased by5.03%

Lines of code

4912

increased by5.29%

Number of lines in readme file

235

increased by3.98%

No dependency changes