Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cache Playground assets to enable offline support #1535

Open
wants to merge 48 commits into
base: add/vite-cache-paths-plugin
Choose a base branch
from

Conversation

bgrgicak
Copy link
Collaborator

@bgrgicak bgrgicak commented Jun 21, 2024

Motivation for the change, related issues

The promise of Playground is WordPress anywhere.
Playground can run in the browser without a server, but it still requires the internet on every load.

This PR adds asset caching of Playground assets and ensures they are available when offline.

Implementation details

The PHP-wasm service worker will now start the cache when initialized and clean previous versions if they exist.

On each unscoped fetch request, it will attempt to load data from the cache by using the cachedFetch method.

The WorkerCache class uses the browser cache to preload data when the service worker is installed. It also caches any other valid unscoped fetch request to speed up reloads of Playground. The isValidHostname method checks if the request should be cached.

To ensure remote assets are available while offline they are loaded during boot.
If Playground is online they will still be loaded in the background to reduce the number of server requests.

Testing Instructions (or ideally a Blueprint)

  • Follow the Test offline support instructions
  • After loading Playground in your browser turn off the server
  • Refresh the page
  • Confirm that Playground loaded
  • Browse the site, go to WP-admin, make changes...
  • It should all work as usual
  • Change the PHP or WP version and confirm it works

Note: In Chrome the offline checkbox sometimes stops working. When this happens Playground will load without remote assets and admin styles (including the admin bar) will look broken. If it happens you can confirm it by running window.navigator.onLine. To resolve it uncheck and check the Offline checkbox and reload.

TODO

  • We currently cache all PHP and WP versions on install. This is a lot of data, so we should decide if it's worth doing it, or if we should load only the current PHP and WP versions.
  • Precache runs on install and doesn't block Playground from loading, but that also means it's not clear when all cache files are downloaded.

These issues will be resolved by the redesign #1561, but we should still decide what's the best solution in the meantime.

@bgrgicak bgrgicak self-assigned this Jun 21, 2024
@bgrgicak
Copy link
Collaborator Author

Playground can now load from the cache when there is no server.

There is still an issue on the first load where some static assets aren't pulled from cache.
Also, assets are cached only on the second load.

Other TODOs:

  • Store cache with a version prefix
  • Flush cache when version changes

@bgrgicak
Copy link
Collaborator Author

#1541 adds a cache version to the Web service worker.
Once this is merged I can update this PR with cache busting and cleaning.

@bgrgicak bgrgicak mentioned this pull request Jun 27, 2024
@bgrgicak bgrgicak changed the base branch from add/wp-static-asset-zip to add/vite-cache-paths-plugin July 4, 2024 11:00
@bgrgicak bgrgicak changed the base branch from add/vite-cache-paths-plugin to update/set-startup-options-with-messages July 4, 2024 11:12
@bgrgicak bgrgicak changed the title Offline support Cache Playground assets to enable offline support Jul 4, 2024
@bgrgicak bgrgicak marked this pull request as ready for review July 4, 2024 11:20
@bgrgicak bgrgicak requested a review from a team as a code owner July 4, 2024 11:20
@bgrgicak bgrgicak marked this pull request as draft July 4, 2024 11:20
@bgrgicak bgrgicak marked this pull request as ready for review July 4, 2024 11:20
@bgrgicak bgrgicak marked this pull request as draft July 4, 2024 11:38
@bgrgicak bgrgicak mentioned this pull request Jul 4, 2024
@bgrgicak bgrgicak marked this pull request as ready for review July 5, 2024 05:40
@bgrgicak bgrgicak linked an issue Jul 5, 2024 that may be closed by this pull request
Base automatically changed from update/set-startup-options-with-messages to add/vite-cache-paths-plugin July 9, 2024 12:53
An error occurred while trying to automatically change base from update/set-startup-options-with-messages to add/vite-cache-paths-plugin July 9, 2024 12:53
Comment on lines +73 to +76
// Get the cache manifest and add all the files to the cache
const manifestResponse = await fetch('/cache-files.json');
const websiteUrls = await manifestResponse.json();
await cache.addAll([...websiteUrls, ...['/']]);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adamziel this will download all PHP and WP versions into cache.

Is this ok for v1 or should we limit it to the current WP and PHP version?
If yes, users won't be able to switch versions while offline.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would limit this for v1 to avoid adding 200-300mb of extra transfer. No switching is fine for now, we'll find the right way of downloading the missing assets and communicating that to the user as a part od the webapp redesign issue.

@bgrgicak bgrgicak requested a review from adamziel July 10, 2024 06:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

PWA doesn't load app icons Offline mode (PWA)
2 participants