Skip to content

Commit

Permalink
fix: doc misleading for google play package (#4779)
Browse files Browse the repository at this point in the history 
fixes a misleading statement that can be a problem to new users,
example: [thread
discord](https://discord.com/channels/930156205542883409/1265639864246996992/1265672310287892560)

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

- Documentation content changes


## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->
- The android docs are outdated compared to the builder forms page and
tooltips.


## Describe the new behavior?
- Docs synced with page/tooltips.  

![image](https://github.com/user-attachments/assets/918eb610-0dc4-4d2d-860a-92168dcdb514)


## PR Checklist

- [X] Test: run `npm run test` and ensure that all tests pass
- [X] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [ ] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.


## Additional Information
- Also added an additional note for monochrome icons which won't work as
themed icons because it's missing the support from bubblewrap here:
GoogleChromeLabs/bubblewrap#650
  • Loading branch information
@maiconcarraro
maiconcarraro authored Jul 29, 2024
1 parent 3b96824 commit 7565c9c
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 29 deletions.
3 changes: 1 addition & 2 deletions apps/pwabuilder/src/script/components/android-form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,8 +491,7 @@ export class AndroidForm extends AppPackageFormBase {
<div class="form-group">
${this.renderFormInput({
label: 'Monochrome icon URL',
tooltip: `Optional. The URL to a PNG image containing only white and black colors, enabling Android to fill the icon with user-specified color or
gradient depending on theme, color mode, or Android ontrast settings.`,
tooltip: `Optional. The URL to a PNG image used when displaying notifications, designers of monochrome icons could set all pixels to black and only use transparency to create a silhouette of their icon. *In the future it can work as Themed icon enabling Android to fill the icon with user-specified color or gradient depending on theme, color mode, or Android contrast settings.`,
tooltipLink: 'https://w3c.github.io/manifest/#monochrome-icons-and-solid-fills',
inputId: 'monochrome-icon-url-input',
spellcheck: false,
Expand Down
56 changes: 29 additions & 27 deletions docs/builder/android.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,33 +46,35 @@ There are a ton of options you can configure when packaging for Android. Here's

| Property | Description |
| :---------------|---------------------------------------------------------------------------------------------------------------- |
| **Package ID** | The Android identifier unique to your app |
| **App name** | The full name of your app. We pre-populate this with the app name from your PWA’s app manifest. |
| **Launcher name** | The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We pre-populate this with short_name from your PWA’s app manifest. |
| **App version** | This is the version string displayed to end users, e.g. "1.0.0.0" |
| **App version code** | This is an integer used as a private, internal version of your app. |
| **Host, Start URL, Manifest URL** | The URLs used to launch your PWA in the Android app. We pre-populate these for you from your app manifest. |
| **Theme color** | The theme color used for the Android status bar in your app. Typically, this should be set to your manifest's theme_color. |
| **Background color** | The background color to use for your app's splash screen. Typically this is set to your manifest's background_color. |
| **Nav color** | The color of the Android navigation bar in your app. |
| **Nav dark color** | The color of the Android navigation bar in your app when the Android device is in dark mode. |
| **Nav divider color** | The color of the Android navigation bar divider in your app. |
| **Nav divider dark color** | The color of the Android navigation bar divider in your app when the Android device is in dark mode. |
| **Icon URL** | The URL to a square PNG image to use for your app's icon. Can be absolute or relative to your manifest. Google recommends a 512x512 PNG without shadows. |
| **Maskable icon URL** | Optional. The URL to a PNG image with a minimum safe zone of trimmable padding, enabling rounded icons on certain Android versions. Google recommends a 512x512 PNG without shadows. |
| **Monochrome icon URL** | Optional. The URL to a PNG image containing only white and black colors, enabling Android to fill the icon with user-specified color or gradient depending on theme, color mode, or Android contrast settings. |
| **Manifest URL** | The absolute URL of your web manifest. |
| **Splash fade out duration (ms)** | How long the splash screen fade out animation should last in milliseconds. |
| **Fallback behavior** | When the full TWA experience isn’t available, how should your app proceed, whether with a web view or [Chrome’s Custom Tabs](https://developer.chrome.com/docs/android/custom-tabs/) feature. We default to the latter. |
| **Display mode** | `Standalone` means your PWA takes up all the area except Android status bar and Navigation bar and `Fullscreen` hides both bars, which is intended for immersive experiences likes games and media playback. |
| **Notifications** | If enabled, your PWA will use Android Notification Delegation for push notifications, meaning your installed PWA can send push notifications without browser permission prompts. You should enable this if your PWA sends push notifications. |
| **Notification delegation** | If enabled, your PWA can send push notifications without browser permission prompts. |
| **Location delegation** | If enabled, your PWA can access navigator.geolocation without browser permission prompts. |
| **Google Play billing** | If enabled, your PWA can sell in-app purchases and subscriptions via the Digital Goods API. |
| **Settings shortcut** | If enabled, users can long-press on your app tile and a Settings menu item will appear, letting users manage space for your app. |
| **ChromeOS only** | If enabled, your Android package will only run on ChromeOS devices. |
| **Include source code** | If enabled, your download will include the source code for your Android app. |
| **Signing key** | How the APK app package will be digitally signed: <br><br> `None`: your app package won’t be signed. Unsigned packages will be signed by the Google Play Store. This is Google’s recommendation, and our default. <br><br> `New`: PWABuilder will create a new signing key for you. The signing key will be included in your zip download. Choosing this will let you fill in details like password, alias, and more. <br><br> `Mine`: Upload an existing .keystore file to use for signing the app package. This should be used if you are updating an existing app in the Store. You’ll be prompted to specify your existing key passwords and alias. |
| **Package ID** | The ID of your app on Google Play. Google recommends a reverse-domain style string: com.domainname.appname. Letters, numbers, periods, hyphens, and underscores are allowed. |
| **App name** | The full name of your app as displayed to end users. We pre-populate this with the app name from your PWA’s app manifest. |
| **Short name** | The shorter version of your app name displayed on the Android home screen. Google recommends no more than 12 characters. We pre-populate this with short_name from your PWA’s app manifest. |
| **Include source code** | If enabled, your download will include the source code for your Android app. Recommended to experienced Android developers if you want to upgrade or modify dependencies and behaviors. |
| **Host** | The URL used to launch your PWA in the Android app. We pre-populate these for you from your app manifest. |
| **Start URL** | The start path for your PWA. Must be relative to the Host URL. If Host URL contains your PWA, you can use '/' to specify a default. We pre-populate these for you from your app manifest. |
| **App version** | The version of your app displayed to users. This is a string, typically in the form of '1.0.0.0'. Maps to android:versionName. |
| **App version code** | A positive integer used as an internal version number. This is not shown to users. This number is used by Google Play to determine whether one version is more recent than another, with higher numbers indicating more recent versions. Maps to android:versionCode. |
| **Theme color** | The theme color used for the Android status bar in your app. Typically, this should be set to your manifest's theme_color. |
| **Theme dark color** | The theme color used for the Android status bar in your app when the Android device is in dark mode. Typically this is set to your manifest's theme_color. |
| **Background color** | The background color to use for your app's splash screen. Typically this is set to your manifest's background_color. |
| **Nav color** | The color of the Android navigation bar in your app. Typically this is set to your manifest's theme_color. |
| **Nav dark color** | The color of the Android navigation bar in your app when the Android device is in dark mode. Typically this is set to your manifest's theme_color. |
| **Nav divider color** | The color of the Android navigation bar divider in your app. Typically this is set to your manifest's theme_color. |
| **Nav divider dark color** | The color of the Android navigation bar divider in your app when the Android device is in dark mode. Typically this is set to your manifest's theme_color. |
| **Icon URL** | The URL to a square PNG image to use for your app's icon. Can be absolute or relative to your manifest. Google recommends a 512x512 PNG without shadows. |
| **Maskable icon URL** | Optional. The URL to a PNG image with a minimum safe zone of trimmable padding, enabling rounded icons on certain Android versions. Google recommends a 512x512 PNG without shadows. |
| **Monochrome icon URL** | Optional. The URL to a PNG image used when displaying notifications, designers of monochrome icons could set all pixels to black and only use transparency to create a silhouette of their icon. *In the future it can work as Themed icon enabling Android to fill the icon with user-specified color or gradient depending on theme, color mode, or Android contrast settings. |
| **Manifest URL** | The absolute URL of your web manifest. |
| **Splash fade out duration (ms)** | How long the splash screen fade out animation should last in milliseconds. |
| **Settings shortcut** | If enabled, users can long-press on your app tile and a Settings menu item will appear, letting users manage space for your app. |
| **Display mode** | `Standalone` Recommended for most apps. The Android status bar and navigation bar will be shown while your app is running. <br><br> `Fullscreen` The Android status bar and navigation bar will be hidden while your app is running. Suitable for immersive experiences such as games or media apps. <br><br> `Fullscreen sticky` The Android status bar and navigation bar will be hidden while your app is running, and if the user swipes from the edge of the Android device, the system bars will be semi-transparent, and the touch gesture will be passed to your app. Recommended for drawing apps, and games that require lots of swiping. |
| **Notification delegation** | If enabled, your PWA can send push notifications without browser permission prompts. |
| **Location delegation** | If enabled, your PWA can access navigator.geolocation without browser permission prompts. |
| **Google Play billing** | If enabled, your PWA can sell in-app purchases and subscriptions via the Digital Goods API. |
| **Signing key** | How the APK app package will be digitally signed: <br><br> `New`: Recommended for new apps in Google Play. PWABuilder will generate a new signing key for you and sign your package with it. Your download will contain the new signing details. <br><br> `Mine`: Recommended for existing apps in Google Play. Use this option if you already have a signing key and you want to publish a new version of an existing app in Google Play. <br><br> `None`: PWABuilder will generate a raw, unsigned APK. Raw, unsigned APKs cannot be uploaded to the Google Play Store. |
| **ChromeOS only** | If enabled, your Android package will only run on ChromeOS devices. |
| **Meta Quest compatible** | If enabled, your Android package will be compatible with Meta Quest devices. |
| **Fallback behavior** | `Custom Tabs` When Trusted Web Activity (TWA) is unavailable, use Chrome Custom Tabs as a fallback to run your app. [Reference](https://developer.chrome.com/docs/android/custom-tabs/) <br><br> `Web View` When Trusted Web Activity (TWA) is unavailable, use a web view as a fallback to run your app. |

## Publish

Expand Down

0 comments on commit 7565c9c

Please sign in to comment.