Search code examples
ionic2windows-10-mobile

How do I test Ionic 2 apps on a Windows 10 Mobile Phone?


I'm struggling to find meaningful documentation on testing for Windows 10 phone. I've added win 10 as platform and it creates a project folder, but it's not clear what to do from this point on. Has anyone worked through this process?


Solution

  • OK, so I worked through it for about 8 hours (I think a big part of the problem was expecting a single site would have all the information required (i.e. Ionic's docs), but in the end it needed info from Ionic, Cordova and Microsoft. Anyway, here are my notes:

    Debugging on windows mobile devices

    Ensure you've run 'ionic platform add windows'. Open the windows 10 project from the platforms/windows folder (you can open the solution, but if you do, ensure the win 10 project is set as default startup). Set cpu type to windows-ARM (for the Lumia 550).

    Config.xml

    Open config.xml (designer view) and add any API endpoints to the 'Domain Access' list in the 'Common' tab. You can find out more about the config.xml here: Cordova: Config.xml

    Under the 'windows' tab, make sure Windows 10 is the target version.

    Certificates

    Win phone aps require a locally-stored certificate to access resources over SSL.

    Download the cert from the server (do it via browser, click on padlock or similar and save as DER type - which has .cer extension for some reason). Save cert to project root e.g. 'api-certificate.cer'

    add the following to package.windows10..appxmanifest

    <Extensions>
        <!--Certificates Extension-->
        <Extension Category="windows.certificates">
            <Certificates>
                <Certificate StoreName="Root" Content="api-certificate.cer" />        
            </Certificates>
        </Extension>
    </Extensions>
    

    If required, additional certs could be added via this method (I guess).

    Ensure to include the .cer in the project, as it will need to be included in the built package.

    Binaries

    The debugging process might require a bunch of binaries that aren't copied into the package by default. For me, it wasn't copying SqlLite, which needs to be copied to the debug folder and any chip-architecture-specific dependency folders such as ARM. You'll get errrors which show which files are missing (I even had empty folders created for them).

    Build

    Build the app in VS (you can build with 'ionic build windows' but this has been failing for me since it tries to build the generated windows project without setting the cpu architecture first). Go to projectfolder > platforms > windows and open the cordovaapp.sln. Set the windows 10 project to be startup default and check that it's set to windows-ARM.

    Build solution.

    Package app

    MSDN: Packaging UWP Apps

    Make sure the win 10 project's appxmanifest file contains a content URI for the data API:

    https://api.example.com (Rule: include and WinRT: all)

    Copy the api-certificate.cer file into the platform > windows folder (or use the ./reload-platform windows powershell script).

    Go to project > store > create app package.
    Select 'No' for local package creation and follow wizard (prob. only need to choose the right architecture). The .cer file for API will be included in the package.

    The package will be created in the AppPackages folder with a [projectName].[verion] folder name.

    Deployment

    If it's running on a USB-attached device, then it's probably deployable to the app store.

    Here's a rough assemblage of useful resources:

    TACO-VS: Packaging Windows Apps MSDN: Side-loading or Developer Mode? Technet: Side-load apps in Windows 10

    Configure device to accept side-loaded apps

    MSDN: Enable Side-Loading

    To use developer features

    On your device that you want to enable, go to Settings. Choose Update & security, then choose For developers. Choose the level of access that you need - to develop UWP apps, choose Developer Mode, otherwise choose 'sideload apps'. Read the disclaimer for the setting you chose, then click Yes to accept the change.

    Optional: Deploy using winappdeploycmd.exe

    (MSDN: Using WinAppDeployCmd.exe for deploying UW apps](https://msdn.microsoft.com/windows/uwp/packaging/install-universal-windows-apps-with-the-winappdeploycmd-tool)

    Check available devices locally C:\"Program Files (x86)"\"Windows Kits"\10\bin\x86\winappdeploycmd devices

    Note: this process (winappdeploycmd) probably isn't much use, since we'll either give files to unmanaged-device customers or let them download it from app store, but it may be useful in lieu of visual studio.

    Copy .cer and .appxbundle to phone and install

    Connect the phone to PC via USB and copy two files from the newly-built folder on to the phone (e.g. the downloads folder):

    Example file names

    CordovaApp.Windows10_0.0.2.0_arm.cer CordovaApp.Windows10_0.0.2.0_arm.appxbundle

    Open File Explorer on the phone and click the .cer (certificate) first. Let it install.
    Installing the certificate allows a sideload-enabled system to install signed appxbundles containing the app. Next, click on the appxbundle file and let that install too (wait for 30 secs as it is still installing in background). NOTE: Do not try to open the app unless it has appeared in the 'recent items' list, otherwise you'll get some silent errors due to missing assets and the screen will go blank or just return to device home menu.

    Once it's appeared in the apps menu, you can load normally.

    Validation

    With a developer license, apps can be validated before submittal into the app store.

    MSDN: Validate Package

    MSDN: Using the Windows App Certification Kit