You are using a progressive web app

     Some time ago Google started talking about progressive web apps. The idea is simple: making regular web pages more reliable, fast and engaging, with the possibility of having them appear as an app in your homescreen. In fact, if you wonder around in this domain for long enough using chrome in an Android device, you may be asked if you want to add this page to your homescreen. If you accept this suspicious offer, you will have my face and name in your homescreen as an app with all of my content available offline.

     Okay, but you don’t want my page as an app in your phone, right? Of course not. But progressive web apps are not about just that. The concept encompass a range of new web APIs, patterns and benefits for developers and users. Whether it is PWA or something else, you can expect the future of web to be filled with technologies aiming to make the it better for the end user, which means more security, agility and reliability. So you probabily should give PWA a chance. It both works and feels great.

Benefits

     Although the app-like feature is not supported by all systems, the overall benefits of following PWA patterns are seen everywhere. Quoting Alex Russel, the main characteristics of progressive web apps are:

• Responsive: to fit any form factor
• Connectivity independent: Progressively-enhanced with Service Workers to let them work offline
• App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions
• Fresh: Transparently always up-to-date thanks to the Service Worker update process
• Safe: Served via TLS (a Service Worker requirement) to prevent snooping
• Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
• Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
• Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store
• Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.

     So… yeah. Pretty good, regardless of any app-like related functionality. And the best part is that making this work is already quite simple. I’ll go ahead and explain how I did it, integrating with my already existing personal page, which uses Jekyll on top of GitHub Pages.

Doing it

     My hole motivation for this came after reading this blog post by Alex Jover while browsing r/web_design and thinking that the future finally reached us. After reading about progressive web apps back in 2015 and thinking of not having to bother publishing real native apps for very simple projects, seeing this in action made me happy.

     It wouldn’t make much sense going trhough all the details with you here since Alex himself covered all the steps in his entry, so I will just add a few comments and sugest you to go through the starting guide to make sure you are making everything right.

     To kick things off, use lighthouse to gather insights on your page. Adding a manifest is easy enough. The same goes for all the metadata and requiring HTTPS, which you should be doing anyway. The thing which may require an extra thought is adding the pre-cache service worker. Fortunatelly, it is also easy.

     If you, same as me, is not using any framework to manage this part of the process, making sure your content is properly cached with a service worker is simple enough. By quickly installing sw-precache using npm and running it with your config file, you will generate a service-worker.js file, which you will register at the top level page of your domain. Running this with Jekyll doesn’t really make any difference - for reference, this is my config file. Just remember to update your service-worker.js file whenever content is added or updated.

Is this the future yet?

     The usability of my page improved greatly after all this. Now I have an “app”, which handles great on my phone, for minimal effort. The audits made on my page all show high scores. And I have no costs. Looking back, this does look like the future I pictured a few years ago. Now I am looking forward to use this knowledge in real projects. I can already see some wanna be apps that only require minimal changes to become great progressive web apps. Awesome.