Add basic PWA support

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ## Unreleased
 
 ### Added
+- Add basic Progressive Web App support
 - The ability to escape `|` characters with `\` in Stats API filter values
 - An upper bound of 1000 to the `limit` parameter in Stats API
 - The `exclusions` script extension now also takes a `data-include` attribute tag

assets/js/app.js

@@ -117,3 +117,7 @@ if (embedButton) {
     }
   })
 }
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register( 'serviceWorker.js' );
+}

assets/static/app.webmanifest

@@ -0,0 +1,41 @@
+{
+  "dir": "ltr",
+  "lang": "en",
+  "short_name": "Plausible",
+  "name": "Plausible Analytics",
+  "icons": [
+    {
+      "src": "/images/icon/plausible_logo.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    },
+    {
+      "src": "/images/icon/plausible_logo_192px.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/images/icon/plausible_logo_192px_maskable.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/images/icon/plausible_logo_512px.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/images/icon/plausible_logo_512px_maskable.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#252f3f",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#5850ec",
+  "description": "Web analytics tools"
+}

assets/static/serviceWorker.js

@@ -0,0 +1,11 @@
+self.addEventListener( 'install', ( event ) => {
+	console.log( 'Service worker installed' );
+} );
+
+self.addEventListener( 'activate', ( event ) => {
+	console.log( 'Service worker activated' );
+} );
+
+self.addEventListener( 'fetch', ( event ) => {
+	console.log( 'Service worker fetch' );
+} );

lib/plausible_web/endpoint.ex

@@ -13,7 +13,7 @@ defmodule PlausibleWeb.Endpoint do
     at: "/",
     from: :plausible,
     gzip: false,
-    only: ~w(css fonts images js favicon.ico robots.txt)
+    only: ~w(css fonts images js favicon.ico robots.txt app.webmanifest serviceWorker.js)
 
   plug Plug.Static,
     at: "/kaffy",

lib/plausible_web/templates/layout/app.html.eex

@@ -9,6 +9,7 @@
     <link rel="apple-touch-icon" href="/images/icon/apple-touch-icon.png">
     <title><%= assigns[:title] || "Plausible · Simple, privacy-friendly alternative to Google Analytics" %></title>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <link rel="manifest" href="/app.webmanifest">
     <%= render("_tracking.html", assigns) %>
     <script type="text/javascript" data-pref="<%= @conn.assigns[:theme] || (@conn.assigns[:current_user] && @conn.assigns[:current_user].theme) %>" src="<%= Routes.static_path(@conn, "/js/applyTheme.js") %>"></script>
   </head>