I have a challenge in my PWA. because of performance issues, I can't download all js files in the initial load, so each page, download its chunk, in loading time. in this case, if I deploy a new version and the previous' deploy chunk isn't downloaded yet, deploy time active users, will find a crash on application.
I need to know , is there any way to download all chunks and update PWA in background in service workers?
Under some scenarios, you could use Periodic Background Sync to keep cached data up to date via periodic refreshes. However, it's not intended as a way to allow you to cache critical resources for your web app—think of it more as a way of making optional, nice-to-have, updates.
If you have resources that need to be cached, and those resources are all versioned together, they should all be added to the cache inside of an install handler.
If you can't download all files inside of that install handler then I think you need to reconsider whether using a service worker is the right approach for you, because there's no guarantee that you'll end up with a consistent cache using a different approach.
One workaround that you might consider is to show a "Loading..." or "Download assets..." splash screen when a user first comes to your web app, before they can interact with it, and while that screen is up, register your service worker and allow it to populate its caches inside its install handler. Once the install handler completes, you can then remove the "Loading..." screen and allow your users to interact with your web app.
Related
I made a react web app. I added a service worker to get the PWA app. I just need the PWA app to add it on the home screen and use it on fullscreen view, I don't need any more functionalities like - offline browse, save cache, etc.
Now I am facing a problem, every time I deploy my app, I need to clear the browser cache. Sometimes I have to go to Incognito mode to see the changes.
So, How I will stop this?
I created a fun progressive web app to play video tracks from our database and has a nifty download button on the tracks so they can be played offline. Trouble is that when the webapp is actually offline, the cached version of the track isn't being played.
I'll list the steps how its implemented and if someone could just take a look and spot the error that would be amazing.
Using create react app script framework, or at least we did until switching to react-app-rewired (v 2.1.3)
service worker is registered in index.tsx (we're using typescript), calling serviceWorker.register();
mp3s are served via cloudfront + S3 (this shouldn't matter) and played in webbrowser using a simple video tag <video src={mp3url}></video>
download button basically runs caches.open("my_custom_mp3_cache").then(cache => cache.add(mp3url))
when the webapp is offline (via "Offline" checkbox in "service worker" tab of console), i expect the service worker to serve the track from the cache. This is bug, it currently doesnt.
Attached picture of request for the mp3 when app is offline. it should hit cache but doesnt:
https://i.stack.imgur.com/uSUon.png
Included picture of the entry in the cache that should be hit/matched against: https://i.stack.imgur.com/If0NC.png
When testing this in console with caches.match("mp3url") it correctly returns the cached response.
Please let me know if anyone has any ideas. i'm quite stumped.
Few ideas from my side of why its not using the cached mp3:
workbox create-react-scripts service worker either doesn't look inside my custom cache, it only looks inside its workbox-precache.
workbox create-react-scripts service worker only matches against its list of pre-cached files from the build system and any dynamically added files to the cache are ignored
when the video element requests the mp3, it sets different request headers to when my code adds it to the cache. Assuming caches.match checks headers, then the request headers don't match and its a miss.
I have a website developed in AngularJS, and index.html serves the root of the application.
All the JS and CSS versions are maintained in the index.html itself, which means for any changes to reflect to the user, "index.html" is to be reloaded at the browser.(correct me if I am wrong here).
This is a problem, since there could be chances that the user has a tab opened of our website in his browser and we have published a new release. This release will not be published at user's browser till the time a "Manual refresh" is not triggered and "index.html" is not reloaded and hence bring up the possibility that the user will not be using our latest release.
We have written a framework to reload all resources once a release is detected by sending the latest version from web-server and comparing this with the current version in the browser and trigger a reload automatically. This fix works fine, but the problem again is, how to publish this release first time to all user's browser?
I hope you get my problem? let me know otherwise.
This is not possible. There is no way to force an open page to refresh if it does not already have code to implement that feature. You will have to wait until the user refreshes it themselves, and the browser cache expires, and any intermediate caches between the user and your servers.
I recommend searching to learn about "HTTP caching" if you are not already familiar, as well as "cache busting." In general, you may want to consider making index.html a small file that references your big files in <script> tags, setting the cache control for index.html very low, and use cache busting techniques on your big files.
But for your first release, there is no way to invalidate open tabs or existing caches. If this will cause a problem with your server, read up on "API versioning" for different ways to handle it.
I have a GAE module on IntelliJ and when I after I edit the jsp files in it I can just go to the web browser, hit refresh and the changes show up. The other day I needed to access this from a different computer so I added --address=0.0.0.0 to the server parameters and after that changes to the jsp stopped showing up on the browser until I did a server restart. I removed the option and it started working again. Added it again and it stopped working, repeated several times, always the same result.
So how I can access the server from another computer yet have the ability to make changes and have those changes show up on the web browser without a server restart?
I am using an exploded war, and I have "update classes and resources" on both "on update" and "on frame deactivation".
This is with IntelliJ 13 on OSX 10.9
Thanks.
There are two ways to make iDEA update the runtime project:
Automatic via on frame deactivation, which means that IDEA updates project when you switch to another app (usually browser), i.e. when IDEA looses window focus. This works "automagically" while you test on the same computer, because you usually switch between IDEA and browser (or mobile emulator).
Manually via on update, which requires you to manually click the update button (the green circular arrows) in IDEA inside the running project pane.
I could not think of a better title, Please suggest one.
I am planning to work on a large web application. It will take time to load the full application before application starts functioning.
Suppose its something like asana.com. If you have a link to the task and you open the link. It loads the application first and then shows the detail of the task.
Note: I have added another example in update 2
I want to do just the opposite. Suppose if I try to open the link directly. It should show me the tasks details first and then load the whole application in background.
What development strategy should I follow to implement such feature. Will angular be good for this? I have worked with angular for small projects and am capable of think in angular :)
I just wanted to be pointed in right direction.
Update 1:
I am using Apache2 PHP5 in backing as ReST API. I am thinking to change to GoLang http server. But that does not matter in this context :)
Update 2:
I have not yet started working on the application, but I know that its size is going to be big and its going to take time to load the application. This will be a javascript application, all the communication to web will be done mostly by API. APIs will be fast and it wont be slowing down the application. My main concern is the javascript library and the approach to the issue that I want to display the content of the page before the application is loaded and load the application in background.
As second example: https://chrome.google.com/webstore/detail/a-journey-through-middle/gjgkjeheegjnnmheaflhdocglkiegoni?utm_source=chrome-ntp-icon
If you open this link in chrome, it will load the application and then load the specific content in a popup. I want to load the content of the popup first and then load the application in background. How should I write my application to achieve that.
My suggestion (and I say this as I start to do similar vs. having proven it successful) would be to make some level of framework fairly static so that users get an almost instant response to the site loaded and then start the angular app with something like this
angular.bootstrap(document.getElementById("container"), ["app"])
Ref for the api - https://docs.angularjs.org/api/ng/function/angular.bootstrap
Ref for a demonstration of this - https://egghead.io/lessons/angularjs-angular-bootstrap-app-init
My expectation then is that you will be able to
Load your static elements quickly (which will just have placeholders for your content/material)
Access the data you want in the order you want to get it to present on the screen
Release any other part of the app you need to chrome it up/decorate or populate side items.