Make PWA work finally :D

src/builder.cr

@@ -47,11 +47,12 @@ module Mint
         "theme_color"      => json.application.theme,
         "display"          => json.application.display,
         "orientation"      => json.application.orientation,
+        "start_url"        => "/",
         "icons"            => ICON_SIZES.map do |size|
           {
-            "src"   => File.join("dist", "icon-#{size}x#{size}.png"),
+            "src"   => "icon-#{size}x#{size}.png",
             "sizes" => "#{size}x#{size}",
-            "type"  => "images/png",
+            "type"  => "image/png",
           }
         end,
       }.to_pretty_json

src/constants.cr

@@ -5,7 +5,7 @@ module Mint
   end
 
   ICON_SIZES =
-    [16, 32, 36, 57, 76, 96, 120, 128, 144, 152, 167, 180, 196, 256, 512]
+    [16, 32, 36, 48, 57, 72, 76, 96, 120, 128, 144, 152, 167, 180, 192, 196, 256, 512]
 
   COG       = "⚙".colorize(:light_green).mode(:dim).to_s
   ARROW     = "➔".colorize(:dark_gray).to_s

src/utils/service_worker.cr

@@ -2,17 +2,26 @@ module Mint
   class ServiceWorker
     SOURCE =
       <<-JS
-      // The install handler takes care of precaching the resources we always need.
+      // On install precache all static resources
       self.addEventListener('install', event => {
         event.waitUntil(
-          caches.open(CACHE)
-            .then(cache => cache.addAll(PRECACHE_URLS))
-            .catch(error => console.log(`Oops! ${error}`))
+          caches
+            .open(CACHE)
+            .then(cache =>  {
+              const promises =
+                PRECACHE_URLS.map((url) =>
+                  cache
+                    .add(url)
+                    .catch(error => console.log(`Could not cache: ${url}!`))
+                )
+
+              return Promise.all(promises)
+            })
             .then(self.skipWaiting())
         );
       });
 
-      // The activate handler takes removes old caches
+      // On activate remove all unused caches
       self.addEventListener('activate', function(event) {
         event.waitUntil(
           caches.keys().then(cacheNames => {
@@ -25,22 +34,28 @@ module Mint
         );
       });
 
-      // The fetch handler serves responses for same-origin resources from a cache.
-      // If no response is found, it populates the runtime cache with the response
-      // from the network before returning it to the page.
       self.addEventListener('fetch', event => {
-        // Skip cross-origin requests, like those for Google Analytics.
-        if (event.request.url.startsWith(self.location.origin)) {
-          event.respondWith(
-            caches.match(event.request).then(cachedResponse => {
-              if (cachedResponse) {
-                return cachedResponse;
-              } else {
-                return fetch(event.request)
-              }
-            })
-          );
+        const url = event.request.url
+        const origin = self.location.origin
+        const isSameOrigin = url.startsWith(origin)
+        let response = null
+
+        // If we are on the same origin
+        if (isSameOrigin) {
+          // resolve the path
+          const path = url.slice(origin.length)
+
+          // Try to get the response from the cache if not available fall back to
+          // the "index.html" file.
+          response =
+            caches
+              .match(event.request)
+              .then(cachedResponse => cachedResponse || caches.match("/index.html"))
+        } else {
+          response = fetch(event.request)
         }
+
+        event.respondWith(response)
       });
       JS