Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PWA update sources #30

Merged
merged 5 commits into from
Jul 18, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion R/jstools.R
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
52 changes: 24 additions & 28 deletions inst/pwa-utils/html/offline.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
33 changes: 20 additions & 13 deletions inst/pwa-utils/js/service-worker.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,27 @@ const CACHE_NAME = "offline";
// Customize this with a different URL if needed.
const OFFLINE_URL = "offline.html";

async function cacheResources() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: changed this because easier debugging, and better error messages if something goes wrong!

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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thx for improving this

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();
});

Expand Down
Loading