#Respowser

Respowser is an Electron app written with Angular Material for single page application testing, using different smartphones and tablets real frames.

Using

Define new app

Start it and use the Open button to load an existing single page application by selecting its main index.html file. Configure your app's name and all device's info:

• Device: smartphone and/or tablet
• Orientation: portrait and/or landscape
• Operating system: Android and/or iOS

Now start using your application in Respowser exactly as you would on the mobile phones or tablet.

To change the device settings you can use the Settings button on the right side of toolbar.

Change and use devices

Respowser allows to use different devices to test your app, so you can view it inside the real device frame in an immersive and charming mode. The current version of Respowser includes the following smartphones and tablets:

• iPhone 6s
• iPhone 6s Plus
• iPhone 5s
• Nexus 5X
• iPad Air 2
• iPad Mini 4
• Nexus 9
• Galaxy Tab S2 9.7"

You can also rotate all device in portrait or landscape mode using the Rotate button; this button is available only if your app allow multiple orientations.

Develper Tools

Because Respowser was born to test single page application, it includes one of the best tool available for developers: a complete version of Chrome Developer Tools, available through the Developer Tools icon.

You have access to all original Chrome Developer Tools features, like:

• Inspect, add and remove HTML elements and change CSS style
• Read every console log and errors with colored sintax
• Watch source and use realtime debug experience, with breakpoints and so on
• View all network request infos, like url, headers, response, during time and even more
• Using Timeline and Profile to check app performance
• Direct access to Service Workers and Storage systems

If you dont want the user can open Chrome Developer Tools you just edit core/config.js configuration file and set canOpenDevTools to false.

Embedded app

You can also use Respowser with a single page application embedded into the build. To do that you can only follow these simple steps:

• Copy all single page application's source inside client/www directory
• Open core/config.js configuration file and set canOpenOtherApps to false
• Config you single page application using core/app.js:
  • name: the app name
  • url: the url of main index.html page
  • lastDevice.model: device model name (from client/devices/devices.list.json)
  • lastDevice.orientation: device default orientation [ORIENTATIONS.PORTRAIT, ORIENTATIONS.LANDSCAPE]
  • compatibility.orientations: all allowed orientations [ORIENTATIONS.PORTRAIT, ORIENTATIONS.LANDSCAPE]
  • compatibility.types: all allowed orientations [DEVICES.TYPES.SMARTPHONE, DEVICES.TYPES.TABLET]
  • compatibility.oss: all allowed orientations [DEVICES.OSS.IOS, DEVICES.OSS.ANDROID]

Develop and Build

Before you can develop and/or build Respowser, you must install and configure the following dependencies on your machine:

• Git: it gets all Respowser dependencies
• Node.js v6.x (LTS): depending on your system, you can install Node either from source or as a pre-packaged bundle.
• Gulp: to generate svg icons, compile Sass files, start electron and watcher to edits

Install npm dependencies

To install all dependencies and development dependencies use the following code:

npm install

Start development

To start development use the following code to start watchers, compilers and open Respowser in dev-mode:

gulp serve

Build

To build a Respowser app use the npm scripts available in package.json or create a new one using electron-packager syntax.