This post is part of a series in which I will describe how I built my first PWA, Friendtainer. It will touch on many topics such as Angular 2, Ionic 2, Firebase, service workers, push notifications, serverless architectures. I hope you find it useful when building your own PWAs. In this part of the series, we’ll look at how to create a PWA app using the Ionic 2 framework. Additionally, I will talk about the app manifest and how to use it to allow adding the app icon to the device’s home screen.
- Part 1: Explaining PWA and introduction
- Part 2: Ionic and app manifest
- Part 3: Push notifications with Firebase Cloud Messaging
As I mentioned in the previous post, there are a couple of requirements that a web app has to comply with in order to be called a PWA. In this post we’ll focus on the items in bold.
- Looks like a native app on mobile devices
- Loads fast and supports offline mode
- Can be launched from the phone’s home screen
- Runs full-screen
- May support push notifications (so the phone will display notifications even if the browser is not running)
Ionic is a web/mobile application framework based on Angular. It’s primary goal is to facilitate building hybrid mobile applications. Hybrid mobile apps are apps consisting of two parts - a native wrapper and a web app. The wrapper acts as a bridge between the web app and the device, providing an API to native functionalities. Although we are not going to build a hybrid app but a PWA, we can still benefit from Ionic. It contains a rich library of UI components which help us build a web app that looks like a native app. What’s more, Ionic detects the platform it’s running on and the components look different on iOS, Android and Windows Phone.
Friendtainer on Android
Friendtainer on iPhone
Ionic comes with it’s own command line tool which you can use to generate the project skeleton as well as particular pages.
In order to get started with Ionic you need to download it first:
npm install -g ionic
Now you can use the ionic command line tool. Run this command to generate the project skeleton:
ionic start myApp sidemenu
Now you can start adding Ionic pages like this:
ionic generate page Contacts
Ionic page is basically an Angular component with some added functionality. Every Ionic app has a root component called AppComponent which hosts the navigation and the current page. Pages form a stack where the topmost page is the one that’s currently visible to the user. It’s super-easy to create pages using the rich component library provided in Ionic. The documentation is great, providing live examples which demonstrate the look and feel on all supported platforms. Ionic make it very convenient to develop and test your app. Just run the following command to run it locally in development mode:
ionic build --prod browser
The build process can take some time. Once it’s done, you can find your package inside the platforms/browser directory. It’s just a bunch of static files so you can just drop it on a HTTP server. Or, use Firebase hosting as I did.
So far, Ionic helped us deal with providing native-like experience inside the app. How about some elements external to the app? Specifically, I mean home screen integration and the full-screen mode. The web app manifest specification allows us to control those aspects of the user experience. Manifest file is basically a JSON file containing some metadata about your application. We can use this file to specify the name of the app, the icon to be used on the home screen and whether it should run full screen or not. Once we provide all this information, some modern browsers (including Chrome) will display a prompt suggesting the user visiting your app to add an icon for it to the home screen.
Chrome home screen prompt
Ionic apps created using the CLI tool already include a manifest file so you just need to modify it. You can find it under the following path: src/manifest.json Below you can find the manifest file for Friendtainer. As you can see, it contains the app title, references to the icon image in several sizes and some info about colors.
Full-screen mode is achieved by setting the display option to standalone. Android phones will also provide a splash screen for your app based on the settings found in the manifest file. The splash screen is composed of the app title and the app image. Background and theme colors are also used when showing the splash screen.
Splashscreen based on the above manifest
The remaining two settings starting with the gcm prefix are related to Google Cloud Messaging. I will describe them in more detail once we discuss push notifications. To be continued…