khmyznikov/pwa-install

Installation dialog for Progressive Web Application. Provides a more convenient user experience and fixes the lack of native dialogs in some browsers.

pwa-install's Issues

Change button color

What is the proper way to style the button color of the install prompt? It doesn't match the theme of my application right now.

Request to Add an Option to Suppress Pop-ups on Page Load in <pwa-install /> Component

We prioritize user experience when encouraging the installation of Progressive Web Applications (PWAs) on our website.

In scenarios where we prefer not to aggressively promote installation, pop-ups that appear every time a page is opened can potentially be perceived as intrusive by users.

Currently, we are utilizing the "pwa-install" component and wish to address this issue by requesting the addition of an option to suppress the installation prompt pop-ups upon page load.

Specifically, we would like the installation prompt pop-up to appear only when a user clicks on the install button.
If there is already an option available that offers this functionality, we would appreciate guidance on how to implement it.

Install option not working.

The installation buttons don't seem to work anymore. The "show" options popup, but when you click on the install button, nothing seems to happen.

Support Opera browser on Android devices

There are bugs that affect the Opera browser on Android devices. You can check the behavior on the demo project using Opera on an Android device:

1. The "Show" button won't display the prompt.
2. Using "Show (force)" will display the prompt.
3. Pressing the "Install" button doesn't show the browser install prompt.

The react polyfill demo linked in README is broken

