diff --git a/cookbook/templates/base.html b/cookbook/templates/base.html
index ef78315fe..3d2ac3fb4 100644
--- a/cookbook/templates/base.html
+++ b/cookbook/templates/base.html
@@ -49,7 +49,8 @@
 </head>
 <body>
 
-<nav class="navbar navbar-expand-lg navbar-dark bg-{% nav_color request %}" id="id_main_nav" style="{% sticky_nav request %}">
+<nav class="navbar navbar-expand-lg navbar-dark bg-{% nav_color request %}" id="id_main_nav"
+     style="{% sticky_nav request %}">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
             aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -211,5 +212,17 @@
 {% block script %}
 {% endblock script %}
 
+<script type="application/javascript">
+    window.addEventListener("load", () => {
+        if ("serviceWorker" in navigator) {
+            navigator.serviceWorker.register("{% url 'service_worker' %}", { scope: '/' }).then(function (reg) {
+                console.log('Successfully registered service worker', reg);
+            }).catch(function (err) {
+                console.warn('Error whilst registering service worker', err);
+            });
+        }
+    });
+</script>
+
 </body>
 </html>
diff --git a/cookbook/templates/offline.html b/cookbook/templates/offline.html
new file mode 100644
index 000000000..dc8b63a99
--- /dev/null
+++ b/cookbook/templates/offline.html
@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% load static %}
+{% load i18n %}
+
+{% block title %}{% trans "Offline" %}{% endblock %}
+
+{% block extra_head %}
+
+{% endblock %}
+
+{% block content %}
+
+    <div style="text-align: center">
+
+        <h1 class="">Offline</h1>
+        <br/>
+
+        <span>{% trans 'You are currently offline!' %}</span>
+        <span>{% trans 'This app does not (yet) support offline functionality. Please make sure to re-establish a network connection.' %}</span>
+        <br/>
+        <br/>
+        <i class="fas fa-search fa-8x"></i>
+        <br/>
+        <br/>
+
+
+        <br/>
+        <br/>
+    </div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/cookbook/templates/service-worker.js b/cookbook/templates/service-worker.js
new file mode 100644
index 000000000..729e8dec7
--- /dev/null
+++ b/cookbook/templates/service-worker.js
@@ -0,0 +1,88 @@
+/*
+Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = "/offline/";
+
+self.addEventListener("install", (event) => {
+    event.waitUntil(
+        (async () => {
+            const cache = await caches.open(CACHE_NAME);
+            // Setting {cache: 'reload'} in the new request will ensure that the
+            // response isn't fulfilled from the HTTP cache; i.e., it will be from
+            // the network.
+            await cache.add(new Request(OFFLINE_URL, {cache: "reload"}));
+        })()
+    );
+    // Force the waiting service worker to become the active service worker.
+    self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+    event.waitUntil(
+        (async () => {
+            // Enable navigation preload if it's supported.
+            // See https://developers.google.com/web/updates/2017/02/navigation-preload
+            if ("navigationPreload" in self.registration) {
+                await self.registration.navigationPreload.enable();
+            }
+        })()
+    );
+
+    // Tell the active service worker to take control of the page immediately.
+    self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+    // We only want to call event.respondWith() if this is a navigation request
+    // for an HTML page.
+    console.log("fetch event called");
+    if (event.request.mode === "navigate") {
+        event.respondWith(
+            (async () => {
+                try {
+                    // First, try to use the navigation preload response if it's supported.
+                    const preloadResponse = await event.preloadResponse;
+                    if (preloadResponse) {
+                        return preloadResponse;
+                    }
+
+                    // Always try the network first.
+                    console.log("Served from network");
+                    const networkResponse = await fetch(event.request);
+                    return networkResponse;
+                } catch (error) {
+                    // catch is only triggered if an exception is thrown, which is likely
+                    // due to a network error.
+                    // If fetch() returns a valid HTTP response with a response code in
+                    // the 4xx or 5xx range, the catch() will NOT be called.
+                    console.log("Fetch failed; returning offline page instead.", error);
+
+                    const cache = await caches.open(CACHE_NAME);
+                    const cachedResponse = await cache.match(OFFLINE_URL);
+                    return cachedResponse;
+                }
+            })()
+        );
+    }
+
+    // If our if() condition is false, then this fetch handler won't intercept the
+    // request. If there are any other fetch handlers registered, they will get a
+    // chance to call event.respondWith(). If no fetch handlers call
+    // event.respondWith(), the request will be handled by the browser as if there
+    // were no service worker involvement.
+});
\ No newline at end of file
diff --git a/cookbook/urls.py b/cookbook/urls.py
index 76018f11e..e1813836d 100644
--- a/cookbook/urls.py
+++ b/cookbook/urls.py
@@ -1,6 +1,7 @@
 from pydoc import locate
 
 from django.urls import path, include
+from django.views.generic import TemplateView
 from rest_framework import routers
 from rest_framework.schemas import get_schema_view
 
@@ -41,6 +42,8 @@ urlpatterns = [
     path('shopping/<int:pk>', views.shopping_list, name='view_shopping'),
     path('settings/', views.user_settings, name='view_settings'),
     path('history/', views.history, name='view_history'),
+    path('offline/', views.offline, name='view_offline'),
+    path('service-worker.js', (TemplateView.as_view(template_name="service-worker.js", content_type='application/javascript', )), name='service_worker'),
     path('test/', views.test, name='view_test'),
 
     path('import/', import_export.import_recipe, name='view_import'),
diff --git a/cookbook/views/views.py b/cookbook/views/views.py
index 7b2ae0828..10f231307 100644
--- a/cookbook/views/views.py
+++ b/cookbook/views/views.py
@@ -359,6 +359,10 @@ def api_info(request):
     return render(request, 'api_info.html', {})
 
 
+def offline(request):
+    return render(request, 'offline.html', {})
+
+
 def test(request):
     if not settings.DEBUG:
         return HttpResponseRedirect(reverse('index'))
