Building My First PWA for a Conference

Within four months, my boss at the digital agency I work for organized the “MV.digital” conference. (Wow!) One week before the conference, she asked me while we were talking: “I would like to have an event app. Can we do that?”

I replied: “Hell yeah!”

Finally, an opportunity for myself to build a progressive web app. Even though I had about two days left to build it.

Background to the MV.digital Conference

So far there has been no relevant conference of the digital industry in our region (the northeast federal state of Germany). That’s what my boss wanted to change. Her wish was to bring entrepreneurs, managers, staff and interested people from the region to one table and show them how digitization could enrich their everyday lives. Why travel far away for a conference of this kind when there is a chance to initiate one locally? She did it.

At the first statewide digital conference on 10 May 2019, a total of twelve speakers from Germany and Austria — speaker legends such as Karl Kratz, Tom Alby and Sven Deutschländer joining the list — shared their knowledge and experience about digital business presences and online marketing with the guests. It was a blast!

The event took place in the historic building of the University of Greifswald. Next to the assembly hall as the main stage and first slot, another historical room was prepared for a second slot. There was plenty of food and drink in a third space. We even had 100% handmade ice cream from the local ice cream manufacturer Jackle & Heidi. Who doesn’t enjoy some delicious 🍨?

I have already been to several conferences, even larger ones with at least 1500 participants. The objective of the MV.digital conference is not to grow into these dimensions. On the contrary, it is a core value to keep the conference pleasantly small. Which is why it was lovely to receive feedback from guests and speakers on how warm-hearted the event was. I have the feeling that the small size and familiar atmosphere really created all the animated conversations. Everyone was easy to talk to. I was not able to make this experience at larger conferences.

The date for the second conference has already been fixed. But we won’t change the guest limit. It should remain as familiar as it was appreciated.

One Week Before the Conference

The preliminary planning of the conference took a lot of time. Since I was also involved the week before it took place, there wasn’t much time left to develop the event app. Actually, about two days before the final timetable had to be sent out in a newsletter to the speakers and guests.

Ironically, I have never built a progressive web app from scratch. I read tutorials or played around with code. But I never had the proper purpose to develop a PWA. I had it this time. Tools like the Vue CLI offer extensive features, including support for progressive web apps out-of-the-box and are easily extensible, I didn’t see a hurdle in creating a PWA under time pressure.

First time for everything, and I was thrilled to get started!

Are Two Days Enough for the Basics?

Well, I guess. The content that needed to be displayed by the app was already known: program, speakers, supporters, and hosts. Whilst the information still had to be converted into a data format.

The app didn’t have to have the best user experience, either. It was all about creating an app. Not the best out there, but the best I could do with the time I had left.

Monday, Day One: A Matter of Style and Framework

The first question I asked myself was how to layout the app. After I rejected the idea of writing my own styles due to lack of time, Google’s Material Design came to my mind. Even though I perceive the design of this visual language as rather cold and technical, I wanted to make an app in this style. As a welcome side effect, the app following this design architecture will feel even more native for Android users. (For my humble perch on 🔗 PWAs vs. native Apps, see below.)

I had no previous experience working with React or Preact, but wanted to give those frameworks a try. I tinkered with the Preact CLI for maybe an hour. A material template using material components exists for it, too. However, I quickly realized that JSX and the Preact ecosystem are not yet familiar enough for me to quickly produce an app with it. I adjourned learning Preact.

So I went back to the Vue CLI, on top of which I had no PWA built yet either, but at least I had experience with Vue.js. Setting up the project worked out swiftly. Subsequently, I installed Vuetify, the material component framework, which in my eyes is the best framework for Vue.js to accommodate the Material Design guidelines.

And oh boy. I’m always amazed at how convenient it is to get on board with the Vue CLI templates. What a wonderful foundation stone. Routes were set up quickly, and the assimilation of Vuetify into the project was also a delight.

Speaking of Vuetify, I was surprised how well its documentation is done. I was able to create the prototype within a day and reproduce everything I imagined with Vuetify’s components. The examples of documentation are very accessible and can be easily adapted and integrated.

During the development with Vuetify, however, it quickly became apparent how strong the framework was tailored to the components. Varying outside the intended purpose is difficult and only possible with styling that touches the substance. For example, I wanted the list element to not truncate its item’s lines. To enforce this idea, I had to rewrite each height of the element to auto and touch quite a lot of other properties as well.

