RWD Podcast #68 – One size fits all Service Worker

This week I go over Jeremy Keiths new one size fits all service worker and possible use cases for service workers on travel sites. We celebrate International Women's Day and look back on a year with CSS Grid.

Listen to episode 68

This week I go over Jeremy Keiths new one size fits all service worker and possible use cases for service workers on travel sites. We celebrate International Women’s Day and look back on a year with CSS Grid.

Transcript

The transcript below is computer generated using https://www.descript.com/. I’ve noticed a few issues as I’ve gone through to add in paragraphs, I’ll do another sweep on this page and remove this comment, but for now take the below with a grain of salt.

Hey everyone, and welcome to another edition of responsive design weekly podcast. My name is Justin Avery and I am your host and curator of the responsive design weekly podcast and the newsletter as well. Oh all over the shop tonight. Every time I do this I I test the microphone for loud. And uh, I keep it pretty quiet.

And then as soon as I start I peek out over the top so I apologized to everyone for your ears if it was too loud. Um, but we’re back again last week and he was two weeks ago. I did, uh episode number two, uh, 297 of the newsletter. I think it was episode 67 of the podcast. I was really Keen to keep it going.

Um, and then the following week I lost my voice. I got uh got the flu from the kids and after working from home on a day and telling them off Lots. I had barely any voice and I couldn’t do the podcast which was a real shame. And then this evening, I was supposed to have two podcasts on so this one and I’m also uh jumping on another podcast show called block thinking as well where I’m going to talk to, uh, one of the guys I met in Berlin for the Düsseldorf pallid for Berlin for the Beyond teller and Conference.

Um, so that should be really exciting but we got timings mixed up. So in the UK where an hour ahead of Europe, so when I was supposed to chat to them. There was an hour earlier. I thought it was now later. So we’re going to do that next week. But this week what have we got. We’ve got a few things which I’m covering, um this week in the newsletter.

It’s episode 299 in the newsletter, which I think is oh, I’m so excited. I’m so. Amazed that uh that episode 300s coming up. I never thought it would ever arrive or when I set out. I never thought it would I didn’t know what to expect. I was I was chuffed when it got 250 would have got to 100 when it got 200 250 seems to say 250 seems like ages ago.

It was it was almost a year ago. Um, and now it’s a 300 and it’s just it’s it’s unbelievable. It’s really cool. Well I’ve got. Cool things coming up for next week. So over the years. I’ve been in touch with whole bunch of different people who have run advertising on the site and sponsored it and helped out which has been super awesome.

So I’ve gone back to a few of them to see if they would be willing to donate some stuff for the special 330.

So I’ve got some so nice giveaways for the subscribers, which should be quite cool. Um, because after all they make up, Uh, they make up everything and I might do the same for um in a couple of additions time for the podcast as well.

If we can get this up to 100, then we can do some some cool giveaways as well fingers crossed. Let’s check out. This week in responsive land or front-end web land Jeremy Keith has been uh traveling a bit. Um, I love Jeremy he goes under the the name of addictive. Um for his sight. He does amazing stuff is always giving to the community.

He does amazing talks. He just has his finger on the pulse and he’s just this calming influence over the web. I think. Never loses his head over stuff. Then he gets into flame Wars about things even things he feels really strongly about he kind of tells it in a in a calm way, but this week has been running his written to really great articles, which I really liked which is around service workers.

And Progressive web apps. So I think Jeremy Falls more into the the the group of uh of folks who believe anything should be a progressive web app. If you’ve got a website why not just make a progressive by adding a service worker and making something available offline to people there is some other people who think website should just be websites and if you’re offline don’t.

Don’t just put an offline page up there because that’s not what people are used to and you should only build Progressive web apps if if it’s a web app itself. Um, I’m Jeremy, I think everyone could do with some offline stuff. Um, it just helps and it doesn’t take that much really, um, and what he’s done in a headline this week is.

