Creating (near) native mobile web app (aka progressive web app) for iOS with Ionic 2

4
Share this on .. Tweet about this on TwitterShare on LinkedIn5Share on Facebook0Share on Google+0Email this to someoneShare on Tumblr0Buffer this page

It has been a long standing ambition of mine to create an app that I could run on my iPhone. This weekend I finally realized that ambition – in what turned out to be a surprisingly simple fashion. Using various tutorials, tips from colleagues and the Ionic 2 framework, I created a progressive web app (pure HTML 5) that I can add to the iOS launchpad as what to all intents and purposes feels like a native app.

Note: I have no experience with mobile app development – only with web application development with HTML5 and JavaScript [and some server side Node.js JavaScript experience]. With only that knowledge under my belt – it turned out quite simple to create the progressive web app using Ionic 2. Below, I describe the steps I went through, along with references to the resources that helped me get going. The article contains the following sections:

  • Prepare the development environment
  • Generate scaffold Ionic 2 application
  • Prepare app for stand alone usage
  • Deploy the web app [ to a web server]
  • Configure app on iPhone
  • [stand alone app on Chrome]

 

Prepare the development environment

These steps are generic preparation – across multiple Ionic applications. Note: I am working on Windows 7. The steps are the same or very similar on other operating systems (and versions)

Install NPM – the Node Package Manager

when you install Node.js, npm is installed as part of it – see https://docs.npmjs.com/getting-started/installing-node)

Install Ionic (incl v2)

On the command line, after installing npm,

npm install -g ionic@beta

Add Cordova

npm install -g cordova

 

Add platform browser

