DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
What's in store for DevOps in 2023? Hear from the experts in our "DZone 2023 Preview: DevOps Edition" on Fri, Jan 27!
Save your seat
  1. DZone
  2. Data Engineering
  3. Data
  4. Introducing jekyll-workbox-plugin

Introducing jekyll-workbox-plugin

I hacked together a simple Jekyll plugin to automatically generate a service worker with Google Workbox.

Benedikt Meurer user avatar by
Benedikt Meurer
·
Dec. 13, 18 · Tutorial
Like (2)
Save
Tweet
Share
7.78K Views

Join the DZone community and get the full member experience.

Join For Free

I spent some time today and hacked together a simple Jekyll plugin to automatically generate a service worker with Google Workbox, with minimal overhead / effort. I had previously used the jekyll-pwa-plugin, which is awesome, but it’s doing a bit too much for my taste:

  1. Local copy of the workbox distribution rather than fetching it from the Google CDN.
  2. Generates both the actual service sw.js as well as a loader script sw-register.js, which also emits a sw.update event, which I don’t need.
  3. Inserts a <script> snippet into each .html file generated that loads sw-register.js, prepending the current timestamp to the URL to avoid caching.

The sw-register.js itself also uses a timestamped URL to load the sw.js file. All of this is actually unnecessary since I have configured my server to respond with Cache-Control: no to sw.js requests (and even that is no longer necessary as I learned today), plus I already have a main.js that runs during page load, so I’d rather do the service worker registration there via the common sequence:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js');
  });
}


The only thing I actually need is the ability to do the precaching automatically and inject the right call to workbox.precaching.precacheAndRoute() into the final sw.js, plus the convenience of adding the appropriate importScript()call in the beginning.

So I created the jekyll-workbox-plugin (ruby gem), which does that — and only that. I hope you’ll find it useful. You can find documentation regarding Installation and Getting Started on the project page. In a nutshell, you add gem 'jekyll-workbox-plugin' to the jekyll_plugin group in your Gemfile:

source 'https://rubygems.org'

gem 'jekyll'

group :jekyll_plugins do
  gem 'jekyll-workbox-plugin'
end


and run bundle to install the gem. After the plugin has been installed successfully, add the following lines to your _config.yml in order to tell Jekyll to use the plugin:

plugins:
  - jekyll-workbox-plugin


Finally you need to create a template sw.js file, which looks something like this:

// sw.js

// set names for both precache & runtime cache
workbox.core.setCacheNameDetails({
    prefix: 'my.site.tld',
    suffix: 'v1',
    precache: 'precache',
    runtime: 'runtime-cache'
});

// let Workbox handle our precache list
// NOTE: This will be populated by jekyll-workbox-plugin.
workbox.precaching.precacheAndRoute([]);


It’s important to have the workbox.precaching.precacheAndRoute([]) in there, which jekyll-workbox-plugin will automatically populate.

Google (verb) Jekyll (software) IT Plus (programming language) Snippet (programming) Template Cache (computing) Loader (equipment)

Published at DZone with permission of Benedikt Meurer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Leaders Make Their Own Problems
  • Integration: Data, Security, Challenges, and Best Solutions
  • Exploring the Benefits of Cloud Computing: From IaaS, PaaS, SaaS to Google Cloud, AWS, and Microsoft
  • How to Check Docker Images for Vulnerabilities

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: