Added PWA Functionality, Improved Service Worker, Improved Documentation

5 years ago · 06a35131a6
14 changed files with 54 additions and 11 deletions
--- a/garage_door_script.py
+++ b/garage_door_script.py
@ -97,5 +97,11 @@ def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'),
                          'favicon.ico',mimetype='image/vnd.microsoft.icon')

+
+# Route for the Service Worker
+@app.route('/service-worker.js', methods=['GET'])
+def sw():
+    return app.send_static_file('service-worker.js'), 200, {'Content-Type': 'text/javascript'}
+
 if __name__ == '__main__':
    app.run(host='0.0.0.0', port=1235) #Run the webserver
--- a/static/app.js
+++ b/static/app.js
@ -0,0 +1,14 @@
+// Credits: https://flaskpwa.com/#_serviceWorkersRegistration
+// File Created by [Check Commits for Name]
+
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+    .register('./service-worker.js')
+    .then(function(registration) {
+        console.log('Service Worker Registered!');
+        return registration;
+    })
+    .catch(function(err) {
+        console.error('Unable to register service worker.', err);
+    });
+}
--- a/static/css/bootstrap.min.css
+++ b/static/css/bootstrap.min.css
--- a/static/css/bootstrap.min.css.map
+++ b/static/css/bootstrap.min.css.map
--- a/static/css/styles.css
+++ b/static/css/styles.css
--- a/static/images/android-chrome-192x192.png
+++ b/static/images/android-chrome-192x192.png
--- a/static/images/android-chrome-512x512.png
+++ b/static/images/android-chrome-512x512.png
--- a/static/images/apple-touch-icon.png
+++ b/static/images/apple-touch-icon.png
--- a/static/images/favicon-16x16.png
+++ b/static/images/favicon-16x16.png
--- a/static/images/favicon-32x32.png
+++ b/static/images/favicon-32x32.png
--- a/static/site.webmanifest
+++ b/static/site.webmanifest
--- a/static/service-worker.js
+++ b/static/service-worker.js
@ -0,0 +1,21 @@
+// CREDITS: https://www.pwabuilder.com/serviceworker
+// File Created by [Check Commits for Name]
+
+// This is the service worker with the Cache-first network
+
+const CACHE = "pwabuilder-precache";
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+workbox.routing.registerRoute(
+  new RegExp('/'),
+  new workbox.strategies.CacheFirst({
+    cacheName: CACHE
+  })
+);
--- a/templates/index.html
+++ b/templates/index.html
@ -2,12 +2,13 @@
  <head>
    <title>Pi Garage Door Opener</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
-    <link href="static/styles.css" rel="stylesheet" media="screen">
-    <link rel="manifest" href="static/site.webmanifest">
-    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
+    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" media="screen">
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
  </head>
  <body>
    <div class="header">
--- a/templates/login.html
+++ b/templates/login.html
@ -2,11 +2,12 @@
  <head>
    <title>Log in to continue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
-    <link rel="manifest" href="static/site.webmanifest">
-    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
+    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
  </head>
  <body>
    <div class="container">