Blog

Progressive web app notifications

When working on products or services it’s often necessary to create separate applications for desktop and mobile devices (Android, iOS, WindowsPhone). This implies you’ll need to hire a Java, Objective-C, C# and web developers, so project costs are increased significantly. This problem could be reduced with Progressive Web Apps.

What Progressive Web Apps (PWA) are is explained here. In this article, I will demonstrate an example application that uses some PWA features (caching, push notifications). We won’t talk about the specifics of the implementation (you can see the code). I want to show off some PWA functions and problems that came up during implementation and deployment that are not explicitly documented.

Progressive Pizza overview

The application is a mock-up of a pizza ordering service. It will have two parts: backend and frontend. We will use a PWA app shell for frontend and we will display some push notifications from the backend. The backend will store active app users data (email and service worker subscribtion data). The code for the backend is available here, and for frontend here.

To use push notifications, Google Firebase Account and Firebase authorization key are needed. An account can be created here.

Push notifications

The workings of push notifications are explained here, but there are some understatements in the official guide that we will clarify in this article.

Roll your own webserver with notifications logic
In Firebase Console there is no way to send messages to a web application. Firebase Console only allows to send notifications to Android and iOS apps. That means we have to implement our own server with a client registration mechanism and logic.

When a web application service worker in the browser starts up, it registers itself to our server with push notifications subscribtion data (id, keys etc.). There is no way to get all subscribed clients from Firebase API, so we have to keep and maintain active users and their subscribtions on our own. Firebase messaging is only a protocol for transporting messages from the server to all clients.

Payload encryption

Sending notifications without any data doesn’t require encryption. If we want to send some data FCM forces us to encrypt it – otherwise push notifications will be delivered but without any payload.

To do this we suggest the web-push NodeJS module. Under the hood it uses some elliptic curve cryptography and the Diffie-Hellman system.

Why does the payload have to be encrypted?

Because FCM is the middleman here. FCM should not be able to read any sensitive data. FCM is only one nofitication service. If the client uses, for example, Mozilla Firefox, they have their own notifications service.

HTTPS
The server should run over https. Service workers security assumptions require this. If it’s not running on https, you will get a message like this:

Progressive Web App https message
Desktop notifications

When the app start it will ask the user for permission for displaying notifications.


Desktop notifications work only if the browser is running. When the browser closes, all service workers are closed too. To receive push notifications the browser process has to be running.

Android notifications

Just like in the desktop version, the user has to allow for displaying notifications.

Progressive Pizza Mobile Permission
Unlike the desktop version, push messages are handled when the browser is closed and are displayed in Android’s notifications bar.

Progressive Pizza Mobile Notification

Let’s make friends with Spring and EmberJS – part 2

In this post we will implement second user story – creating new customers (with client side and server side validation). First part of this tutorial (project setup and show customer data) is available here.

Continue reading “Let’s make friends with Spring and EmberJS – part 2”

Let’s make friends with Spring and EmberJS – part 1

In this article I will create application with very simple functionality but with quite complex architecture. I want to try how to integrate two very common frameworks:

Firstly we will do simple CRUD (but only with “C” and “R”). And next w will add simple error handling and server-side validation (compatible with Ember Data management library).

Our app will have two user stories:

  • show customer data
  • create new customer

Am I right that this is very simple? We shall see. Continue reading “Let’s make friends with Spring and EmberJS – part 1”

How to increase conversion rate with AMP HTML

AMP HTML allows to significantly reduce bandwith and render web pages really fast on mobile devices. A page developed with AMP provides better user experience and drastically increases conversion rate.

The aim of the AMP Project is to build web pages for static content that render fast. We’ve created a simple static page which illustrates the advantages of using this technology. Our example contains two versions of a page which look identical. To ensure that both of them are responsive, we used Bootstrap v4.0.0-alpha.4 (It is the lastest version at the time of writing.)

The first one is built with html5. When you open it, your browser (whether you’re on a desktop or mobile device) makes 20 requests. All resources are requested at the same time – even if some of them are not visible (e.g. video and images at the bottom of the page). The browser downloads 3.3MB of data and finishes its job after approximately 1 second – which is entirely too long for a simple static page.

Browser permormance rendering html5 page version on desktop
Browser performance rendering the html5 page on desktop
Browser permormance rendering html5 page version on mobile
Browser performance rendering the html5 page on mobile

Let’s see how it looks for the second version of our page, the one built with AMP HTML. When you open it on desktop, your browser makes 9 requests and downloads 1.5MB of data. Its job is finished after 0.6 seconds.

Browser permormance rendering amp html page version on desktop
Browser performance rendering the amp html page on desktop

Only visible resources are downloaded. This means the content can be shown to the user extremely quickly, which makes for better experience. The remaining resources will be requested when the user scrolls down the page.

All the benefits of AMP HTML are visible on small screens of mobile devices (to emulate a mobile screen, we used Chrome DevTools). The browser with a small screen makes 8 requests at the beginning, downloads 930KB of data and finishes after 0.5 seconds. It is amazing, isn’t it?

Browser permormance rendering amp html page version on mobile
Browser performance rendering the amp html page on mobile

It is possible because valid AMP HTML introduces many optimizations for faster page rendering.

 

The source of our example can be found on github.

New standard for web development

maxresdefault

During Chrome Dev Summit 2015 Google shed some light on one of their newer projects: Progressive Web Apps. They stressed how the solution provides “low friction user experiences” and how most users don’t like installing too many apps on their devices. “Web is how users most frequently discover and interact with new services,” said Alex Russell, a software engineer involved in the development of Progressive Web Apps.