While trying to add it to my project (see also #43), I found that importing /src/fallback/react seems to work.

Non-transparent background feature

It would be great if there was an option for the iOS modal to make the background non-transparent.
It's difficult to customize this yourself because of the shadow dom.

Great project so far!

Apple doesn't respect start_url

Consider using history.pushState({}, '', start_url) when user opens "How To For Apple".
This way PWA would be installed with the proper start_url on Apple devices.

Manual theme?

Is it possible to always use the white theme?

Wrong behavior in Yandex browser on Android

Set up pwa-install in html

<script type="module" src="https://cdn.jsdelivr.net/gh/khmyznikov/pwa-install@latest/dist/pwa-install.bundle.js"></script>
        
...

<pwa-install
    id="pwa-install"
    manifest-url="manifest.json"
    manual-apple="true"
    manual-chrome="true"
></pwa-install>

Do not setup installation in js.

The installation dialog appears immediately when the page loads and even though the application is already installed

OS: Android 6.0.1
Yandex browser: 22.11.7

If the description in manifest.json is unset or empty, there is no margin below the icon

I've encountered an issue where the margin below the icon appears to be 0, creating a visual inconsistency when the description field in the manifest.json file is either not set or is an empty string. Given that the description field is optional, I believe the display should still maintain a clean and consistent style even when this field is unset.

Please see the attached images for a clearer understanding of the issue. It seems that the absence or emptiness of the description directly impacts the layout in an unintended way, leading to a lack of spacing where it would normally be expected.

It would be appreciated if the styling could be adjusted to ensure that the display remains visually appealing and consistent, regardless of the description field's presence or content in the manifest.json.

Wrong url used for manifest icons and screenshots

Version 0.4.0 and newer don't work for me since they generate an incorrect URL for icons and screenshots specified in manifest.json. Version 0.3.9 works fine for me.

The problem is that an language code is added to the URLs that shouldn't be there.
Am I doing something wrong?

<3

<3

Add support mobile Firefox

Hello,
Please add support Firefox mobile👍

Thank you!

Path issue for Icons and Screenshots

I hope you could share some light on the following issue.

I am working on a web app that has multiple routes. The icons and screenshots are in the asset folder along the manifest.json

{
    "name": "My App",
    "short_name": "My App",
    "description": "Awesome PWA",
    "start_url": "/",
    "scope": "/",
    "icons": [
        {
            "src": "logo-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo-512x512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "screenshots": [
        {
         "src": "desktop_screenshot.png",
          "sizes": "1440x900",
          "type": "image/png",
          "form_factor": "wide",
          "label": "Desktop"
        },
        {
            "src": "mobile_screenshot.png",
             "sizes": "375x667",
             "type": "image/png",
             "form_factor": "narrow",
             "label": "Mobile"
           }
    ],
    "display": "standalone"
}

The pwa-install is in the layout, so it is being accessible from every route like so

	<pwa-install id="pwa-install" manifest-url="manifest.json"></pwa-install>

Now if I visit the root page / , the assets, meaning the icons and screenshots, are displayed properly. However, when I do navigate to any other route, the icons and screenshots are missing. Note that the native browser prompt displays correctly the assets regardless of the route. I have tried to change start_url to ./ without any luck. Any feedback will do. Thanks.

Attributes to Hide Screenshots

I would like to avoid loading screenshots on browsers to reduce load time without having to remove them from the manifest. Since the screenshots will be used in the App stores.

Install button isn't doing anything; not saving as app in Chrome on mobile

I have implemented this nice plugin for our website to add it as an web app. It works fine on iOS with the dialog and also on Android the dialog is shown. However the install functionality does not work at all on my Google Pixel phone on chrome, but the demo version is working perfectly fine.

I am not sure what I am doing wrong, since I followed all the instructions of the plugin and also added the manifest file like this:

{
 "name": "Clashflash",
 "description": "In the mood for a game? Play all our (flash) indie games in one web app for the most immersive experience!",
 "scope": "/",
 "display": "standalone",
 "icons": [
  {
   "src": "/icon/android-icon-192x192.png",
   "type": "image/png",
   "sizes": "192x192",
   "purpose": "maskable any"
  },
  {
   "src": "/icon/android-icon-512x512.png",
   "type": "image/png",
   "sizes": "512x512",
   "purpose": "maskable any"
  },
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
}

Our website with the plugin implemented is available online: clashflash.com

One more step for iOS instruction

In all (most?) cases, "Add to Home Screen" button is hidden under the bottom edge of the screen and Share Panel must be scrolled down to reveal that button.

Suggesting to add "Scroll Down" step between "Press Share in Navigation bar" and "Press Add to Home Screen".

1. Open in Safari browser (maybe hide this item if user is already in Safari? 🤔)
2. Press Share in Navigation bar
3. Scroll Down 👈
4. Press Add to Home Screen

Failed to execute 'define' on 'CustomElementRegistry' [BUG]

I have been getting this error lately

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "pwa-gallery" has already been used with this registry

I am not sure why is this happening, but only happens on production. I am not able to reproduce in localhost, I am guessing that is due to the web manifest.

[Question] Typescript Support for React Proxy

Do you have support for typescript that is available for the React Proxy you have provided?

Thanks!

How to use it with Nuxt 2

Hello,
I'm trying to add pwa-install into my nuxt 2 project.

// plugins/pwa-install.js
import Vue from 'vue'
import { PWAInstallElement } from '@khmyznikov/pwa-install';

Vue.component('PwaInstall', PWAInstallElement)

But getting following error (cutted it down):

ERROR in ./node_modules/@khmyznikov/pwa-install/dist/es/pwa-install.es.js 1:2583
Module parse failed: Unexpected token (1:2583)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import*as e from"lit";import*as t from"lit/decorators.js";import*as a from"lit/directives/class-map.js";var l={d:(e,t)

Thank you

How can use pwa-install on php script?

Can i use its on my web app awith manifest?

Popup positions on iOS and iPadOS

There are problems with the position of the popup on the boundary values.

IT translation

it.TXT
added translation for it

Norwegian localization

Norwegian gets default English. The localization must be 'nb-NO'

How import it for Angular ?

Hi, I'm trying to use your package without success in my angular project. Despite the import, the pwa-install component is not define.
Thanks a lot

Allow to disable screenshots by platform

The only forceStyle that work is 'chrome'.

'apple-mobile' and 'apple-desktop' must be possible to set. They now get what is set in forceStyle 'chrome.

Allow disable button to close the modal

One of the requirements from some clients is they want to allow access to their PWA only if the app is installed, if not, it should always ask for the installation.
Currently, there is no way to hide/disable the button to close the modal, so if users tap on the close icon, they will be able to continue using the app without installing it.
Having an option like disableClose with false as the default value, so it will be always available, but allowing users to change it to true will fix this simple use case.

Angular 18 compatibility?

For some reason, I don't think it works with Angular 18? It was working with 17.

(Maybe it's something I did...)

Share convert version to React/Nextjs

I wanna share my react/nextjs convert version .What should I do ?

Vue Support

I have been trying to install this in my Vue3 app, but I haven't been able to succeed.

The element does not provide the functions or variables needed when I load the app.

How to import this in Nuxt3

I defined a file in plugins folder.

import PwaInstall from '@khmyznikov/pwa-install';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(PwaInstall);
});

Use this component in my install page got this error.

[nuxt] [request error] [unhandled] [500] Cannot convert object to primitive value                                                                                                           10:41:03
  at ./@khmyznikov/pwa-install:4:1773  
  at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:312:5)  
  at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:156:14)  
  at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:204:14)  
  at async ./plugins/pwaInstall.js:3:31  
  at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:312:5)  
  at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:156:14)  
  at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:204:14)  
  at async ./virtual:nuxt:/Users/showerzen/wap/.nuxt/plugins/server.mjs:21:32  
  at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:312:5)