Progressive Web Apps with Ionic and Firebase

PWA, Progressive Web Apps, are a new way to offer incredible mobile app experiences that are highly optimized, reliable, and accessible completely on the web. PWAs are the web applications that are a hybrid between a traditional mobile website and a mobile application. These offer the experience and reliability of using a mobile app while not making the installation of an app required. PWAs are accessed just as one would access a normal website or web app. It is served over a URL, but once it is served, it makes the user feel as if they are using a mobile app in the browser.

Brands large and small are jumping on Progressive Web Apps to create better user experiences, anywhere the web runs. Here are some of our favorites.

The Google’s checklist of what makes a PWA mentions the following pre-requisites.

• The content should be served over HTTPS.
• The app should be completely responsive, so the user’s device’s hardware and screen size are the least of concerns.
• The app works offline. This provides that even if the user is not connected to the internet, some content should be served to the user.
• The app adds an icon to the user’s home screen. The service worker mechanism makes this possible. The user can add a shortcut to launch the PWA right from their home screen.
• The app should be blazingly fast, the load times should be minimized so it feels like a native app.
• Cross-browser compatibility is required so the app works on all browsers as intended.
• Transitions should feel snappy as you tap around, even on a slow network, a key to perceived performance.
• Each page in the application should be deep linkable, so URLs can take the user exactly where they want to go in the app.

Now that we know enough about PWAs, let’s have a look at one and then we will move on to building one for us.

Pick up your phone and open www.pinterest.com in the browser, preferably Chrome. You will see the app load up in just a few seconds. The interface feels as if it is an app instead of a website opened in the browser. This is because it is completely responsive and blazingly fast.

When you do log in, you will get the prompts as shown in the picture below.

The app prompts the user to allow to be sent push notifications. This is however not a requirement for PWAs but is recommended. The second prompt is a mandatory requirement for a web app to be a PWA. It prompts the user to allow the app to create an icon on the user’s home screen for easy accessibility.

Once you allow, the icon is added to the home screen and it launches the app once the user taps on it.

Another amazing example is app.starbucks.com. So yes, PWAs are very popular among the big brands.

So, this is how a PWAs differ from a regular web app. Now, let’s create one. In this article, we will be creating a PWA with Ionic and Firebase hosting. The Ionic framework is the most popular hybrid mobile app development framework and has gained tremendous growth in last few years. It is tightly integrated with Angular. It is intended to be used with Apache Cordova and lets developers build apps for Android, iOS, and Windows using just the web technologies like HTML, JS, and CSS.

Transforming an Ionic app into a PWA is very easy, but we will do it step by step. Well, there are just a few steps. First off make sure that you have installed NodeJS and NPM. Install Ionic with the following command in your terminal or command prompt.

npm install ionic –g

Do not forget the –g flag, Ionic should be installed globally. Once the command finishes, make sure that everything is okay by typing in,

ionic -v

This will give you the version of Ionic installed. Now, let’s create our first Ionic App. Type in,

ionic create PWAIonic

In the above command, replace “PWAIonic” with any name of your choice. This would be the name of your app. You will be prompted to choose a template. For a real app, you should choose the blank template but for this demo, let’s select conference as this will give us a ready-made app to work with.

Next, you will be prompted to answer if you want to integrate Cordova in your app. Since we are interested in building a PWA, we will select No and wait for the process to finish.

If you are prompted to link your app to Ionic Pro SDK, you can select No for now.

Once the app is created, a new folder with the name of your app is created. Change your current directory to the folder and open it on your favorite text editor. We are using Visual Studio Code but you are free to use the one that you like.

You can modify your app. The source code that you can work on lives inside the src folder.

For now, let’s run this and have a look at how the app looks like in the browser. To run the app, just open the terminal again, in the project directory, type,

ionic serve

This command will build your app and will start a local development server, and then launch your app in the browser. It will look like this.

Try resizing your browser and you will see that the app is completely responsive. Feel free to play around with it.

You can stop the server by pressing CTRL + C when you are done.

Now, we need to modify a few files to make this app ready to be built as a PWA. Back to the code editor. Open the file src/index.html and uncomment the code below.

Save the file. Well, now you are pretty much done. Technically, that’s all you needed to build a Progressive Web App with Ionic. Uncommenting the above code enabled the service worker that enabled your app to cached in the browser’s memory and thus can be loaded even if the device is offline.

Just one more optimization and then we will build this app. Go ahead and comment the script tag that refers to a cordova.js file in src/index.html. That is just useless.


Now, we are ready to build the app, but before we do that, let’s examine the src/manifest.json and service-worker.js files.

The manifest.json file contains the metadata about your PWA.

It contains the app name, url, name of the index file, icons, and colors. You can change these if you want to. For now, we will just leave it like that.

The service-worker.js is the file that does all the magic.

This is the default service worker setup that Ionic uses. This setup will pre-cache all of your static assets ensuring that your app loads reliably and fast under any network condition. If you ever want to register the user for Push Notifications, this is a place you will put the code for that in. For now, let’s just see how to make our first PWA with Ionic.

Open the terminal, and type in the command,

npm run ionic:build –prod

This command will build your Ionic App as a production-ready PWA. The CSS and JS are minified and uglified.

You can check the built PWA in the www folder in your app’s folder. The www folder’s contents can be deployed to any web server with HTTPS connection now. Let’s deploy this on Firebase Hosting.

To do that, make sure that you have firebase-tools installed and working. Use the commands mentioned here to deploy your app to firebase hosting.

Assuming that you have firebase-tools installed, type the following commands in order to deploy the www folder to firebase hosting. Make sure that you have created a new Firebase Project here. Make sure to log in with the same account in the next step.

firebase login

This command will open the browser to authenticate you as a firebase user. Log in to a Google Account. Once you log in, come back to the terminal.

firebase init hosting

This command will initialize a firebase project in your Ionic project’s directory. You will get a list of Firebase projects in your Firebase account, select the one that you created in the step above.

I created a project on Firebase called PWAIonic, so I will select that.

The next steps are very important.

For a public directory, type “www”.
For configuring as an SPA, “Yes”, and,
For overwriting index.html, “No”.

Once done, you are ready to execute the final step. Type,

firebase deploy

This command may take some time about a minute or two. It will deploy the contents of the “www” directory to firebase hosting and you will get a URL to share with everyone.

See, right there at the bottom, we get the Hosting URL. Let go and open that right-away on our phone in the browser.

Voila. We get the PWA launched on the phone. In just a few seconds, we also get the prompt to add the PWA to the home screen. Awesome. Here is the URL to the PWA we built:

https://pwaionic.firebaseapp.com

So, what are you waiting for? Build your first PWA with reference to this Ionic Progressive Web App with Firebase tutorial and get going. There is a lot to explore. Happy reading.