Sunday, November 5, 2017

Website with App experience using Ionic

We may already be in the heydays of mobile Apps, but you will still run into companies that want an App-experience for their (internal) products. For the cases in which you don't need any native phone capabilities and don't want to add an App into the Google or Apple stores there recently has been added (by Google) a new development paradigm called: Progressive Web Apps (PWA). PWAs are web sites (that run on the internet) that behave like a real App on a mobile phone (in the chrome browser on Android phones).
The Progressive Web App
.. is installed as an App so it shows in the Apps section of Android
.. has a nice icon on your android homescreen
.. starts with a splash screen
.. runs full screen.
.. can be used offline.

This blog demonstrates how you can build (from a sample solution) and deploy such a PWA to Azure websites. 
This has already been documented in other places better than I can do it so I will link to those places for further investigation, but write the steps to perform the deployment here aswell.
You can see the end result here https://jwiersem-ionic-conferenceapp.azurewebsites.net . If you open that URL on an android phone, you will get a popup allowing you to install the App on your phone.

I will use the Ionic framework sample of their conference app, Visual studio 2017, an Azure account and a recent Android phone in order to build and deploy a working (sample) PWA.

First, as written on http://ionicframework.com/getting-started/ :
  1. Install NodeJS
  2. Open a Command window and install cordova and ionic with the command npm install -g cordova ionic
  3. In a directory of your choosing, create a new app with the command ionic start. This starts a menu that asks for a name for your project, fill it in and when you're asked which template to start from select the Conference app. This is a completely fleshed out and functioning ionic app.
  4. Change directory into the folder you created for the App and test the app by running the command ionic serve. Or connect your Android phone via USB cable and run ionic cordova run android. The latter will run your app on your phone with one command.
  5. Note the WWW folder of this app. All the necessary files are added here during building the project and the index.html can be opened in a browser and it will work as a desktop app.
  6. Now you have a working cordova app. But we wanted a PWA! What to do?
  7. In order to use your (well not your code, but you downloaded it fair and square!) code as a PWA, follow this article from Josh Morony.
  8. Do this:
    1. In index.html comment back in the script that loads servicework.js
    2. Also in index.html, remove the loading of the script cordova.js.
    3. Run the command: ionic cordova build --prod
    4. And you're done!
  9. But wait, didn't we need an Azure account for something? Yessir, we want to really test the PWA as a website in Azure. In order to deploy it easily and quickly we need to follow a few more steps.
  10. Open Visual Studio. Then click File -> Open --> Website. Select the WWW folder of your ionic app.
11. You need to do one more thing in order to get your PWA live. Right click your www folder and select Add -> Add new item. Select Web configuration file here. In the web.config file (you should be familiar with that btw!) add the following section inside <configuration>
<system.webServer> 
    <staticContent>
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
     <mimeMap fileExtension=".json" mimeType="application/json" />
     <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
     <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>
You need to add this to the webconfig, otherwise the required files for your PWA will not be served by the Azure website.
12. Right click www again and now click Publish Web App and deploy to an Azure App service.
13. Your PWA is live! Visit the httpS URL with chrome on your Android phone, and you will get a popup asking it you want to install it as an App.
14. You now have a website with the added advantages detailed in the beginning of this article.
Full screen PWA on your phone.


NB: Once you installed the PWA on your phone and the delete it from your homescreen, you won't soon get another popup on the website. But maybe you want to demo the process to someone else later... To get the popup back follow these steps on your phone:
1.       Open Android Chrome.
3.       Click Enable

4.       Click Relaunch Now

PWA Popup in Chrome on Android phone

17 comments:

  1. A very explanation of what a progressive web app is and how Google has come up with it to ease out the customers. Also, the step by step programming details has helped in a lot of in-depth understanding.

    ReplyDelete
  2. This is really helpful and informative, as this gave me more insight to create more

    ideas and solutions for my plan.keep update with your blog post.

    Website Design Company in Bangalore
    Website Development Company in Bangalore

    ReplyDelete
  3. Thanks for your great blog. But you can also find something new for ionic framework app development that is easily available and can learn very partly. It is cost-efficient and reduces the need for maintenance too.

    ReplyDelete
  4. Progressive web apps are web apps that use emerging web browser apis and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications. With progressive web app development, web developers can create reliably fast web pages and offline experiences.

    ReplyDelete
  5. Mobile APPs are hotter than ever before, with more than 80 percent of American adults owning a smartphone, and that figure is rapidly rising in many other countries. With so many people carrying around Internet-enabled devices that can download apps, it’s no surprise that the industry has boomed. The market is worth billions of dollars now, and that number is sure to rise in the future.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Once again you provide several doses of reality which explore the complete explanation of packing and moving companies in Bangalore . This article don't have to be that long. I simply couldn't leave your web site before suggesting that I actually loved the usual info on packing and movers services in Bangalore. I just want to know what is the best way to get real service.

    ReplyDelete
  8. I read your blog it's very nice and very helpful, I learn something new every time from this website, Thanks for sharing this information with us. I am also a blogger i guide people on App and Software Development. You can visit my blog here Best Progressive Web App Development Company

    ReplyDelete
  9. Thanks for sharing this informative article on how to build Progressive Web App using Ionic with practical examples and with useful screenshot. If you have any requirement to Hire Ionic App Developer for android and ios mobile app development. Please visit us.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Perhaps this is what I was looking for. Thank you! SEO agency dubai

    ReplyDelete
  12. This information is clearly expressing your point. I truly admire your perseverance and determination..Cisco Distributor Saudia Arabia

    ReplyDelete
  13. Creating a website with an app-like experience using Ionic is a smart approach to deliver a seamless and engaging user experience. Ionic, with its powerful framework, allows developers to build cross-platform applications that look and feel native. By incorporating Ionic, businesses can provide users with a consistent and intuitive interface across various devices. Partnering with a UI/UX design services company can further enhance this experience, ensuring that the design aligns with user expectations and best practices. A professional UI/UX design services companyunderstands how to optimize the UI and UX for Ionic-based applications, resulting in a visually appealing and user-friendly digital product.

    ReplyDelete