Adding service workers to a site breaks videos in Safari and iOS devices

Image for post
Image for post
Photo by Thomas Russell on Unsplash

I was making a website where hero components have videos, and before adding gatsby-plugin-offline, everything was working fine. I did some browser testing and all browsers seemed fined, videos were fine. Then I decided that it’s time to add the service worker and to make the website installable and work offline. I added the plug-in and tested everything with Chrome and Android. Everything as it should be! But then I opened it with my iPad and saw that videos are not playing at all, not even loading.

That seemed odd as videos were implemented with the <video> HTML tag and…

Bring your site to the world

Image for post
Image for post
Gatsby page with English and Estonian content from WordPress

Gatsby is a great static-site generator to use today. Its ecosystem is really large, and you get a lot out of the box. Getting Lighthouse maximum scores is almost default with Gatsby. Anyone who is working with WordPress and wants to separate the CMS and the website itself should at least try to create something with Gatsby. It is really easy to use, and the documentation is very straightforward.

Gatsby is using GraphQL for getting data from local files or from external endpoints. If you want use it with WordPress for getting pages, posts, media, ACF fields, etc., you don’t…

When you have an idea for an app but you are not sure how valid it is, how to estimate it quickly and with low costs?

We had an idea for an app, but weren’t sure how to approach it. We had looked at competitors and wanted to do it differently and better. The idea wasn’t something very revolutionary so we needed to be sure our soon-to-be users and service providers actually need it.

We had heard about Google Design Sprint and thought we should give it a go: validate our idea and come out with a prototype to test on real users before starting to create the real app.

This article is about how we did it — I suppose it goes a bit differently…

Show an alert component when you have pushed a new service worker, allowing the user to update their page right away

Image for post
Image for post

Create React App (CRA) is great for developing progressive web apps (PWAs). It has offline/cache-first behaviour built in. It’s not enabled by default, but you can opt in. It uses service workers and has a lot of pitfalls you can read about from official docs.

This piece is going to show you how to trigger an alert (or toast or actually whatever component you want) when you have updated your service worker. Usually, this will be when your app has some new updates and you want the user to see them right away.

This piece assumes you have a new…

Gert Glükmann

Front-End Consultant @ RingIT

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store