Um with the help of a gentleman called Jake Archibald who works, um with Google his come up with like an MVP like a minimal viable product or a minimum minimum viable service worker. Now what this is is uh, a kind of one-size-fits-all service worker that could be applied to just about any side.

Now the issue with this is it’s like trying to apply a framework or trying to apply a Javascript file for a site um or SAS setup or grunt flow set up to a site each site is different. So each site requires slightly different things and it’s very difficult to have a vanilla thing that you can just put over the top of us.

And the same thing goes to service workers. It’s very difficult to have a vanilla service worker which can be applied to everything but he’s done a really great job and and the Crux of it. There’s there’s two kinds of requests. There’s requests for HTML. So kind of like your content and there’s request for files that.

Go along with the HTML. So things like CSS JavaScript, uh images svg’s PDFs whatever else your files are. Um, and the idea is that with this service worker applied to your site. If you make a request for a web page, it will look to the network first. So web pages it always tries to get a copy from the network.

If it can’t reach the network it will then look to the cash to see whether or not so the offline version to see whether or not that webpage exists there and then it will return that webpage. So. Network first then fall back to the cash. So you’re never going to be in a situation where you’re on the network and you will retrieve an older version of a page because it’s retrieving it from the serviceworker cache.

So that’s great on the flip side for the files. So for CSS and JavaScript and images it will look first to the cash and then if it can’t find it in the cache, it will go out to the network to find. Now the cool thing about both of them is when it goes to the network. So for the HTML version when it goes to the network to get the page, it will bring it back but it will also drop a version in cash.

As it’s requested it. So the next time you go and visit that page if you’re offline goes to the network to find it. It can’t find it. It falls back to the cash where the previous version of the page exists and you will be able to see it which is really cool. Now if you come online again, and that page has been updated then you go to access it’ll go to the network.

It will get the updated version for the network the most recent version and it will drop that into the cache and then it will also return you the page from the network. So again you go flying again and you get the updated version from the cache. So always keeps it fresh on the flip side. So the other other way of doing it when you request a CSS file or a Javascript file, it will go to the cash first to find it and then it will return it.

Um, and then if it goes out to the network to get it it will update the cache version so you may be in a situation. Where you request a HTML page you get the CSS back, but it’s the old version of the CSS. Well, because it’s returning that version of the CSS from the cache at the same time. It gets it from the network and updates the cash.

So the next time you refresh it, you will get the updated version. So that’s really cool. I really like that idea and it also means that as you browse a website. The HTML pages are continually added to your cash. So the next time you go back you’ll be able to see the versions like the pages that you visited before which generally is going to be what you want to do.

Uh, the other thing will help says he included in so there’s also a fullback as well. So if you go online and you can’t find it in the network and it’s not in the cache either there is an offline page just to tell you that the pages are flown as well. So it’s really really cool. All you need is two.

Goat, I say all you need it’s not that simple, um, depending on your experience, but if you go and visit, uh, Jeremy’s site, you’ll be subscribed to the newsletter. You can go and follow that link. If not, you should subscribe. Um, and then download download the service worker. So copy and paste either the JavaScript into service worker and then apply the code to your HTML file to your website and it will start to doing its stuff test it if there’s anything wrong with it get in touch with Jeremy shoot him a note and let him know the bugs that you’re experiencing try and solve them yourself. That’d be cool. And then let him know what you did to overcome that problem or he’s very helpful.

He’s just looking for uh use cases now, so if you can if find a time when it’s not working. He might be able to fix that for you. So so thank you very much Jeremy and uh Jake for creating that and setting that up and then the follow-up one is around like a really good use case. Uh is looking at the Trivago website, which is implemented service workers and says therefore like a progressive web app and it offers you an offline page when you’re when you’re not online, which is great.