If you’re interested in learning more, you should definitely watch his speech. What struck me was his description of the usual path a user has to follow to experience a new app:

  • The user opens the store.
  • The user searches for and finds the appropriate app.
  • The user clicks install.
  • The user accepts the permission request.
  • The user waits as the app downloads and installs.

And only after all that the user can finally use the app! Progressive Web Apps make this journey much shorter and smoother.

During Progressive Web Apps Summit, developers working with or interested in the technology could exchange ideas and share enthusiasm. Once again the point was made about how we use the web differently on mobile devices. Alex Russell made another interesting observation during his keynote. “Remember that we started with native apps on desktop, too,” he said. Then we shifted to the cloud and online platforms for ease of access and convenience.

Does this mean that Progressive Web Apps are the future standard for web-based technologies? Continue reading “New standard for web development”

Custom editor template with unobtrusive validation in ASP.NET MVC5

There are many articles about creating custom editor templates in ASP.NET MVC, but no one describes how to make Microsoft jQuery Unobtrusive Validation work with the custom editor. So let’s do it!

We are using Bootstrap 3 Datepicker in a project we are currently working on. In order to keep the UI consistent, we wanted to use this component each time we place the editor of time and date on the page. Thus, we created a custom editor for a DateTime type.

I started from creating a simple editor template, which I placed in the Views/Shared/EditorTemplates/DateTime.cshtml path. When the @Html.EditorFor method is used, the framework checks the EditorTemplates path for a template file with a name matching the name of the type of the model property used as a parameter of this method. Then the template is used to render the editor code. In our case, the DateTime.cshtml template will be used for the properties of type DateTime and DateTime?. Here’s the code of the template:

@model DateTime?

<div class="input-group date">
    <input type="text" class="form-control" 
           value="@(Model.HasValue ? Model.ToShortDateString() : string.Empty)" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

Continue reading “Custom editor template with unobtrusive validation in ASP.NET MVC5”

Editing a file in a running Docker container

In general, a Docker container should contain everything that is needed to run any given piece of software, but nothing more. This means that there are as few components as possible installed in order to keep the container lean.

As a result, when you need to edit a file in a running container, you realize there is no text editor installed. What to do then? Just install your favorite one. How to do it?

The first step is to connect to the container.

docker exec -it [container name] bash

Then you need to install the editor using apt-get.

apt-get update
apt-get install favorite-editor

And now you can run your editor… Wait, you can’t do it! When you try to run the editor, the terminal displays an error:

Error opening terminal: unknown.

Unfortunately there is a bug in Docker, which does not allow you to do the above. There is, however, a simple workaround – set the environment variable $TERM in the container’s bash process in the following way:

export TERM=xterm

Now the editor should work fine.

Java – the Problem Child of the Programming World

Here are two Java hacks that you probably shouldn’t use – and one useful piece of knowledge for those desperate to learn something practical from this post.

ACCESS TO PRIVATE CLASS MEMBERS

Let’s be honest about Java. This is a hack that everybody knows, but no one speaks of in polite company. Still, it might be useful in case you need to modify a poorly designed library. Might.

Really. Keyword: might.

You can also use this to make one hell of an impression on a junior developer.

Access to private class members is of course immposible during compilation (commented line), but there is no problem with access to a private member of a class during runtime.

public class CallPrivateMethod {
    
    public static void main(String[] args) throws NoSuchMethodException, SecurityException, IllegalAccessException, IllegalArgumentException, InvocationTargetException {
        Hello hello = new Hello();
        //hello.sayHello(); // won't compile: Unresolved compilation problem: The method sayHello() from the type Hello is not visible
        Method method = hello.getClass().getDeclaredMethod("sayHello");
        method.setAccessible(true);
        method.invoke(hello, new Object[0]); // prints "Hello World!"
        method.setAccessible(false);
    }
}
class Hello {
    
    private void sayHello() {
        System.out.println("Hello World!");
    }
}

The output will be:

Hello World!

Continue reading “Java – the Problem Child of the Programming World”

AgileByExample 2015 – report & recommendations

Agile by Example

ABE-logotyp

On September 29-30, 2015 I participated in the AgileByExample 2015 conference in Warsaw. As its name suggests the event is intended to contain mostly practical examples of implementation of practices for enhancing agility. A year ago I’ve heard a lot of positive opinions about ABE 2014 and this year the organizers claimed that their goal is to adjust the level of presentation until it’s higher than ever before . That made the conference sound worth participating in.

So, I went. If you skipped this event – no problem: ABE organizers recently started publishing the videos from this conference at their youtube channel.

They are going to publish them all! Kudos to them. What I want to achieve with this post is to recommend the talks which I found the most valuable. Continue reading “AgileByExample 2015 – report & recommendations”

The Pros and Cons of Outsourcing in IT

Many businesses struggle with the task of efficient staffing. When you need a certain product or service long-term, your first instinct is to hire someone to do it for you. But is it always the best solution?

Outsourcing means buying a product or service from an outside supplier. It can be cheaper and more convenient than assigning the task to an internal team. Particularly in specialized fields, such as IT, the temptation to outsource is high. There are many good reasons to delegate certain processes to independent contractors, but it’s important to consider both the advantages and disadvantages of outsourcing before committing to the solution.

Continue reading “The Pros and Cons of Outsourcing in IT”