How to point digest assets file inside an js file in phoenix - phoenix-framework

Question

How do I point file url from a js file? Here's a code snippet that I would like to implement.
const currentCacheName = "sample-app-v2";
self.addEventListener('install', (event) => {
const urlToCached = [
'/',
'<%= static_path(#conn, "/css/app.css") %>', // Adding .eex on the js file won't work.
'<%= static_path(#conn, "/js/app.js") %>'
// Add fonts, icon, etc.
];
event.waitUntil(
caches.open(currentCacheName).then(function(cache) {
return cache.addAll(urlToCached);
})
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.filter((cacheName) => {
return cacheName.startsWith('sample-app-') && cacheName != currentCacheName;
}).map((cacheName) => {
return cache.delete(cacheName);
})
);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(function(response) {
if(response) return response;
return fetch(event.request);
})
);
});
I'm trying out phoenix with serviceworker but I need to get the latest digest assets file for it to work.

Answer 1

There are several ways of doing such thing. One of it is to convert your JS file from a static asset to a template – create route for this, controller, view and move JS code to a template file (for example – script.js.eex under web/templates/script/ if you named you controller like ScriptController and view is the ScriptView). In that case you will be able to use template tags inside of JS code, and serve your script from the root of web app if you need. This is completely similar to adding new routes/pages to your Phoenix app. Also you should disable forgery protection for such route (remove :protect_from_forgery from a pipeline in router). Cons of this is that you'll lose all JS pipeline for this script, so no transpiling and other stuff like this.