Create a test that uses the dependencies and generates APKs.

Running init without generating a keystore can be done without a JDK or ADB installed, and brings down the barrier to using the generator. If you have Android Studio installed, just generating the folder is all you need.

• Run Lighthouse to collect information on the quality criteria
• Report the quality criteria information to the user
• If the PWA fails the quality criteria, fail the build step

More information on the Quality criteria here. Relevant bit:

App users expect a great experience on their device. To ensure the quality of experience TWAs must meet PWA installability criteria and load fast. Loading speed is measured using Lighthouse and web content in TWAs must achieve a performance score of 80.

It currently works on MacOS and Linux. Fix paths, etc to get the the CLI to work on Windows.

jimp, which is used to read the images doesn't support SVGs. Implement a solution that accepts SVGs and outputs PNGs.

Alternatives:

• Migrate to Sharp (https://www.npmjs.com/package/sharp), as it has SVG support. It does depend on native libraries though. We did move from Sharp to jimp in the past #16 to avoid native dependencies (also, takes longer to install the package). https://www.npmjs.com/package/@types/sharp can be used for Typescript types.
• Use https://www.npmjs.com/package/svg2img for SVGs only. Depends on canvas, which also has native library dependencies.

• Merge will read a Web Manifest
• For fields that exist in both manifests, ask the user if the want to use the value of the TWA Manifest, the Web Manifest or input a different value.

Currently the build command asks for passwords interactively which makes it tricky for build to be run as part of an automated script.

We should allow passing the passwords as part of the command line invocation.

• Depends on version 1.1.0 of android-browser-helper: GoogleChrome/android-browser-helper#58
• Add the following line to AndroidManifest.xml

<activity android:name="com.google.androidbrowserhelper.trusted.FocusActivity" />

It would be really nice if llama-pack generate shortcuts.xml file from web app manifest (https://w3c.github.io/manifest/#shortcuts-member).

help is currently no-op. Add a proper help.

Most errors inside the app are bubbling up and may not provide the clearest message of what's going wrong to users. Refactor errors, so the user gets clear, more helpful messages

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

Helps developers to generate a correct assetlinks.json file, with the correct Fingerprint and package name.

This does not have to mean anything. If so, close the issue without any problem.

This is one of the differences between a new project with Android Studio vs Llama Pack project:

Would it make sense to keep it that simpler way?
It is the first time I have done a project on Android, so I have no experience.

The Android support packages have been moved to the androidx. namespace (from android.support., in general). The old namespace has been deprecated and soon will no longer receive updates. Generating files using the AndroidX namespace will better future-proof the TWA apps.

I think is a bug, but the themeColor is used as backgroundColor.

Hi guys,

Judah from Microsoft here. We're investigating integration of llama-pack into PWABuilder.

I gave llama-pack a try on one of my personal PWA projects, and it throws an error during llama-pack init. Here's the command that throws the error:

npm run llama-pack init --manifest https://messianicradio.com/manifest.json

It throws this error:

Error Genearating TWA TypeError: Only absolute URLs are supported
    at getNodeRequestOptions (C:\Dev\llama-pack\node_modules\node-fetch\lib\index.js:1299:9)
    at C:\Dev\llama-pack\node_modules\node-fetch\lib\index.js:1404:19
    at new Promise (<anonymous>)
    at fetch (C:\Dev\llama-pack\node_modules\node-fetch\lib\index.js:1401:9)
    at Function.<anonymous> (C:\Dev\llama-pack\dist\lib\TwaManifest.js:212:50)
    at step (C:\Dev\llama-pack\dist\lib\TwaManifest.js:48:23)
    at Object.next (C:\Dev\llama-pack\dist\lib\TwaManifest.js:29:53)
    at C:\Dev\llama-pack\dist\lib\TwaManifest.js:23:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Dev\llama-pack\dist\lib\TwaManifest.js:19:12)

This is with Windows 10 Enterprise, JDK 8 from AdoptOpenJDK, and the latest Android command line tools.

• JDK
• Android command line tools

When a user starts a Trusted Web Activity (TWA) based application, a browser that supports TWAs may not be available on the device. In those situations, the default implementation will fallback to opening the URL in a Custom Tab or the default browser, if a browser that supports Custom Tabs is not found. This approach may be undesirable as it breaks the full-screen experience for users.

I would therefore suggest you to please add an option to the CLI that allow user to enable WebView Fallback with a single switch.

This could be based on
https://github.com/GoogleChrome/android-browser-helper/tree/5a0accde2341108fcc7eb7d0b0e0d7ce45a29962/demos/twa-webview-fallback

I have a PWA with maskable icon with transparent background.

After I pack it using llama-pack the resulting TWA icon displays with black background.

I expected the white background (as WebAPK) or transparent (as in Chrome on desktop).

Is it ok?

I've checked the all icons in all /app/src/main/res/ subfolders like drawable-xxxhdpi. All of them have the transparent background.

I'm not sure if the fact that my icon is maskable important or not.

I think that right now llama-pack only use the short_name to the Android project.

I want to propose to get both: name and short_name. And then...

• Use the name for the Android project, application name, etc.
  https://github.com/GoogleChromeLabs/llama-pack/blob/252a03347f6421e6b94239784ea4b740211a830a/template_project/app/src/main/AndroidManifest.xml#L28

• Use the short_name just for the homescreen.
  https://github.com/GoogleChromeLabs/llama-pack/blob/252a03347f6421e6b94239784ea4b740211a830a/template_project/app/src/main/AndroidManifest.xml#L41

Improve TwaManifest#validate to perform a more thorough validation and report details on issues found.

The debug command would correctly setup the device to debug the TWA and launch it.

• Create the debug configuration, as described here.
• Run ./gradlew installDebug
• We may also want to add a command (or an option) to clean the debug config, by wiping out /data/local/tmp/chrome-command-line on the device.
• Caveat: Developers still need to enable the relevant flag on chrome://flags

The generated splash screen is not very faithful to the original PWA splash screen.

Also, I see that the splash use the normal icon. I think it would be nice to use the maskable icon.

PWA splash	Llama Pack splash

It appears that there's a bunch of resources pulled in by the Android Support Library (things like themes and icons). This project already has Proguard enabled, so the next step is to find out why these resources are still being included (since as far as I can tell they're not used).

