Skip to content

feat: add support for previewing on mobile #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 10, 2024
Merged

feat: add support for previewing on mobile #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eab2144
feat: add support for previewing on mobile
maliroteh-sf Jun 6, 2024
58ec51d
test: add test coverage for mobile scenarios
maliroteh-sf Jun 7, 2024
49f25bf
Update messages/lightning.preview.app.md
maliroteh-sf Jun 7, 2024
f0ceea1
Update messages/lightning.preview.app.md
maliroteh-sf Jun 7, 2024
58bbc4b
chore: minor cleanup
maliroteh-sf Jun 10, 2024
b89d700
chore: pr feedback
maliroteh-sf Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions messages/lightning.preview.app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,106 @@ For mobile virtual devices, specify the device ID to preview. If omitted, the fi

Unable to determine App Id for %s

# error.device.notfound

Unable to find device %s

# spinner.device.boot

Booting device %s

# spinner.cert.gen

Generating self-signed certificate

# spinner.extract.archive

Extracting archive

# spinner.download.preparing

Preparing to download

# spinner.downloading

Downloading

# certificate.attention

╔═══════════╗
║ ATTENTION ║
╚═══════════╝

# certificate.installation.description

If you have not done so already, please install the self-signed certificate on your device before proceeding. The certificate file is located at

`%s`

Follow the steps below to install the certificate:

%s

# certificate.installation.steps.ios

1. Drag and drop the file on to your booted simulator.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For both platforms, if it doesn't blow out the scope I wonder if we should consider more concise "inline" instructions, providing links to markdown pages on our repo that describe the installation instructions, complete with images? Maybe that could be a stretch goal for beta, or a GA consideration. I'm afraid anything less is likely going to result in confusion for our users.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to do something like that at first but on Android the steps for navigating through the Settings app is different from one API to another. So I wasn't sure how that would work out if we wanted to use markdown pages containing screenshots that would be different depending on the emulator API level.

But if we go with printing the instructions to console like I'm doing in this PR, at least then I can programmatically determine what is the API level for the user specified emulator and I can dynamically compose the steps.

But in general I think we should try to see if we can find a solution where the user would not need to install the cert manually (if at all possible)

2. Tap `Allow` to proceed with downloading the configuration file.
3. Tap `Close` and navigate to `Settings > General > VPN & Device Management > localhost`.
4. Tap `Install` in the title bar, in the warning window, and on the install button.
5. In the `Profile Installed` view, confirm that the profile shows as `Verified` and Tap `Done`.
6. Now navigate to `Settings > General > About > Certificate Trust Settings`.
7. Toggle full trust for `localhost` to enable full trust.
8. In the warning dialog, tap `Continue`.

# certificate.installation.steps.android

1. Drag and drop the file on to your booted emulator.
2. %s
3. Browse to the certificate file that you transferred from step 1 (usually under `/sdcard/download`).
4. Follow the on-screen instructions to install it.
5. Tap on `User credentials` under `Credential storage` and verify that your certificate is listed there.
6. Tap on `Trusted credentials` under `Credential storage`. Then tap on `USER` and verify that your certificate is listed there.

# certificate.installation.steps.android.nav-target-api-24-25

Navigate to `Settings > Security` and tap on `Install from SD card` under `Credential storage`.

# certificate.installation.steps.android.nav-target-api-26-27

Navigate to `Settings > Security & Location > Encryption & credentials` and tap on `Install from SD card` under `Credential storage`.

# certificate.installation.steps.android.nav-target-api-28

Navigate to `Settings > Security & Location > Advanced > Encryption & credentials` and tap on `Install from SD card` under `Credential storage`.

# certificate.installation.steps.android.nav-target-api-29

Navigate to `Settings > Security > Encryption & credentials` and tap on `Install from SD card` under `Credential storage`.

# certificate.installation.steps.android.nav-target-api-30-32

Navigate to `Settings > Security > Encryption & credentials` and tap on `Install a certificate` under `Credential storage`. Now tap on `CA certificate` and on `Install anyway`.

# certificate.installation.steps.android.nav-target-api-33

Navigate to `Settings > Security > More security settings > Encryption & credentials` and tap on `Install a certificate` under `Credential storage`. Now tap on `CA certificate` and on `Install anyway`.

# certificate.installation.steps.android.nav-target-api-34-up

Navigate to `Settings > Security & Privacy > More security & privacy > Encryption & credentials` and tap on `Install a certificate` under `Credential storage`. Now tap on `CA certificate` and on `Install anyway`.

# certificate.waiting

After installing the certificate, press any key to continue...

# mobileapp.notfound

%s is not installed on your device.

# mobileapp.download

%s is not installed on your device. Do you want to download and install it

# examples

- <%= config.bin %> <%= command.id %>
23 changes: 13 additions & 10 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,28 @@
"author": "Salesforce",
"bugs": "https://github.com/forcedotcom/cli/issues",
"dependencies": {
"@lwrjs/api": "0.13.0-alpha.19",
"@oclif/core": "^3.26.6",
"@salesforce/core": "^7.3.9",
"@salesforce/kit": "^3.1.2",
"@salesforce/lwc-dev-mobile-core": "4.0.0-alpha.1",
"@salesforce/sf-plugins-core": "^9.0.14",
"@salesforce/lwc-dev-mobile-core": "4.0.0-alpha.3",
"@salesforce/sf-plugins-core": "^9.1.1",
"@inquirer/select": "^2.3.5",
"tar": "^7.2.0",
"lwc": "6.6.4",
"chalk": "^5.3.0",
"lwc": "6.6.5",
"lwr": "0.13.0-alpha.19",
"@lwrjs/api": "0.13.0-alpha.19"
"node-fetch": "^3.3.2",
"tar": "^7.2.0"
},
"devDependencies": {
"@oclif/plugin-command-snapshot": "^5.1.9",
"@salesforce/cli-plugins-testkit": "^5.3.8",
"@oclif/plugin-command-snapshot": "^5.2.1",
"@salesforce/cli-plugins-testkit": "^5.3.9",
"@salesforce/dev-scripts": "^9.1.2",
"@salesforce/plugin-command-reference": "^3.0.88",
"@salesforce/plugin-command-reference": "^3.0.90",
"@types/node-fetch": "^2.6.11",
"@types/tar": "^6.1.13",
"eslint-plugin-sf-plugin": "^1.18.5",
"oclif": "^4.11.3",
"oclif": "^4.12.3",
"ts-node": "^10.9.2",
"typescript": "^5.4.5"
},
Expand Down Expand Up @@ -211,4 +214,4 @@
},
"exports": "./lib/index.js",
"type": "module"
}
}
Loading