DEV Community

Cover image for Instant Webpages and Terabytes of Data Savings Through the Magic of Service Workers ✨

Instant Webpages and Terabytes of Data Savings Through the Magic of Service Workers ✨

Ben Halpern on December 18, 2019

I am so excited to tell you all about the code that inspired this tweet... // Detect dark theme var iframe = document.getElementById('tweet...
Collapse
 
ben profile image
Ben Halpern

While on the topic of new and interesting improvements to the DEV product, I can't help but give a shout out to the foundational work we've been doing to have a more design-driven 2020.

We recognize that we have a lot of de-cluttering and visual hierarchy improvements to be made and I really can't wait until we get to start shipping the fruits of that labor.

This is essentially wholly off-topic, but I think things are truly coming together incredibly nicely as far as product and engineering go, and as we enable the launching of more communities hosted on our open source software, all this work gets replicated for everybody to use.

Collapse
 
pavelloz profile image
Paweł Kowalski

Next step would be to split actual post from comments. I dont know if thats not overkill, but if you are experimenting and trying to squeeze last bit of performance, then lazyloading/deferring comments comes to mind as a good idea from top-to-bottom flow of things.

Collapse
 
ben profile image
Ben Halpern

Bingo

Collapse
 
pavelloz profile image
Paweł Kowalski

Im glad im not the only one spending absurd amounts of time to shave those last couple % from RUMs :-)

BTW. Rails had (and still do, but not a lot of people use it) a pretty good plug and play solution like ~8 years ago called Turbolinks. Im still amazed how much it can achieve with how little effort. Good old times. :)

Collapse
 
somedood profile image
Basti Ortiz

We've got a winner over here.

Collapse
 
dansilcox profile image
Dan Silcox • Edited

Nice! Typo / copy paste fail in the second code snippet I think -

if (!caches.match('/shell_top') || !caches.match('/shell_top')) { //return if shell isn't cached.
    return
}
Enter fullscreen mode Exit fullscreen mode

Second one should be shell_bottom right?

Collapse
 
ben profile image
Ben Halpern

Ha! Nice catch. Luckily for us it's highly unlikely shell_bottom is likely not missing unless shell_top is also missing. But we should definitely fix.

I'm going to start by fixing it in the demo above before patching it in the real code.

Feel free to do the honors if you'd like to submit the fix in the app itself...

github.com/thepracticaldev/dev.to/...

Collapse
 
dansilcox profile image
Dan Silcox

github.com/thepracticaldev/dev.to/... - hope I did it right, not done a PR on open source before!

Collapse
 
dansilcox profile image
Dan Silcox

And by the way definitely got the near instant refresh effect you mentioned!

Collapse
 
ziizium profile image
Habdul Hazeez

Same here. Even when i throttled the connection to Regular 2G.

Collapse
 
yaser profile image
Yaser Al-Najjar

Day after another, you're becoming a web-perf wizard, Ben 😁

Collapse
 
ben profile image
Ben Halpern

Collapse
 
reddyaravind178 profile image
aravind_reddy • Edited

hey ben, while i was going through this article.. i opened the link https://dev.to/security nothing is being rendered except the header and footer when i observed the network tab i can see the content is being fetched from service worker.. the same url i tried in incognito, it worked fine for the first time then from second time the same thing is happening there as well... so if somehow the page doesn't load properly and it is being cached.. from next time on wards it just shows the cached page which is not proper??

update: when i unregistered the service worker from chrome-dev-tools... the page loaded correctly..

Collapse
 
abdellani profile image
Mohamed ABDELLANI

Now, I understand why when I access https://127.0.0.1:3000 I get the offline page when the backend is off. Sometimes, when I run another project on the same port, I see the DevCommunity's header and footer loaded in that project.

Thanks for sharing.

Collapse
 
aslasn profile image
Ande

Ben, I have a question. Why there's no css/js and other static files cached through service workers? Is there a specific reason or is it just because normal browser default cache works good enough(maybe even better :/)?

I didn't know this thread existed. It was hard to examine through dev.to source with the devtools when i didn't even know a lot of things used there. The github would be even harder for me XD

Collapse
 
timjkstrickland profile image
Tim JK Strickland

It's....it's so beautiful

Collapse
 
tylerlwsmith profile image
Tyler Smith

This is super neat! I want to find a project to try this approach on.

I just migrated a site from WordPress to Next.js, and while the rebuilt Next.js site is lightening-fast on a good connection, WordPress is actually much faster on slow 3G because of streaming. Your approach feels like it would be a great middle ground.

Have you thought about noindex-ing /shell_top and /shell_bottom using robots.txt or X-Robots-Tag? I've had site partials end up indexed by Google before so I always worry 😅

Collapse
 
nikitavoloboev profile image
Nikita

Great news. One thing that I personally wish dev.to had is ability for users to bring edits to the posts.

That's my main issue from moving my blog from being hosted on GitHub and rendered with some Gatsby/Next/Hugo/..

The ability for anyone to view the source and make edits and send PRs is super valuable. Curious if this issue will be addressed or if it is even possible to address.

Collapse
 
cadonau profile image
Markus Cadonau

There is still a bug that makes this not quite work properly in the Twitter in-app browser for iOS.

Aha! I was wondering why the in-app browser in Tweetbot would lately—once again, after it being solved for a while—not always load the pages. Good luck in figuring it out!

Collapse
 
yashints profile image
Yaser Adel Mehraban

Nice, LYW team 💖

Collapse
 
ben profile image
Ben Halpern

😊

Collapse
 
donnietd profile image
DonnieTD

Did Kyle Simpson not predict that the possibilities of service workers will be the future of growth in JavaScript ?

Beautiful article !

The demo gods were good today!