Tuesday, Day Two: A Question of Data And Finishing Touches

On the second day, I realized that Nuxt would also have been an alternative to my Vue CLI setup, but switching would not have been an option time-wise and in itself, the Nuxt architecture wasn’t necessary for the project either. Another time then.

Most of the second day I spent mapping and embedding data like the schedule, biography of speakers, information about hosts etc. into JSON. Since I had to collect a wide range of information manually (including creating avatars of speakers and optimizing logos), no automation of this somewhat tedious but necessary process was possible.

With hot reloading of the website, every data change became immediately visible after updating one of the source’s data streams. It was the content that really brought the app to life!

It felt good how the app became more and more tangible with each data building block. Only when the components were filled with data and everything was adapted to each other, the app could actually be called an app and furthermore began to fulfil its core task to inform as an event app.

Of course, features like directions would have been nice, but that wasn’t essential and not possible in time anymore. I’ll save it for the next version.

What is striking during testing is the difference in how PWAs are handled between Android and iOS. While Android offers to add PWAs to the home screen directly, iOS does not offer any pop-up or indicator that the current website can be used standalone. So I utilized a small but effective modal script to target Safari specifically that guides the user on how to install the PWA.

Dear Apple, Safari has really gotten on the old side, and it’s a bit of a struggle to take care of the many drawbacks. Please be more up-to-date.

Wednesday: Cross-Device Testing & Launch

Even though the focus of Wednesday’s day planning was not on the app, it was crucial to have all content reviewed again by colleagues. And, of course, to carry out a few device tests. Everything went as anticipated, except the modal for Safari didn’t show up.

A few code fixes, content revisions and logo re-sizes later and the finished event app was ready to be deployed!

I didn’t integrate tracking into the app, so I couldn't capture usage data. Remind me the next year, will you?

In any case, we saved ourselves printing a time schedule and even if not all participants of the conference added the app to the home screen, a tab of the event app always remained open. I would classify that as a success. 😊

Progressive Web Apps vs. Native Apps

Allow me to digress.

The debate about whether PWAs are better than native apps has been going on for years. I strongly support the mindset that PWAs indeed are the future.

Building and maintaining a native App is expensive and time-consuming. But since progressive web apps have emerged, it usually doesn’t make sense anymore to create a native app. Who wants to develop an app for iOS and Android and uphold two completely different codebases?

With a PWA you have a working (SEO-friendly!) website included. If that alone isn’t a knockout argument for many.

For certain areas, native apps can never be replaced, but the average purpose of an app can be implemented very well with a PWA. The complex step of having to publish in stores can simply be bypassed. In addition: PWAs are not locked within any store. On the contrary, a PWA can be added to the home screen directly from any website. To me, this is the faster way for developers to deploy an app, for users to install an app and overall the more enjoyable user experience.

Tons of examples show how the creation of a PWA increased the conversion of companies. Starbucks as one of the most prominent examples.

For most requirements, and utilizing frameworks like Vue.js and React, constructing a PWA is easier than ever.

As Andy Bell put it in his article regarding the web vs. native app debate:

The whole idea of competing with native apps seems pretty daft to me, too. The web gives us so much for free that app developers could only dream of, like URLs and the ability to publish to the entire world for free, immediately.

[...] I believe in the web and will continue to believe that building Progressive Web Apps that embrace the web platform will be far superior to the non-inclusive walled garden that is native apps and their app stores. I just wish that others thought like that, too.

It’s all in the hands of us developers to make PWAs more beautiful, faster, and rich of smooth interactions and user experience!

Closing Words

Building a simple PWA in a few days is definitely no miracle with modern tools. It’s a relief how much work is done for you.

I’m delighted that the app has been used actively, and I’m sure I’ll invest a little more time next year to expand its functionality. 🎉

Let me wrap up this article with a few words from my boss, Dr. Katrin Zeidler:

“If you break down the knowledge, dose it easily and take out the pressure behind the topic of digitization, you can achieve much more.“

---

Artikel zu Ende. Entdeckte Tippfehler oder Gedanken zu diesem Artikel kannst du mir gerne schreiben. 🙆‍♂️