I am using swPrecache, for loading my static assets of my PWA, to support offline mode. It working great. My setup is something like:
https://www.myexampledomain.com/myapp/ loads static index.html and which in turn loads uses swPrecache to load static assets like JS, Images, CSS,etc. Mind you these all are loaded from the same domain e.g www.myexampledomain.com/myapp/js/file1.js
But my swprecache list has decent number of files and takes some time to download on slower internet connection. FYI, I am already delaying the service worker registration to something like "load" event.
So here is what I am trying now. I need someone to validate if this is possible:
https://www.myexampledomain.com/myapp/ loads the static html files as before.
Have swPrecache intercept the static requests that go to app domain (e.g https://www.myexampledomain.com/myapp/js/file1.js) and instead fetch these to a CDN endpoint? (e.g https://some.cloudfront.com/myapp/js/file1.js).
Once downloaded the swPrecache continues to work as usual.
So essentially I am hoping to have swPrecache proxy the static asset requests, to a CDN to make it faster to download during the initial load.
Any comments/pointers on this will help.
You can use the stripPrefixMulti option in sw-precache to change the URLs that are written to your service worker file. It's fairly brute-force, though, so it helps if there's a common prefix that is shared by all the assets that will be served from the CDN.
For example, if everything that will be served off of the CDN is stored in a local assets/ directory, and their paths on the CDN will start with https://my-cdn.com/assets/, you can use
{
stripPrefixMulti: {'assets/': 'https://my-cdn.com/assets/'},
// ... other sw-precache options...
}
You'll want to make sure that whenever a local file changes as part of your build process the copy of the file on the CDN also changes immediately, or you'll run the risk of the versioning info generated for the local files being out of sync with what's on the CDN.
yes, you can use
{
stripPrefixMulti: {'assets/': 'https://my-cdn.com/assets/'},
// ... other sw-precache options...
}
but I'm sure you will face new CORS problem. I'm working on it too
Related
I would like to use static url for my versioned JS bundle. Like
https://some-cdn-domain/latest/bundle.js
The problem is that it's uploading to Cloudfront and caches if upload occures to same directory. I could invalidate caches but it's not convenient and waiting time is too long anyway.
So, I'm creating some backend which is going to redirect that url to latest bundle version like
https://some-other-domain/latest/bundle.js -> https://some-cdn-domain/v123/bundle.js
So my question is if I use this redirect URL as src to <script> tag on html page, will redirect to the latest version always occure or there're going to be some limitations or caveats.
Sadly, googling didn't give anything
If the source code or function is changed in the SPA project, you must deploy it to the server again.
If the service is deployed, it will continue to load the cached js value unless refreshed. How do I fix this?
Say all of your SPA code are two files: vendor.js and app.js. To miss the cache when updated, typically what is done is compute hashes of the contents and put it in the file name: vendor.<truncated md5 hash>.js and app.<truncated md5 hash>.js. Each time you build the project (assuming you changed at least one line) it gets a new hash, therefore a new filename, and miss the cache.
So when you make changes to your CSS or JS static file and run the server, sometimes what happens is that the browser skips the static file you updated and loads the page using its cache memory, how to avoid this problem?
Well there are multiple ways to avoid this problem
the simplest way is by:
if you are using Mac: Command+Option+R
if you are using Windows: Ctrl+F5
What it does is that it re-downloads the cache files enabling the update of the static files in the browser.
Another way is by:
making a new static file and pasting the existing code of the previously used static file and then
running the server
What happens, in this case, is that the browser doesn't use the cache memory for rendering the page as it assumes it is a different file.
U have DEBUG = False in your settings.py. Switch on DEBUG = True and have fun
It's my first deploying a real application to production, and we are having some problems with speed on the website. The main problem right now is the time it takes to load the index page, so I know it's really a thing about queries or anything like that.
We are using Heroku + Puma + CloudFront as a CDN to server our static assets. Thing is, I'm not really that sure this should be happening:
As you can see, application.js and application.css is being loaded twice, one from cloudfront and one from /assets. Should this be happening? This is only an example but is happening too with some images and .svgs that I have, they are 'being loaded' twice.
Important to notice that the call for including both js and css is only being made once in the head tag
Thanks
The assets are being loaded once, but via two HTTP calls, the first being a redirect to the second. You can see that the first application.js results in a redirect (see below the URL in the third column) to the second application.js, and the same goes for application.css
To avoid the redirect, you need to configure Rails to load assets from a different domain. To do so, set config.action_controller.asset_host in the relevant environment config file, like so:
config.action_controller.asset_host = "http://XXXXXXX.cloudfront.net"
I'm developing an extjs application which boots in two steps. At the start it pops up a login& password window, loading only the necessary js resources. If login successfully then it starts the viewport by loading all the remaing js files.
at the login time it loads ext-all.js and couple of app js file.
after the login, it loads the controllers that load the required js files.
the problem is that I want to minify and compress the js files, but when using the sencha cmd tool
>sencha create jsb -a index.html -p app.jsb3
>sencha build -p app.jsb3 -d .
>java -jar ycompressor.jar --type js -o app-all-compressed.js app-all.js
the resulting app-all.js and app-all-compressed.js contain only the resources needed at the login phase only.
Then I tried to build manually a jsb3 file that generates a minified and compressed post-all.js including by hands the required js by the viewport (second phase boot), then loaded this file after successfully passed login this way:
onLoginSuccess(){
Ext.Loader.loadScript({
url: 'post-all.js',
scope: me,
onLoad: function() {
//controllers loading
...
problem was that even if post-all.js is loaded, the resuorce are still loaded unminified.
Resources are minified and compressed correctly in post-all.js but it seems that requires[" ..."] loads the unminified copy of the resources, so I have each reasource loaded 2 times
Any idea?
thanks
It is a lot easier to load everything at once. There is no reason to load in two times.
Visual : Even if you load all javascript, you show only the login dialog. All the rest, you show only after successful login.
Security : If you secure the access to all server resource with the session, a malicious user might be able to display some parts of the user interface, but he could never get to view any data nor do anything else.
Loading time : Considering the size of the ExtJs library, the gain in loading time will be minimal.
Like this you've worked around your problem, and you can enjoy the simplicity of the regular ExtJs deployment with Sencha cmd.