It’s got some branding and I think there’s a little maze. I think there’s a maze game here saying. Um that appears on and I think that’s great the guardian did something similar where if you go to the guardian at least at this time all the time that I looked at it it was certain pages on the guardian because they hadn’t all gone over to https.

But if you want to certain pages, um, you would get the progressive web app, which would be an offline crossword. So you could still do a crossword even though you weren’t connected to the internet, which I thought was. That was really cool and his suggestion for Trivago or for for travel type sites is that if you’ve got itineraries we got something relating to you that you might want to be able to access when you’re in a foreign country or somewhere where you might not have access to lots of data or an internet connection at all.

Then why not cash that? So at least when you go there if you’re offline, you can lease the your itinerary and know what you’re going to do next. There are some also there’s an interesting tweet that I saw this week as well from. Uh, Nicole, uh from I can’t remember. I think she’s a writer um, and it was I’m going to find out what where she writes because that’s that’s an awful awful approach or just.

To some quick link. Um, she is at BuzzFeed news. Um, and it was a chart from Netflix about the usage patterns and it showed. How many people signed up on the different devices so mobile tablet desktop and uh television and then their usage pattern after that. So it’s it’s really interesting how and probably quite obvious if you think about it for Netflix’s lots of people sign up.

So if they had 40% of people sign up on their computer 30% on their mobile phone and 5%. On tablet, but a quarter of people sign up on the televisions, but after a month of viewing this kind of like 50% of people are using their TV for watching and all of the other ones start dropping. So most of the people that use their mobile phone for signing up, um of the 30% that use it only 10% end up using it to watch.

For the laptop 40% of people who signed up for any 15% continue to watch it on their laptop and TVs end up going up to 70% of the usage pattern. I just thought it was really interesting because we always look at people are doing things on mobile. More and Mobile’s future and everyone’s going to be using mobiles and tablets and we have to optimize for that which is absolutely true, but it’s a responsive world and there’s more than just mobiles and tablets.

There are televisions that swatches. That is fridges. There’s Billboards people will engage in your content where they see fit and where they sign up may not always be where they will continue to engage with that content. So it’s always important to continue to track and follow and and see how your users are consuming content and make sure that it looks its best in those areas as well.

Um, Brendan doors also has a really great article this week all about packing your stuff up. Um, I’ve been uh, trying to get my backups and and data sorted for a while as as the kids get older taking far more photos. Um, And if my laptop crashed and I didn’t have a backup you can lose like years of their lives because no one print stuff anymore.

We don’t take pictures on film anymore. Um, Also, I’ve got a ton of work on my laptop that I do, uh, The Notebook stuff that I do. I’ve got websites that I’ve been building. Um, I’ve got old proposals of a current proposals. I’ve got my day job stuff. That’s it on sits on there as well as well as all the photos and family stuff.

And if the hard drive just crashed that that’s a lot of information just to lose. It’s like losing part of your life. Um, so he goes through all of his different backup strategies uses drobo. He uses some Dropbox, um time machine. There’s a whole bunch of different ones. So really good article if you want to get into that and just make sure that you’re covered.

Backing up stuff. It’s a costly exercise as well. Don’t don’t expect that you’re going to be able to back all your stuff up for free and be free forever. It’s just it’s just not going to happen. But what it will do is it will save you the money that you will have to pay to get a technician to unpick your hard drive and get the data off it and the hassle as well and just the dread of losing everything and having to do stuff from scratch again.

It’s just horrific. Um another one, uh, which sort of brings us to today. It’s um, or it will be Yesterday by the time you’re listening to this. Uh, but on Thursday the 8th, it was International women’s day. So a big thank you to all of the international women or for all the women around the world for doing all the wonderful things that you do.

Um, In a suppose web development ways or in this in this industry that the next article comes from someone who who I think is probably contributed the most to this area in the past 12 months. So there’s a couple couple of people who have um, it’s just it’s Rachel Andrews. She’s written an article about.

