Service Workers - Full introduction and new API
Exploring the Periodic Background Sync API and Service Worker introduction
Hi!
First of all, thanks to the people who responded to the questionnaire I sent out two weeks ago (2 people in total, you know who you are haha). I highly appreciate your feedback!
You were mostly interested in React and I have an article coming up on React again. The last two weeks, however, were all about Progressive Web Apps, starting with an introduction to Service Workers and exploring the relatively new periodic background sync API.
I’ll also follow another one of your suggestions and include a few resources and articles at the end of this email that I find useful.
If you have more feedback for me, feel free to reach out via email at felix.gerschau (at) gmail.com or on twitter.
Service Workers Explained - Introduction to the JavaScript API
This article is an introduction to the Service Worker API of JavaScript, walking you through the registration of a Service Worker that will serve some content from the cache.
Periodic Background Sync Explained
There are a few situations where the internet connection isn't optimal, but you still want to check your phone for news, social media, or other websites. If you want to have a good offline experience, there's usually no way around native mobile apps.
Periodic background syncs are a feature of service workers that brings native features to the web. Like the name already tells us, it allows websites to periodically fetch data in the background without any user interaction, so when users open the site again, they'll be able to read the latest news, even without having an internet connection.
In this article, I'll explain how this works and how you can easily add periodic background syncs to your web application as well.
Resources
Periodic Background Sync Example Project
For the last article, I tried out the periodicSync API. I published it on GitHub so that you can learn from a working example.
Maskable.app Editor
This tool lets you upload any PNG image and converts it into a maskable icon that you can use for your Progressive Web App. It lets you set the background color, adjust padding, and change the form factor.