My first public talk: Looking back on an introduction to progressive web applications

15th of April, 2019

The initial idea to have a talk at Pi And More on Progressive Web Applications (PWA), was actually brought up to me by a fellow student, who himself held a talk on creating your own 3D-printer. Personally, I think it definitely was a good decision to follow up on this idea, as it’s not everyday that you get the opportunity to hold a talk on a technical topic at a small event like this. I was able to only see advantages, even as someone, who has struggled to present publicly in front of strangers.

Either I’m proud about me giving a great talk, or I’ve got the chance to improve my skills when it comes to preparing and presenting one. In the end it came down to something inbetween.

Looking at initial preparation I thankfully didn’t face much work, as I already was familiar with the topic and already held a presentation on it, as part of a lecture called “Technisches Englisch” at my university for applied science Hochschule Niederrhein. Looking back I could have improved the final talk in some areas, that’s also the reason why I’d like to look back on my talk and explain, as well as correct some of my statements.

Time limits

As with other events, we were required to stick to a fixed time limit with our talk at Pi And More. During the initial application for the presentation one could decide between a duration of 20 or 45 minutes. To me however, I felt like the optimal duration of a 30 minute talk was missing, forcing me to cut out some parts of my presentation.

At first I was planning to talk more in-depth about the manifest.webmanifest file, which holds metadata about the application. Furthermore it also signaled to the device that the website is a PWA, due to the time constraint I had to remove this part almost completely and I had to summarize it with only one sentence. As talking about everything one could achieve by editing the manifest, would simply take up far too much time.

Another area where the time constraints impacted my talk, was that I could only feature three properties, that showed the advantages of a PWA.

Live coding or code snippets

During the first presentation on PWA I could already pinpoint problems with my old presentation, which led me to coming up with ideas to fixing them. One idea was instead of showing code snippets and explaning them line for line it would be better to naturally develop them in front of the audience. However the realization hit me that, due to my stressed nature, I wouldn’t be able to produce the code live. Introducing HackerTyper, an incredible and helpful extension for my code editor, Visual Studio Code. The extension allows me to write code at home saving it, and presenting it elsewhere by pasting the exact key presses I did earlier key by key.

It is a perfect solution for my problem, however I didn’t anticipate that I failed to explain my code every now and then. Therefore I’d like to correct some statements:

Caching static files

After developing the code for the install-event in the service worker, I said that this would suffice to serve the files that had been added to a cache for offline usage. However, this is wrong, as the files would just be stored in a cache, but network requests would not be directed at said cache. To fix this, we would have to implement the first half of the fetch-event I showed afterwards. By doing this we first check if the requested file is in our cache and if not fetch the file or ressource from the network.

Caching dynamic content

Here you can also find a mistake from my side, as I said that the XMLHTTPRequest, which I used to request data from the REST API I was running, would not trigger the fetch-event. Well, as it is a network request, it obviously also triggers the fetch-event, which actually can be seen when we look at the second part of the implementation of said event. There we see, how we add the aforementioned request and it’s corresponding data into the cache. The code we added in our script file merely checked if we had the data stored in the cache, since we didn’t consider it during the fetch-event.

The Q&A

Even though I finally regained my composure during the Q&A, I still have to think back to the last question I was asked.

When I push an update to my website, in which way does the user receive this.

I didn’t think much about my response: We have static files, which are part of a cache and as soon as I change them on the server and the service worker invalidates the cache through either manual invalidation or through their time to live, the user would receive the newer version, which is how you would update a PWA. I however totally forgot, that there were people out there that had never worked with PWAs or websites themselves. Only after talking to the person who asked the question afterwards, lead me to understand that he was expecting some kind of update through the app store.

If I had the time to look at the differences between a native application and a PWA, which I couldn’t due to my time constraints. However this information was imprinted into my head, so I thought that the audience, would have been able to gather the information necessary from my sentence about PWAs being just a special kind of website.

Looking ahead

I’m definitely going to hold another talk at Pi And More or another event like it. It was definitly a valuable and important experience for me, which has enlightend me on what I could improve during future preparation and prresentation. But above all, next time I’m focused on checking if my screenshare outputs the right resolution, as this caused flickering and even stopped the screenshare temporarely.