Workbox advanced recipes #5493
Workbox advanced recipes #5493
Conversation
|
👍 |
|
|
||
| {% include "web/tools/workbox/_shared/alpha.html" %} | ||
|
|
||
| ## Offer a page reload for users |
There was a problem hiding this comment.
My gut is that we should link to https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68 instead of including a recipe inline, because there are a number of different considerations and tradeoffs that that post does a good job of explaining.
If you'd prefer to include the same code inline rather than linking out then I could offer some line-by-line feedback, but I'll hold off until we decide.
|
|
||
| To do this in Workbox you can use the `handle()` method on strategy to make | ||
| a custom handler function. | ||
|
|
There was a problem hiding this comment.
Can you include a note here that the developers should ensure FALLBACK_IMAGE_URL is already cached, presumable via the precache manifest?
|
👍 |
|
👍 |
| const container = document.querySelector('.new-sw'); | ||
| container.style.display = 'block'; | ||
|
|
||
| const button = document.querySelector('button'); |
There was a problem hiding this comment.
Can you switch this to container.querySelector('button'), as it's less likely to pick up a random <button> element used elsewhere on the page?
|
|
||
| To do this you'll need to add some code to your page and to your service worker. | ||
|
|
||
| **Add to your page** |
There was a problem hiding this comment.
The actual HTML will obviously vary, especially if the page is using a framework of some sort, but I think it would help to at least a representative sample of what kind of HTML the JavaScript assumes:
<div class="new-sw" style="display: none">
<span>Updated content is available.</span>
<button>Refresh</button>
</div>
| button.addEventListener('click', () => { | ||
| button.disabled = true; | ||
|
|
||
| registration.waiting.postMessage('force-activate'); |
There was a problem hiding this comment.
It's worth checking registration.waiting !== null here before calling .postMessage(), just in case something happened out-of-band to cause registration.waiting to go away.
| **Add to your page** | ||
|
|
||
| ```javascript | ||
| const showRefreshUI = (registration) => { |
There was a problem hiding this comment.
I tend to avoid arrow functions and const in code that's meant to run inside of a window context, as it breaks parsing the JS in older browsers, and not everyone transpiles.
| This will receive a the 'force-activate' message and call `skipWaiting()` and | ||
| `clients.claim()` so that the service worker activates immediately and controls | ||
| all of the currently open windows, which in turn results in the ` | ||
| controllerchange` event firing causing the windows to reload. |
There was a problem hiding this comment.
It's the message event, not the controllerchange event, that causes the windows to reload themselves.
|
👍 |
Advanced Recipes for docs