ionic platform add browser

     

    Generate a scaffold Ionic 2 application

    Ionic 2 makes it very easy to jumpstart a mobile [web]application. It can generate the project with scaffold files based on a selected template. This generated application can be run – without any changes.

    Create Ionic project

    based on a template, using ionic start projectname tutorial|tabs|maps|sidemenu|blank|complex-list –v2 –ts:

    ionic start steepr tabs --v2 --ts

     

    This directory structure is created:

    image

     

    Run project locally

      ionic serve

      The application opens in the default browser:

      SNAGHTML24904d

      Prepare app for stand-alone usage

      Web applications that are capable of being used in ‘stand alone’ mode can be identified as such – and characterized – using a manifest – based on the W3C specification for such manifests: see http://html5doctor.com/web-manifest-specification].

      A subdirectory /imgs is added with two icons in it – a white and a black edition of the Steepr thumbnail:

      image

      The manifest.json file is added in the same directory as index.html.

      image

      In this file, the name of the application is defined, the icon, the stand alone capability and the start_url. These properties can be used by the browser to present the app as stand alone

      image

      {
        "name": "Steepr",
        "short_name": "Steepr App",
        "scope": "./",
        "icons": [{
          "src": "imgs/SteeprLogoBlack.jpg",
          "sizes": "1280x1280"
        }],
        "background_color": "#bababa",
        "display": "standalone",
        "start_url": "./",
        "theme_color": "#303F9F"
      }
      

      Note: support for the Web App manifest is still growing. Safari seems not to use any elements in the file, Google Chrome seems most willing to interpret the file.

      A link to the file is added inside index.html. A link is added to one of the icons in index.html – this will produce the icon on the browser tab – formerly known as the fav icon.

      SNAGHTML2d8517

      Safari does not recognize the manifest.json file at all. In order to have Safari on iOS handle this web app as a stand alone app, we need to add two specific meta-tags to index.html:

      image

      <head>
        <meta charset="UTF-8">
        <title>Ionic 2 - Steepr V1.8</title>
        <meta name="theme-color" content="#303F9F">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <link rel="manifest" href="manifest.json">
        <link rel="icon" href="imgs/SteeprLogoBlack.jpg">
        <meta name="application-name" content="Steepr">
        <link ios-href="build/css/app.ios.css" rel="stylesheet">
        <link md-href="build/css/app.md.css" rel="stylesheet">
        <link wp-href="build/css/app.wp.css" rel="stylesheet">
      
      </head>
      

      The tag apple-mobile-web-app-capable is crucial: it means the difference between the app being started in the context of the Safari browser or as a stand alone native-app like experience. The tag apple-touch-icon-precomposed defines the icon that iOS will use as basis for the round icon on the launch pad. See this document for all Apple/Safari specific tags regarding (progressive) web apps: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html 

       

      Make some edits to the scaffold files

      Just to add a personal touch.

       

      Build Ionic application for platform browser

      ionic build browser

      The application is built for the browser platform. The result is found in the platforms\browser directory under the app root directory. The www folder contains the build result – in this case that folder is Steepr\platforms\browser\www.

      image

      The contents of this www directory can be deployed to a web server to be served to browsers -especially those running on an iPhone or iPad.

       

      Deploy the Progressive Web App

      Deploy application to web server – in my case the Oracle Application Container Cloud Service (a Node.js container). This simply means that the browser platform specific www directory is made available on a web server that devices can reach. Note however that the application should be served over https (and not plain http).

       

        On the iPhone

        Get out my iPhone. I open the web application in the browser:

        IMG_4355

        I click on the Share icon:

        IMG_4356

        Select option Add to Home Screen.

        The Add to Home dialog opens. Set the name of the link (icon) on the launchpad:

        IMG_4357

        The icon is added to the launchpad – and the web application can be opened just like any app by tapping on the icon:

        IMG_4358

        Once the app opens in this way – the browser UI elements are hidden and the app is presented full screen – just like a regular native app.

        IMG_4359

        Google Chrome App

        Google Chrome – also on desktop PC – has the concept of apps – see: https://developer.chrome.com/apps/about_apps. The web app developed in this article can be added as app to the local Chrome [desktop]App collection – and be launched as stand alone application, outside the browser context. These are the steps:

        Open the web application in the Chrome browser.

        SNAGHTML1ac13c

        Select the menu item More Tools | Add to Desktop

        image

        In the popup – the icon and application name defined in the manifest.json file are prepopulated.

        SNAGHTML22078f

        Now, the Steepr web app is added to the set of Chrome Apps.

        SNAGHTML230c40

        It can be opened by double clicking – and it will open as a standalone application, outside the Chrome context:

        SNAGHTML23d681

         

         

        Resources

        Introducing Progressive Web Apps: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

        Tutorial Getting Started with Ionic 2: http://ionicframework.com/docs/v2/getting-started/tutorial/ 

        Alternative tutorial for creating progressive web application with Ionic 2 [against GitHub API]– https://scotch.io/tutorials/build-a-mobile-app-with-angular-2-and-ionic-2 

        And a tutorial for your first Ionic 2 application [against IMDB movie database]– http://www.gajotres.net/ionic-2-tutorial-lets-create-our-first-application/

        Installable web apps (and manifest.json) https://dev.opera.com/articles/installable-web-apps/  and http://html5doctor.com/web-manifest-specification/#appname

        Udacity course on Progressive Web Apps: https://www.udacity.com/course/intro-to-progressive-web-apps–ud811

        Apple iOS Developer Library – Safari Web Content Guide

        – Configuring Web Applications (for app like experience on mobile devices): https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

        – Supported [Apple specific] meta-tags: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

        Google Chrome – custom Chrome Web App [through]Short Cuts – http://www.howtogeek.com/169220/how-to-create-custom-chrome-web-app-shortcuts-for-your-favorite-websites/

        Share this on .. Tweet about this on TwitterShare on LinkedIn5Share on Facebook0Share on Google+0Email this to someoneShare on Tumblr0Buffer this page

        About Author

        Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press books: Oracle SOA Suite 11g Handbook and Oracle SOA Suite 12c Handbook. Frequent presenter on community events and conferences such as JavaOne, Oracle Code and Oracle OpenWorld.

        4 Comments

        1. thanks for the great tutorial.it was helpful. when i try build/serve the meta tags apple-mobile-web-app-capable and icon are getting removed form index.html. do you have any idea?

        Leave a Reply