Merge pull request #30 from RinteRface/pwa-setup

PWA update sources
RinteRface · Jul 18, 2024 · 0faccd8 · 0faccd8
2 parents db63e28 + adffd41
commit 0faccd8
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 43 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,6 +1,6 @@
 Package: charpente
 Title: Seamlessly design robust 'shiny' extensions
-Version: 0.7.0
+Version: 0.7.1
 Authors@R: c(
     person(
       given = "David",

diff --git a/NEWS.md b/NEWS.md
@@ -1,3 +1,9 @@
+# charpente 0.7.1
+
+## New:
+- Update assets to match for shinyMobile's most recent version 2.0.1.
+- Improve service worker script for debugging (async).
+
 # charpente 0.7.0
 
 ## New:

diff --git a/R/jstools.R b/R/jstools.R
@@ -28,7 +28,7 @@ build_js <- function(dir = "srcjs", mode = c("prod", "dev"), entry_points = "mai
   # check if entry_points exists
   if (any(!file.exists(entry_points))) {
     missing_entry_points <- entry_points[!file.exists(entry_points)]
-    ui_stop("The following entry points don't exist: {paste0(entry_points, collapse = ', ')}")
+    ui_stop("The following entry points don't exist: {paste0(missing_entry_points, collapse = ', ')}")
   }
 
   # run esbuild

diff --git a/inst/pwa-utils/html/offline.html b/inst/pwa-utils/html/offline.html
@@ -10,7 +10,7 @@
     <!-- Your app title -->
     <title>Oups</title>
     <!-- Path to Framework7 Library Bundle CSS -->
-    <link rel="stylesheet" href="framework7-5.7.14/css/framework7.bundle.min.css">
+    <link rel="stylesheet" href="shinyMobile-2.0.1/dist/shinyMobile.min.css">
     <!-- Path to your custom app styles-->
   </head>
   <body>
@@ -43,42 +43,38 @@
           <div class="page-content">
             <div class="block">
               <p>Welcome to the offline page</p>
-              <button onclick="location.reload();" class="toast-button button color-red col">Reload</button>
+              <button onclick="location.reload();" class="button button-fill color-red">Reload</button>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- jQuery -->
-    <script type="text/javascript" src="shared/jquery.min.js"></script>
-    <!-- Path to Framework7 Library Bundle JS -->
-    <script type="text/javascript" src="framework7-5.7.14/js/framework7.bundle.min.js"></script>
-    <!-- Path to your app js -->
+    <script type="text/javascript" src="jquery-3.6.0/jquery.min.js"></script>
+    <!-- Shiny -->
+    <script type="text/javascript" src="shiny-javascript-1.8.1.1/shiny.min.js"></script>
+    <!-- Path to shinyMobile JS -->
+    <script type="text/javascript" src="shinyMobile-2.0.1/dist/shinyMobile.min.js"></script>
+    <!-- Load your app JS -->
     <script>
-      var app = new Framework7({
-        // App root element
-        root: '#app',
-        // App Name
-        name: 'My App',
-        // App id
-        id: 'com.myapp.test',
-        // Enable swipe panel
-        panel: {
-          swipe: true,
-        },
-        autoDarkTheme: true,
-        // ... other parameters
-      });
+      document.addEventListener('DOMContentLoaded', function () {
+          var app = new window.Framework7({
+              // App root element
+              el: '#app',
+              // App Name
+              name: 'My App',
+              // Dark mode
+              darkMode: "auto",
+              // ... other parameters
+          });
 
-      var mainView = app.views.create('.view-main');
+          var mainView = app.views.create('.view-main');
 
-      // Few tweaks
-      if (Framework7.device.standalone) {
-        $("html, body").css({ height: "100vh", width: "100vw" });
-        if ($(".appbar").length > 0) {
-          $(".toolbar").css("margin-bottom", "20px");
-        }
-      }
+          // Few tweaks
+          if (Framework7.device.standalone) {
+              $("html, body").css({ height: "100vh", width: "100vw" });
+          }
+      });
     </script>
   </body>
 </html>
diff --git a/inst/pwa-utils/js/service-worker.js b/inst/pwa-utils/js/service-worker.js
@@ -18,20 +18,27 @@ const CACHE_NAME = "offline";
 // Customize this with a different URL if needed.
 const OFFLINE_URL = "offline.html";
 
+async function cacheResources() {
+  const cache = await caches.open(CACHE_NAME);
+  const resources = [
+    new Request(OFFLINE_URL, { cache: "reload" }),
+    new Request("shinyMobile-2.0.1/dist/shinyMobile.min.css", { cache: "reload" }),
+    new Request("shinyMobile-2.0.1/dist/shinyMobile.min.js", { cache: "reload" }),
+    new Request("jquery-3.6.0/jquery.min.js", { cache: "reload" }),
+    new Request("shiny-javascript-1.8.1.1/shiny.min.js", { cache: "reload" })
+  ];
+
+  for (const resource of resources) {
+    try {
+      await cache.add(resource);
+    } catch (error) {
+      console.error(`Failed to cache ${resource.url}:`, error);
+    }
+  }
+}
+
 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" }) );
-      await cache.add( new Request("framework7-5.7.14/css/framework7.bundle.min.css", { cache: "reload" }) );
-      await cache.add( new Request("framework7-5.7.14/js/framework7.bundle.min.js", { cache: "reload" }) );
-      await cache.add( new Request("shared/jquery.min.js", { cache: "reload" }) );
-    })()
-  );
-  // Force the waiting service worker to become the active service worker.
+  event.waitUntil(cacheResources());
   self.skipWaiting();
 });