Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38587 > unrolled thread

Set desktop PWA size

Back to article view | Back to comp.lang.javascript

Contents

  Set desktop PWA size Andrew Poulos <ap_prog@hotmail.com> - 2020-07-24 09:40 +1000
    Re: Set desktop PWA size "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-07-23 22:38 -0700
      Re: Set desktop PWA size Andrew Poulos <ap_prog@hotmail.com> - 2020-07-24 18:06 +1000

#38587 — Set desktop PWA size

I have a website that can be installed as a desktop PWA. While the app 
is responsive it looks "better" if the window is proportioned as 
landscape. So is there a way to set the window size when they app is 
launched without requiring user interaction?

I understand why user interaction is usually required but as a user 
chooses to install it as a PWA would it be more trusted?

Andrew Poulos

[toc] | [next] | [standalone]

#38591

On Thursday, July 23, 2020 at 6:40:53 PM UTC-5, Andrew Poulos wrote:
> I have a website that can be installed as a desktop PWA. While the app 
> is responsive it looks "better" if the window is proportioned as 
> landscape. So is there a way to set the window size when they app is 
> launched without requiring user interaction?
> 
> I understand why user interaction is usually required but as a user 
> chooses to install it as a PWA would it be more trusted?
> 

Yes. I did this for the app at my recent startup company. It looked something like this:

```
class Application {
  ...
  async load() {
    ...
    await this.installOrUpdateServiceWorker();
    ...
    let browserUtil = new BrowserUtil();

    if(browserUtil.isStandaloneMode()) {
      browserUtil.resizeWindow();
    }
  }
  ...
}
```

```
class BrowserUtil {
  ...
  /**
   * If installed to homescreen on desktop or tablet, resize the window to mobile size
   */
  resizeWindow() {
    const HAND_HELD_MAX_WIDTH = 414;
    const HAND_HELD_MAX_HEIGHT = 812;
    resizeTo(
      Math.min(screen.availWidth, HAND_HELD_MAX_WIDTH),
      Math.min(screen.availHeight, HAND_HELD_MAX_HEIGHT)
    );
  }
  isStandaloneMode(): boolean {
    return this.isIphone() ?
      ('standalone' in window.navigator) && (window.navigator as any).standalone :
      window.matchMedia('(display-mode: standalone)').matches;
  }
  /**
   * Determines if the current browser has the standard Add To HomeScreen support
   */
  supportsInstallPromptEvent(): boolean {
    return window.hasOwnProperty('onbeforeinstallprompt');
  }
  ...
}
```

In regards to trust: You have to have SSL to prompt install in the first place. The fact that the user chose to install it is a strong sign of trust from the user.

[toc] | [prev] | [next] | [standalone]

#38594

On 24/07/2020 3:38 pm, Michael Haufe (TNO) wrote:
> On Thursday, July 23, 2020 at 6:40:53 PM UTC-5, Andrew Poulos wrote:
>> I have a website that can be installed as a desktop PWA. While the app
>> is responsive it looks "better" if the window is proportioned as
>> landscape. So is there a way to set the window size when they app is
>> launched without requiring user interaction?
>>
>> I understand why user interaction is usually required but as a user
>> chooses to install it as a PWA would it be more trusted?
>>
> 
> Yes. I did this for the app at my recent startup company. It looked something like this:
> 
> ```
> class Application {
>    ...
>    async load() {
>      ...
>      await this.installOrUpdateServiceWorker();
>      ...
>      let browserUtil = new BrowserUtil();
> 
>      if(browserUtil.isStandaloneMode()) {
>        browserUtil.resizeWindow();
>      }
>    }
>    ...
> }
> ```
> 
> ```
> class BrowserUtil {
>    ...
>    /**
>     * If installed to homescreen on desktop or tablet, resize the window to mobile size
>     */
>    resizeWindow() {
>      const HAND_HELD_MAX_WIDTH = 414;
>      const HAND_HELD_MAX_HEIGHT = 812;
>      resizeTo(
>        Math.min(screen.availWidth, HAND_HELD_MAX_WIDTH),
>        Math.min(screen.availHeight, HAND_HELD_MAX_HEIGHT)
>      );
>    }
>    isStandaloneMode(): boolean {
>      return this.isIphone() ?
>        ('standalone' in window.navigator) && (window.navigator as any).standalone :
>        window.matchMedia('(display-mode: standalone)').matches;
>    }
>    /**
>     * Determines if the current browser has the standard Add To HomeScreen support
>     */
>    supportsInstallPromptEvent(): boolean {
>      return window.hasOwnProperty('onbeforeinstallprompt');
>    }
>    ...
> }
> ```
> 
> In regards to trust: You have to have SSL to prompt install in the first place. The fact that the user chose to install it is a strong sign of trust from the user.

Thanks. I've got it working...

Andrew Poulos

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web