CSS grid one year on um, it was a year ago. Now that CSS grid shipped in Firefox and then all the other browsers followed suit and I think it’s fantastic that the the web has moved so quickly and swiftly and we’ve all kind of just picked up CSS grid and started using it in our personal projects.

Um last week one of the the feature images. Was uh, I did another example of again. Um, I can’t remember who it was it was. Uh, Susan Robertson redesigned her blog using the CSS grid and she is an absolute demon front-end developer. I really like this stuff that she’s done in the past. I picked her up as a as a legend as I was writing it and she I checked with people when I when I do a review of their site just to make sure that I’m not getting anything wrong and to just get more insight into how they built it and she wrote back and she was very kind and she explained, uh some areas which I had misinterpreted as to as to why she was doing certain things, which was awesome.

Efforts to clear out she’s like, can you please not refer to me as a legend? I’m just someone working in front end development trying to make my way and lie on it and it was lovely because she is really really good at her Craft. Um, but also incredibly humble and and it reminds me that we all struggle and we all um try hard to.

To keep learning and keep keep developing sites and trying to stay on top of this crazy world of web development that keeps moving in a very quick way. So yeah, Rachel Andrews really good article and the other person who has done so much as well as Jensen. Who has this? Uh CSS layout land YouTube channel, which I mentioned a couple of weeks ago as well.

It’s a great set of videos Mozilla have employed Jen to do these sets of videos mainly around the CSS grid, but it’s all about CSS layouts and how to get the most out of layouts and and how to push the boundaries while still staying true to design. It’s a really yeah, it’s super great. Um, what are they else if there’s been some other stuff?

Oh, there’s a whole bunch of other stuff. Oh pick one more which is uh something which is been been on my mind a little bit. So I use WordPress for doing a lot of sites because I find it super easy to set up and and get going because I’m used to it. It’s also very simple to teach someone how to continue to maintain the site moving forwards as well.

Um, and they’ve developed this new uh, uh content editor and it’s called Gutenberg and so my content editor. I mean like the wysiwyg that you use to type in the words to make them appear on your site and over the last few years. We’ve had things like medium come along which is tried really hard to focus on.
The ability for inexperienced people to have a beautiful writing experience and to make the content that they’re writing appear Beautiful by giving them simple options and templates to really bring to life the content and medium did a really good job of that. It’s really hard to write an ugly.

Medium article because of the Frameworks that they put in now within WordPress, it’s a huge encouragement. Like it’s a allows a lot of people to get online really quickly, but it’s very easy to create unattractive WordPress or difficult to read WordPress sites. And it’s it’s not what we’re after we want the content to be easy to consume and to look great so they hadn’t touched a wysiwyg.

For years, they hadn’t changed the done tweaks to the to the word editor, but they hadn’t really overhauled her and Gutenberg is supposed to be the Overhaulin of it. Now what it does is allows you to create things like medium. So if you want to put a huge big bot quote in there, you can you can add a block and then you can put your quote in there and it’s styled beautifully.

If you want to put a full width image in there. You can do that and you’ve got control over it. So it really gives you more artistic control over the content you’re dropping in. Now I installed it on uh, the local WordPress version that I’ve got here and tried it with the responsive design is side and it’s it’s great.

It does allow you to create these beautiful articles. Um, and be more art directed and give an editor the ability to be more expressive, but I think also for the resources section and for the podcast section, And the example section. In fact just about every section I have. Um, I have advanced custom Fields applied because I don’t just want a title and then a block of text which you would normally get for a blog post in WordPress when I create Pages or um, Yeah, creating.

I like document types like the example. I work out. What content is going to appear in the page what content I want to be consistent how I want that content to be arranged and that then defines how um how I chunk the content up in the CM. Because I want to be able to play certain bits of content in certain areas and reuse certain bits as many times as I want or use certain bits as Search terms or provide certain elements in an API for people to request some very very specific in how I create my content Matrix.

