How I built a PWA with Angular and Firebase Part 1: Introduction

This post is part of a series in which I will describe how I built my first PWA. 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.

I’ve spent last month working on my new project. It’s called Friendtainer and it’s a smartphone app which helps you meet with your friends regularly. You can add contacts and decide how often you want to meet. If you fail to record a meeting within given timespan you will start receiving reminders until you record a meeting.

If you are interested in this topic, check out the JSPoland 2017 conference where Christian Heilmann will be giving a talk about Progressive Web Apps.

PWAs (Progressive Web Apps)

I decided to create the app as a Progressive Web Application (PWA). What is a PWA? It’s a new term coined by Google which basically means a web application which provides a native-like experience on mobile devices.

There are a few indicators of whether a web app is a PWA:

  • 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)

What are the advantages of a PWA over a native mobile app? Discoverability! You don’t need to put your app in the App Store or the Play Store. All your users need to do is to go to a specific URL. Besides, you can use your web skills and don’t need to learn platform-specific technologies such as Swift or the Android framework.

Modern web technologies at work

As you can see, there are quite a few requirements that the app should satisfy. Let’s take them one by one.

  • Looks like a native app on mobile devices – I know Angular best so I would like to use it to build the app. Ionic 2 is an excellent framework based on Angular 2 which provides a set of UI components that make your app look like a native app. The framework detects the device it’s running on and applies different styling depending on whether it’s the iOS or the Android operating system.

  • Loads fast and supports offline mode – this part is taken care of by Service Workers. Service Workers is a relatively new technology which allows you to run JavaScript in the background. What it means is that your web app can register a piece of JavaScript code that will keep running even if the user closes the browser! Service Workers can also intercept HTTP calls made by the app. Therefore, it’s possible to implement offline caching of all calls made by the app using them.
  • Can be launched from the phone’s home screen and Runs full-screen – another technology called The Web App Manifest is responsible exactly for this. It’s quite easy to achieve – all you need to do is write a JSON file which defines various properties of the app. Given a proper manifest, Chrome on Android will show a suggestion to the user to install the app on the home screen.

  • Push notifications – I wanted my app to send friend meeting reminders to the users so Push Notifications sounds great! Thanks to Service Workers and the Push API it’s possible for a web app to produce native-like notifications on Android phones. However, something has to send the notifications. I decided to use Firebase Cloud Messaging as a transport and Webtask for hosting the code that would actually invoke the notifications.

Architecture

I wanted to develop my app fast and not spend time on setting up infrastructure so I decided to go for serverless architecture with Firebase Database instead of a dedicated backend.

Firebase Database is a no-SQL, real-time database that web applications can directly connect to. It is tightly integrated with Firebase authentication and has a powerful validation rule engine. Therefore, it’s possible to avoid having a separate application server.

The app will consist of the following components:

  • The frontend written in Ionic 2 utilizing Service Workers for offline caching and receiving push notifications while the app is not in the foreground. It will also have a Web Manifest file to enable adding to the home screen.
  • The data will be stored in a Firebase Database. Validation rules will enforce that a user can only modify their own data. Firebase will also provide authentication.
  • A scheduled Webtask (function-as-a-service) will run daily, read data from the Firebase Database and send out push notifications and email reminders. Firebase also offers a similar functionality (it’s called Functions) but at the moment of writing they don’t support scheduled execution.

If you are not that familiar with Firebase or Webtasks, take a look at my previous post where I talk more about it.

Check out Part 2: Ionic 2 and app manifest

Method overload resolution in C# 6.0: an interesting bug story

Recently at work I’ve been looking into migrating our projects from VS2013 to VS2017. As part of the process we decided to move from C# 5.0 to C# 7.0. It turned out that after the switch some of our projects won’t build anymore. I spent some time investigating the issue and found the outcome interesting so let me share my story with you.

Problem

Below is the code that caused issues. It is an interface declaration with two overloads of a single  Get  method.

The code itself was fine. However, if we try to call it like this:

strange things will happen. Under VS2013 the code will compile without issues. However, under VS2017 it will cause a compile error:

Solution

Hmm, this totally makes sense. How is the compiler supposed to know which overload I mean? The solution is pretty simple – either don’t use method overloading here or provide a third overload that takes no parameter list.

I started to wonder which language feature introduced in C# 6.0 or C# 7.0 is responsible for this change of behaviour. After spending some time on fruitless thinking, I decided to ask a question on StackOverflow. Lasse in his elaborate answer enlightened me that this is not strictly a change introduced by one of the new language features but rather a stricter behaviour introduced by the Roslyn compiler which is shipped with Visual Studio starting from version 2015. I have later found this stated explicitly in Roslyn documentation.

Another problem

I decided to solve the issue by adding a third method overload taking only the id  parameter. In its implementation I picked one of the existing overloads randomly and called it with an empty parameter list:

How surprised I was to find out that some of our unit tests started to fail. After another couple of hours, I found the reason. It turned out that one of the overloads of the Get  method behaved differently with an empty parameter list (the first one would load all includes for an entity when given an empty list while the second one would load none).

Conclusion

This was the moment when I realized how dangerous the before-Roslyn behaviour was. Given a call that was in fact ambiguous, the compiler would choose one of the overloads in a way that is by no means clear or intuitive. If by any luck it chose the same overload that you meant (as it happened in our case) you were relying on subtle, non-documented implementation detail of the compiler .

The whole story thought me to be more careful when dealing with method overloading. The algorithm used for overload resolution is actually pretty complex and implements lots of rules (as exemplified here or in John’s Skeet C# in Depth book). Always make sure that it’s absolutely clear (both to you and the readers of your code) which method overload you mean.

 

 

JS Poland 2017 Conference: get free ticket and discount codes

I proudly announce that my blog is partnering up with JS Poland 2017!

JS Poland is a promising conference where you will learn about the current state of ES6, Angular, React, Redux, TypeScript and many more.

The conference features 15 great speakers such as Luca Mezzalira (Google Developer Expert, running the London JavaScript Community), Nir Kaufman (whose talk at NgPoland got me into Redux) and Gil Fink (a Microsoft Most Valuable Professional). There will also be 3 days of workshops.

JS Poland will take place June 19 in Warsaw. If you aren’t from Poland, it’s an exciting opportunity to visit my beautiful country! The conference is planned to host 800 guests from all over the world!

As part of my partnership with JS Poland, I’m delighted to offer you discount codes and one free ticket.

To get the 10% discount, register here and use the following code: codewithstyle. The code is valid until 2017-04-15 23:59.

Want to get the free ticket worth over 100 EUR? Share this post on Twitter and Facebook. The person with the highest count of likes under their share by the end of May will get a free ticket!

JS Poland is organized by my friend, Dariusz Kalbarczyk, who has already successfully organized NgPoland 2016 conference which gathered more than 700 hundreds developers from all over the world.

See you at JS Poland!