Senior Developer, Slingshot Health
Jekyll on github pages and service workers. Progressive web apps and offline mode for your blog
I attended the chrome dev summit 2016 last week, and Google has been pushing Progressive web apps pretty hard. They’re basically a new way...
🗓️Monday - November 14, 2016
🔖3 min read ∙ 606 words
I attended the chrome dev summit 2016 last week, and Google has been pushing Progressive web apps pretty hard. They’re basically a new way to deliver amazing experiences to users in the web, by making websites more reliable, fast and engaging; by adding offline experiences, periodic background syncs and push notifications.
One key aspect of this is service workers. A service worker is a script that runs separate of your page, it can intercept network requests, write to a cache, it can’t manipulate the DOM but you can use post messages to get and send data, and they use extensive use of promises. A lot of things which are super cool and you should de definitely be looking into, but I won’t go a lot into them since there’s already much better content out there than I can produce.
Getting Started 🔗︎
During the summit I turned one of my websites into a progressive web app, https://techqueria.org/. (It doesn’t work in safari or iOs). Take a look at how fast it changes pages, at your network tab, and how it works even if you turn on airplane mode.
There are some important requisites for service workers:
- You must use HTTPS.
- The file must be in the root of the application.
Lucky both these things are easy to accomplish using github pages!
If you’re not using a custom domain, your page is already serve using HTTPS. If you want to use a custom domain, try Cloudflare, they offer a DNS service that comes with free https. You will point your NS to Cloudflare and they will automatically load your current DNS settings. To activate simple SSL you just have to toggle an option https://www.cloudflare.com/ssl/
If you’re not using github pages, but something else like digital ocean, then use LetsEncrypt, they offer free SSL certificates.
The biggest problem I had when I was creating my application was that I failed with the location of the file. The service worker will have a scope and it can’t be a directory above it’s location, it has to be in the root. It took me a while to debug until some friendly person from Mozilla caught my error. You can simply leave the sw file in the root of your jekyll project and it will be available for the visitors. The error was hard to find because we saw the service worker being active, but no requests where being intercepted and offline mode wasn’t working.
You can take a look at all the code it github, you can basically copy my sw.js and just replace the paths to your files and it should work.
We also included a manifest.json, so that in Android it will display the users an option to show in homepage, which adds a pretty icon and an app-like experience.
Other than that the steps I follow are the same steps that are in any tutorial. I recommend the following ones if you want to get more information:
- Live coding a progressive web app: In this shortish video you can see Surma and Paul demonstrate adding a Service Worker to a site during the break.
- Your first progressive web app: Is an introduction that uses a sample application to introduce the concepts.
- Offline we applications course: Is an Udacity class that goes more in depth into the possibilities for offline web applications, like caching your user data in IndexedDB.
- Future Progressive Web Apps: Jake (one of the originators of Service Workers) shares the future of the web app model, with Foreign Fetch, Streams and more.
📝About the author
🌐Share this page
Techqueria is a 501c3 nonprofit that empowers Latinx professionals with the resources and support that they need to thrive and become leaders in the tech industry.
To that end, we work with both tech companies and employee resource groups (ERGs) to build Latinx-centered spaces that revolve around career advice, technical talks, mentorship, open jobs, networking events, speaking opportunities, and open-source in order to comprehensively affect change in the tech industry.
Coming from all walks of life, we believe that the diversity of our community is the most reliable asset we have. Our space aims to be inclusive so we invite Latinx from the regions of the Caribbean, Haiti, and Brazil as well as those who identify as Afro-Latinx, Asian-Latinx or LGBTQIA. The term Latinx is used instead of Latino or Latina because it is a gender-neutral and inclusive term.
🌈Follow us on social media
If you'd like to make this page better or notice something off, feel free to open an issue on GitHub.
Any help is greatly appreciated.