So there’s loads of these Advanced custom fields to Chunk Up information. Now when I put applied Gutenberg those Advanced custom Fields disappeared from the editor, so they didn’t get deleted from the database. They didn’t disappear from the front end templates. They just I just wasn’t able to edit ones that were already there.

If I was going to edit a previous page the created or if I created a new example page or a new resource. I wasn’t able to access those to fill in the details I needed. Instead. I just had this beautiful writing experience in Gutenberg now Gutenberg does offer a custom blocks. So you’re able to create blocks in the back end which will have the fields that you require or you might require to be able to be dropped in to the site, which I suppose is a replacement of advanced custom Fields.

The only issue with that is once you create a custom block. From what I understand is that you can add that custom block as many times as you want and it’s then down to the content creator or the content Editor to make sure that you order the blocks in the right way that you want to appear on the front end of the site now that for me moves away from the templated.

Why that I want the resources to be laid out or the examples. I want things to be laid out in the same way. So people going back will always know that they get the the content in the certain order and they can always find the right stuff and also programmatically I want to be able to specifically make an API requests to pull out certain content within certain Fields.

So I’m not sure how gutenberg’s going to address that but. It’s the one thing which I think is a failure at the moment for including Gutenberg, um into your WordPress site. It does look as though gutenberg’s going to be included as part of WordPress and that’s it’s just going to ship with it eventually, but seeing as WordPress Powers 25% of the internet and automatic which is the company who who look after WordPress.

Is their business they’re not going to they’re not going to do anything to the product which people and destroys. X amount of the sites that are currently running they’re gonna find a way that allows things to exist in harmony together. Um, they may make some some changes, but I can’t see them doing something which will mean that the stuff that I’ve got will no longer work and I don’t have an upgrade path in WordPress anymore.

So don’t you think that that’s going to happen but at the moment you can get good and burgers or Plugin, I highly recommend downloading it and installing it on your local version of your WordPress site. Um, if you want to if you don’t have a local version of your WordPress site, there is a application called local by Flywheel.

It’s tremendous a flywheel offer WordPress hosting. It’s quite expensive but um really really good and they offer this free, uh tool which allows you to set up WordPress instances locally. So I always do that and then I use um, uh WP microwave Pro to pull my live version of the site locally and then I just use an FTP client to pull down my theme files.

And then I’ve got an exact replica of my live website on my laptop that I can do testing with as well. So that’s quite cool anyway, so that’s that’s about it for this week. I wanted to keep uh, keep the podcast going and try to stay as frequent as possible. So I thought if we can continue to go through the weekly links and you can sort of hear it ear bloggy style instead of getting it in your in the in your inbox as well.

So that’s all for me this week. Thank you again for joining. Like I said, the 300th Edition is coming up next week. So if you are not already a subscriber, please go over. Uh, you can subscribe at the bottom of the page unresponsive design. Or if you visits responsive design weekly you can subscribe there as well.

Uh, if you would like to sponsor an edition of the newsletter or sponsor in addition of the podcast, you are more than welcome. Please get in touch you can do um sponsorship, uh for just about anything. Uh, the only requirement I have is that I would probably I would use it. If you weren’t, uh sponsoring the show, then I would probably mention it.

Anyway, if I wouldn’t mention it, uh, you’re probably not going to be able to sponsor the show, but then you wouldn’t be listening to it either. So I think it’s going to work both ways. And if you are an event like a Grassroots event trying to get going and get heard and get your word out. Uh to a larger audience, please get in touch.

I’ve media sponsorship opportunities as well where if you can like donate a a ticket for one of the subscribers, um, then there’s no cost for the sponsorship. We want to promote as many people as possible to we want to promote you doing wonderful things to to the wonderful idea. It’s and so that’s it for me.

You can also follow along on at res web Des on Twitter. Uh, and that’s it. Thanks for tuning in. We’ll talk to you next week. See you then. Bye.