Original Issue: GoogleChromeLabs/svgomg-twa#69

Why the versionName is 2.0.0?

https://github.com/GoogleChromeLabs/llama-pack/blob/2137ae160ffa9c64dfbe97e04815185ed733a66d/template_project/app/build.gradle#L47

There are any way to manage it? Or should we edit it manually from there?

TWA has a problem that if the device is offline in the first run, TWA can't show any content. Also, it takes time to load the page in the first run on flaky network.

Looks like Web Bundles can fix this: TWA can open the web bundle file from the APK in the first run (the page in the bundle file installs a service worker).

Web Bundles can be created using wbn npm package.

prompt seems to be largely unmaintained, with the last comming being around 3 years ago and many open issues. TypeScript is also not supported (which will affect #76)

inquirer.js seems better maintained and has TypesScript types.

If you run the tool on a webapp that doesn't have an icon larger than 512x512, it won't work.

I don't think icons of that size are currently required for anything else, and I've found two major webapps that don't have such an icon (Pinterest and Instagram).

It would be good if we could either remove the need or let the user provide another image during llama-pack init instead of having to change their webapp manifest.

Is there a way to achieve light/dark (day/night) theming with TWA?

My TWA/PWA uses the prefers-color-scheme media query to adjust the CSS theming as requested by the OS/user. However the llama-pack and TWA samples I have seen accept only single color/colorPrimary and color/navigationColor which makes status bar and navigation bar ignore any OS light/dark theme.

sharp has native dependencies which can make it tricker to install llama-pack, while jimp has no native dependencies and more capabilities. It makes installation much easier.

The project was started using pure JavaScript. We're migrating the code to TypeScript, to make it more robust and easier to maintain.

Any new files added must use TypeScript.

• index.js
• lib/Config.js
• lib/GradleWrapper.js
• lib/Log.js
• lib/TwaGenerator.js
• lib/TwaManifest.js
• lib/util.js
• lib/androidSdk/AndroidSdkTools.js
• lib/androidSdk/AndroidSdkInstaller.js
• lib/jdk/JdkHelper.js
• lib/jdk/JdkInstaller.js
• lib/jdk/KeyTool.js
• cli/index.js
• cli/cmds/init.js
• cli/cmds/build.js
• cli/cmds/update.js
• cli/cmds/help.js
• spec/lib/ConfigSpec.js
• spec/lib/TwaManifestSpec.js
• spec/lib/utilSpec.js
• spec/lib/androidSdk/AndroidSdkToolsSpec.js
• spec/lib/jdk/JdkHelperSpec.js

It would be really nice if either below Firebase tools cloud be added to the CLI

Crashlytics
Performance
Analytics

or a documentation is provided that guides how to integrate these tools to TWA.

Describe the bug
the resulting TWA icon looks adaptive (if I change the mask shape in Android setting, it changes correctly too). But for some reason there is no parallax visual effect (see https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive for more info).

To Reproduce
Steps to reproduce the behavior:

1. Run llama-pack init on llama-pack init --manifest https://maskable-transparent-bg-bug.web.app/manifest.json
2. Run llama-pack build
3. Install the APK do an Android device

Expected behavior
The Icon should have parallax effect.

Additional context
The WebAPK icon is adaptive and has the parallax visual effect.
https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive for more info

llama-pack relies on user input in many places. Catching errors at the moment the user is inputing data will make it easier to recover from errors and generate better error messages

Currently, llama-pack uses a Web Manifest to extract data, asks the user to confirm the values and generates build.gradle and app/AndroidManifest from it.

This would introduce an intermediate configuration file, with a format similar to Web Manifest.

The configuration will be used when applying updates to the template project to an existing project, as described on #3.

Developers can also use it to tweak configurations for their project an re-generate the project from it.

@FluorescentHallucinogen FYI

I'm using llama-pack as a library in a Node.js project. When I call

twaGenerator.createTwaProject("d:/temp/llama", twaManifest);

I get lots of errors saying a file or directory doesn't exist, e.g.

(node:33288) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, mkdir 'd:\temp\llama\app\src\main\res\mipmap-mdpi'

The end result is the TWA project generation doesn't succeed; it's missing a bunch of files. Looking in the target directory, I see an /app folder with a build.gradle in it, but nothing else; there is no /app/src folder, nor any /gradle folder.

I can workaround this by manually creating these directories; at which point all the files get generated. But I'm wondering why the files aren't generated in the first place; the TwaGenerator code looks like it should be creating these directories.

My full test code:

router.get('/test', async function (req, res) {
  const rawManifestArgs = {
    packageId: "com.messianicradio",
    host: "https://messianicradio.com",
    name: "Chavah",
    themeColor: "#2f3d58",
    navigationColor: "#2f3d58",
    backgroundColor: "#2f3d58",
    startUrl: "/",
    iconUrl: "https://messianicradio.com/images/chavah512x512.png",
    maskableIconUrl: "https://messianicradio.com/images/chavah-maskable1000x1000.png",
    appVersion: '1.0.0',
    signingKey: {
      path: "C:/Users/judah/Documents/my-release-key.keystore",
      alias: 'alias_name',
    },
    useBrowserOnChromeOS: true,
    splashScreenFadeOutDuration: 300,
    enableNotifications: false,
    shortcuts: "[]",
  };
  const twaGenerator = new TwaGenerator();
  const twaManifest = new TwaManifest(rawManifestArgs);
  const targetDirectory = "d:\\temp\\llama";
  await twaGenerator.createTwaProject(targetDirectory, twaManifest);
});

When developers regenerate the application, either by changing a configuration on twa-manifest.json or by applying an updated template, versionCode and versionName need to be updated, for the application to be updated on the Play Store.

This is a continuation of the conversation started on this issue: #68 (comment)

Similar to shortcuts, generate XML entries for the Web Share Target API. These entries would probably be intent filters in the Android Manifest.

Command llama-pack init --manifest https://maskable-transparent-bg-bug.web.app/manifest.json produce "packageId": "app.web.maskable_transparent-bg-bug.twa", which is invalid. Should be "packageId": "app.web.maskable_transparent_bg_bug.twa".

When launching the app which has been compiled through llama-pack, only a white screen will appear and make the computer sluggish (it seems as it's trying to open a new tab multiple times).

How can I debug this further? Since it's a compiled app now, I cannot access the chrome dev tools.

• This will help debugging APKs
• Should also include which version of the tool was used and the template version

@JudahGabriel I think it's worth making this customisable, so tools like PWA Builder cant set themselves as the generator. WDYT?

Using the latest llama-pack instructions, I'm able to successfully execute the init command.

After completing the init command, I execute the build command and receive the following error:

PS C:\Dev\llama-pack> npx GoogleChromeLabs/llama-pack#0.1.0 build
(node:23244) ExperimentalWarning: The fs.promises API is experimental
Installing Android Build Tools. Please, read and accept the license agreement
Installing Build Tools
The system cannot find the path specified.
undefined

After the error, the tool exits.

When it says "system cannot find the path specified", it's not clear to me which path is being referred to, though I suspect it's the Android SDK path. When I first ran the init command, it prompted me for paths to JDK and Android SDK; my llama-pack-config.js looks like this:

'use strict';
module.exports = {
  jdkPath: 'C:/Program Files/AdoptOpenJDK/jdk-8.0.232.09-hotspot/', // Path to the JDK 8
  androidSdkPath: 'C:/AndroidTools/' // Path to the Android SDK
};

Any idea why I may be getting this path error? I'm on Windows 10 Enterprise using Powershell.

llama-pack update updates to latest version of the template project.

Dependencies:

• #11
• #74

Developers might have an existing key used for other apps.

A simpler solution would be to have an option to skip generating a key.

Hi, the tool works nice, thank you!

Is there any way to hide the navigation bar?

• Add a generated project to the test folder
• Create an end-to-end tests that generates a project to folder
• If files on both folders match, it passes the test

Promise rejection is not being handled correction in the call to Promise.all, leading to UnhandledPromiseRejectionWarning messages.

Change the cros_web_alternative flag to something not Chrome OS specific and include the web app manifest in the raw resources to allow installation when without a network request.

Chrome side bug: https://crbug.com/1026230