You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Testing your app on real phones and tablets helps you make sure it looks and behaves exactly as your users will experience it. Dreamflow offers two main ways to test:
12
12
13
13
1.**Live Preview on Your Mobile Device**
14
-
- Great for quickly trying out changes as you build in Dreamflow
15
-
- Instantly updates as you make edits
16
-
- Runs in your mobile browser, so it won’t test device-specific features like push notifications, camera access, location services, or in-app purchases
14
+
- Great for quickly trying out changes as you build in Dreamflow.
15
+
- Instantly updates as you make edits.
16
+
- Runs in your mobile browser, so it won’t test device-specific features like push notifications, camera access, location services, or in-app purchases.
17
17
18
18
2.**Download and Run the App on Your Device**
19
-
- Best for testing how your app behaves as a real iOS or Android app
20
-
- Lets you verify that features tied to the device’s operating system—such as notifications, camera, file storage, or app permissions—work properly
21
-
- Requires some setup; you’ll need to download, build, and install the app each time you want to test new changes
19
+
- Best for testing how your app behaves as a real iOS or Android app.
20
+
- Lets you verify that features tied to the device’s operating system—such as notifications, camera, file storage, or app permissions—work properly.
21
+
- Requires some setup; you’ll need to download, build, and install the app each time you want to test new changes.
22
22
23
23
:::info[Prerequisites]
24
24
Downloading the code is only available with a [**paid subscription**](https://dreamflow.app/pricing).
@@ -32,30 +32,30 @@ In Dreamflow you can use the device icon button in the bottom right corner of th
32
32
33
33
When you scan the QR code or open the preview link on your phone, here’s what to keep in mind:
34
34
35
-
-**For testing only** — The mobile preview is meant for testing your app as you build. It’s not intended for sharing with others or hosting your live app.
36
-
-**Real-time updates** — Any change you make in Dreamflow will instantly appear in the mobile preview, just like in the builder preview.
37
-
-**Persistent link** — The QR code and preview link stay the same for your project, so you can reuse them. However, the preview will only load when your project is open and running in Dreamflow.
38
-
-**Session limit** — You can have up to 5 preview sessions open at once. Each open browser tab or connected device counts as one session.
39
-
-**Preview controlled through Dreamflow Project** — You must have your project open and running Dreamflow to use the mobile preview. If you close your Dreamflow project, the preview will stop working until you reopen it. The preview controls like hot reload, hot restart and stop also control the preview on your mobile device.
40
-
-**Browser-based** — The preview runs in your mobile browser. It’s great for checking layout, user interactions and functionality but won’t test features that rely on the actual app installation (like push notifications, camera access, or offline storage).
35
+
-**For testing only**: The mobile preview is meant for testing your app as you build. It’s not intended for sharing with others or hosting your live app.
36
+
-**Real-time updates**: Any change you make in Dreamflow will instantly appear in the mobile preview, just like in the builder preview.
37
+
-**Persistent link**: The QR code and preview link stay the same for your project, so you can reuse them. However, the preview will only load when your project is open and running in Dreamflow.
38
+
-**Session limit**: You can have up to 5 preview sessions open at once. Each open browser tab or connected device counts as one session.
39
+
-**Preview controlled through Dreamflow Project**: You must have your project open and running Dreamflow to use the mobile preview. If you close your Dreamflow project, the preview will stop working until you reopen it. The preview controls like hot reload, hot restart and stop also control the preview on your mobile device.
40
+
-**Browser-based**: The preview runs in your mobile browser. It’s great for checking layout, user interactions and functionality but won’t test features that rely on the actual app installation (like push notifications, camera access, or offline storage).
41
41
42
-
:::warning
42
+
:::warning[reminder]
43
43
44
44
You must have your project open and running Dreamflow to use the mobile preview.
45
45
46
46
:::
47
47
48
-
### Installing the Preview as a PWA (Progressive Web App)
48
+
### Installing the Preview as a PWA
49
49
50
50
You can also install your app on your phone or tablet as a Progressive Web App (PWA). This lets you open it directly from your home screen—just like a regular mobile app.
51
51
52
52
#### Why install as a PWA?
53
53
54
54
Installing as a PWA is helpful when you want to:
55
55
56
-
-**Experience your app like a real mobile app** — It opens in full-screen mode without the browser interface (no address bar or tabs).
56
+
-**Experience your app like a real mobile app**: It opens in full-screen mode without the browser interface (no address bar or tabs).
57
57
58
-
-**Quickly access your app** — You can launch it with a single tap from your home screen. Note that your project will need to be open and running in Dreamflow for the PWA to load. The quick access still allows you to rapdily pull up the preview without needing to scan the QR code again.
58
+
-**Quickly access your app**: You can launch it with a single tap from your home screen. Note that your project will need to be open and running in Dreamflow for the PWA to load. The quick access still allows you to rapdily pull up the preview without needing to scan the QR code again.
59
59
60
60
61
61
:::note
@@ -64,7 +64,7 @@ A PWA still runs in your browser under the hood, so it won’t support native de
64
64
65
65
#### How to install PWA
66
66
67
-
##### On iOS
67
+
**On iOS**
68
68
69
69
1. Open the preview link or scan the QR code in **Safari**
70
70
2. Tap the Share icon (the square with an arrow).
@@ -76,7 +76,7 @@ A PWA still runs in your browser under the hood, so it won’t support native de
76
76
Other browsers on iOS (like Chrome or Edge) may work, but for the most reliable experience use Safari.
77
77
:::
78
78
79
-
##### On Android
79
+
**On Android**
80
80
81
81
1. Open the preview link or scan the QR code using your mobile browser.
82
82
2. When prompted, tap **Install App** or **Add to Home Screen**.
@@ -85,7 +85,7 @@ Other browsers on iOS (like Chrome or Edge) may work, but for the most reliable
85
85
5. The app will appear on your home screen and can be opened like any other app.
86
86
87
87
88
-
## Setup Instructions for Downloading & Running on Your Device
0 commit comments