Comments (14)
Can we supply a custom UI to refresh and get new content instead of default one?
Yes. I'll provide the ability on the NuGet package library I'm going to publish to customize UI fully.
from blazorwasmprerendering.build.
This behavior is by design on the service-woker.js
generated by .NET SDK (Visual Studio) standard project templates.
You should close all browser instances after a new version of your Blazor Wasm PWA was fetched in the background to see a new version's contents.
The official documentation is here:
P.S.
In fact, this issue is not related to the "BlazorWasmPreRendering.Build" package at all. It is not related to pre-rendering too. You should ask about this theme elsewhere, such as StakcOverflow.com. Please consider well it is suitable for posting this GitHub repository's issue thread.
from blazorwasmprerendering.build.
I'm trying to debug by logging console.log((new URL(event.request.url)).pathname);
and see if this will log the route entered in address bar. But it logs all the paths of static assets.
Do we need to try something like below?
const request = shouldServeIndexHtml
? (new URL(event.request.url)).pathname === '' ? 'index.html' : (new URL(event.request.url)).pathname.replace(/\/$/, '') + '/index.html'
: event.request;
This way index.html will forced to reload?
Please correct me if I'm wrong.
from blazorwasmprerendering.build.
@fingers10
Sorry for the late reply, but I've spent time these days investigating how to control refreshing a PWA to the next version.
see if this will log the route entered in address bar. But it logs all the paths of static assets.
The above behavior is definitely no wonder. Please remember that service worker processes are like a proxy server inside a web browser. It is a process like a proxy, so it is obvious that a service worker intercepts all HTTP requests, such as static assets.
That is why your logging logs not only the path you entered in an address bar but also all static contents.
Do we need to try something like below?
This way index.html will forced to reload?
The answer is no. What you consider to try is not make sense. Because the JavaScript code which you are going to modify is the part of responding to an HTTP GET request with a fallback page (like a app.MapFallbak("index.html")
on an ASP.NET Core host for Blazor WebAssembly).
Whether the contents a web browser will fetch will be provided from the cache or not depends on the JavaScript code await cache.match(request)
.
However, don't try to modify the code around await cache.match(request)
in a hurry.
There is a deep reason why the service worker and its offline cache will never update until all browser tabs that open it are closed. I can t explain it now because there is not enough time to do that, but the keyword is "atomic". If you break this offline strategy by changing the above code, you and your site users will see confused site content mixed up with new and old versions.
All we can do to update your PWA site as soon as a newer version is detected is the following strategy.
"Notify a new version is available for site users via a user interface such as snack bar, and reload the page by user's action such as clicking the "update now" button you provided as UI elements."
I'll explain how to implement the above strategy as a specific code, but please give me a few more days or a week. The PoC sample code is almost done on my hand. I have to spend time validating and refining that sample code.
Thank you for your patience.
from blazorwasmprerendering.build.
I implemented a sample code.
Step.1 Copy the files in the "BlazorPWA2.zip" below into your Blazor WebAssembly project.
- Components/UpdatePWA.razor
- Components/UpdatePWA.razor.css
- wwwroot/blazor-pwa-updater.js
Step.2 Add the <UpdatePWA/>
component into your MainLayout.razor
.
Step.3 Change your index.html
as below.
...
<!--
Remove the line "<script>navigator.serviceWorker.register('service-worker.js');</script>",
and insert the line below instead.
-->
<script src="blazor-pwa-updater.js" data-script-path="service-worker.js"></script>
</body>
...
Step.4 Add one line below to the top of your wwwroot/service-worker.published.js
.
self.addEventListener('message', event => { if (event.data?.type === 'SKIP_WAITING') self.skipWaiting() });
...
Then you can get the behavior like the following animation GIF picture.
Would you try to apply these changes to your app?
P.S.
I'm also considering creating and publishing a NuGet package encapsulating the code modifications above.
from blazorwasmprerendering.build.
@jsakamoto , I tried the above steps with sample pwa app and published to https://fingers10.github.io/WasmServerPrerender/ but I'm not able to see the changes and update button. New changes are visible only when I press Ctrl+F5
.
Steps I tried:
- Added the changes mentioned in above step and committed and published to github pages.
- Made a change in
Index.razor
and committed and published to above URL. - Now when I navigate to https://fingers10.github.io/WasmServerPrerender/ I'm not able to see new changes.
- When I press
Ctrl+F5
, I can see new changes getting reflected. But not able to see update button.
Please can you assist?
from blazorwasmprerendering.build.
@fingers10
I verified it works fine.
- I forked your repository. (The repository is here.)
- I deployed the forked version to GitHub Pages.
- I opened that forked version's GitHub Pages by my Microsoft Edge web browser.
- I changed the
Index.razor
of the forked version, committed, and pushed it. - The GitHub Actions workflow built it and deployed it.
- After that, I opened that forked version's GitHub Pages by another window of my Microsoft Edge web browser.
- Then, I saw the "The new version is ready" message on it. I clicked the "YES" button, then the page reloaded, and I could see the contents of the changed
Index.razor
.
Do you remember that the PWA won't be updated to the new version without closing all browser windows by default?
I guess your PWA's new version that is bundled with the "The new version had been ready" UI feature is ready in the background. But you had not closed all browser windows, so you could not see the next version of your PWA, and the current version of PWA you would see doesn't have the ability to show the "The new version had been ready" UI feature.
Can you understand?
I recommend retrying it after closing all browser windows once.
from blazorwasmprerendering.build.
@jsakamoto Yeah I also noticed the update message. Looks like issue is sporadic. I'll do another round of testing to make sure if something else is wrong.
from blazorwasmprerendering.build.
@fingers10
One of the other factors we have to notice is that new contents deployed to GitHub Pages will not be able to download from a browser immediately. It will take a few seconds or minutes to be all new contents replicated to all CDN endpoints of GitHub Pages.
Another one is the "The new version is ready" indicator will be shown only when after all updated contents are downloaded correctly in background. It was not when a browser detected the new version.
The above factors mean sometimes it will take much longer than our expectation until the "The new version is ready" indicator has appeared.
I hope these knowledges are helpful for you.
from blazorwasmprerendering.build.
@fingers10
[FYI] The "Blazor PWA Updater" NuGet package has been rolled out!
https://twitter.com/jsakamoto/status/1558456715237986309
from blazorwasmprerendering.build.
@jsakamoto can we connect and work together on this? I would like to learn and understand a lot from you. I would like to learn on how you think when solving these problem. The way you approach the solution. This could open the doors for me to think in new ways or get myself exposed to new learning
from blazorwasmprerendering.build.
I tried closing and opening browser window with the same repo. But not working for me.
Steps I tried,
- Made a change and published. This will prerender after publish.
- Opened the published site in normal window. No Change.
- Closed the window and opened again. No Change.
- Tried opening in Incognito window. Changes reflected.
- Again opened in normal window. No Change.
Every time I closed and opened the chrome browser.
I also installed the site as PWA. When I close the PWA and open I didn't see yes button but the contents are updated.
PWA.Not.Reloading.Issue.mp4
from blazorwasmprerendering.build.
@fingers10
I opened the URL https://fingers10.github.io/WasmServerPrerender/
again right now, then I saw the "The new version is ready" message as expectedly.
And I clicked the "Yes" button, then the page was reloaded, and the page was settled.
Everything looks well work for me for now.
If your browser still shows no-changes contents "Welcome to your new app" message, could you take a screenshot of your browser's developer tools window like below? (The "Application" Tab > "Service Workers" section)
from blazorwasmprerendering.build.
@jsakamoto I have a suggestion if this is going to be published as nuget package. Can we supply a custom UI to refresh and get new content instead of default one?
from blazorwasmprerendering.build.
Related Issues (20)
- Publish fails when blazor app uses BlazorWasmAntivirusProtection Nuget in the project HOT 22
- publish and deploy by action from github - Oryx has failed to build the solution. HOT 25
- routing behaviour on published prerendered wasm project: not loading the prerendered page HOT 12
- issues with google index HOT 4
- Prerendered mode and static .html files not working properly HOT 23
- BlazorWasmPrerenderingUrlPathToExplicitFetch - alternative suggestion HOT 19
- Cannot be deployed to netlify
- Add support for .NET 8 HOT 5
- Build fails when building blazor wasm in AWS Amplify app HOT 5
- Pre-rendered contents have invalid formatted void elements with a trailing slash HOT 1
- Duplicate conflicting <title>, <meta descripiton=""> and schema.org components HOT 1
- BlazorWasmAntivirus Support is needed after .NET 8? HOT 2
- Publish failed with Visual Studio Publish HOT 5
- Runtime render exception [TypeError: Cannot read properties of null (reading 'insertBefore')] after deploying HOT 3
- Web worker compatibility issue HOT 7
- Google Crawler could not recognize the pre-rendered header elements - something is still strange HOT 2
- Visual Studio Publish results in 404 error for images in webp format HOT 4
- Support for .NET 8 .wasm Lazy Loaded Assemblies HOT 6
- After .NET 8 update appsettings.json.br not found after publishing to github pages HOT 3
- Blazor WASM getting 404 after pre-rendered HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blazorwasmprerendering.build.