Project Scoping: Offline Support #1600

bgrgicak · 2024-07-11T12:40:58Z

Start date: June 18th 2024
ETA: July 22nd 2024

Updates: Weekly

Status: In progress

bgrgicak · 2024-07-12T06:12:15Z

projects/in-progress/2024-07-11-offline-support.md

+
+-   [x] [PWA support](https://github.com/WordPress/wordpress-playground/pull/1086)
+-   [ ] [Backfill remote WordPress assets](https://github.com/WordPress/wordpress-playground/pull/1532)
+-   [ ] Backfill Playground assets


There are two ways assets can be backfilled.

When the site requests an asset we can cache it using a service worker.

We can cache files from a static list when the Playground boots.

When the site requests an asset we can cache it using a service worker.

This method is preferred because it avoids maintaining a list of files to download.
The challenge is that it can start only after the service worker loads.

To start loading data as early as possible we will move registerServiceWorker to run before spawnPHPWorkerThread in packages/playground/remote/src/lib/boot-playground-remote.ts.

We can cache files from a static list when the Playground boots.

This could happen at the same time when we download WordPress assets.

To start loading data as early as possible we will move registerServiceWorker to run before spawnPHPWorkerThread in packages/playground/remote/src/lib/boot-playground-remote.ts.

I did this in #1606 and can confirm that it will allow us to load WordPress and PHP assets without backfilling. This will make the implementation simpler because the backfill script won't need to know what's the current PHP and WP version.

Most other items will need to be backfilled.

Here is an example of how items load with #1606

First load

/favicon.ico
/worker-thread-5bd5ae4a.js
/assets/sqlite-database-integration-fd6f4063.zip
/assets/wp-6.5-264f1631.zip
/assets/php_8_0-a8925787.js
/assets/php_8_0-3584e351.wasm
/src/fonts/1258fcda79d43bef/inter_Inter-Regular.woff
/src/fonts/f86c32ba0f42a842/inter_Inter-SemiBold.woff
/src/fonts/8efb053b450b4a72/inter_Inter-Medium.woff
/src/fonts/62c967bbd6d11106/inter_Inter-Light.woff
/avatar/e6d67fed862c439aa6e911ce49c7857d

Second load

Cache miss

/gtag/js
/assets/index-9b5e396e.js
/assets/modulepreload-polyfill-3cfb730f.js
/assets/preload-helper-cf010ec4.js
/assets/index-d60708af.css
/assets/main-7bf730a2.css
/g/collect
/remote.html
/assets/wordpress-c3703a25.js
/assets/remote-b5d5f2da.css

Cache hit

/favicon.ico
/worker-thread-5bd5ae4a.js
/assets/sqlite-database-integration-fd6f4063.zip
/assets/wp-6.5-264f1631.zip
/assets/php_8_0-a8925787.js
/assets/php_8_0-3584e351.wasm
/src/fonts/1258fcda79d43bef/inter_Inter-Regular.woff
/src/fonts/f86c32ba0f42a842/inter_Inter-SemiBold.woff
/src/fonts/8efb053b450b4a72/inter_Inter-Medium.woff
/src/fonts/62c967bbd6d11106/inter_Inter-Light.woff
/avatar/e6d67fed862c439aa6e911ce49c7857d
/g/collect

projects/in-progress/2024-07-11-offline-support.md

[For offline support](#1600) we need to load the service worker as early as possible in the boot process. Booting early will allow fetch caching to cache more files on the first making the backfill of assets simpler. Read the full research recap here #1600 (review) ## Implementation details To move `registerServiceWorker` to the start of the boot process we had to generate the scope in `bootPlaygroundRemote` and pass it to the PHP worker thread together with other startup options. The service worker had to be registered before spawning the PHP worker thread to ensure WP and PHP assets were cached. But the service worker also depends on the `phpApi` returned by `spawnPHPWorkerThread`. We had to register the service worker first, after that, spawn the PHP worker thread, and then set the `phpApi`. This PR also includes changes from #1574 because they allow us to pass the scope. ## Testing Instructions (or ideally a Blueprint) - Ensure all tests pass --------- Co-authored-by: Adam Zieliński <adam@adamziel.com>

[Playground will soon be able to work offline](#1600), but some features like GitHub exports still require internet to work. When offline users shouldn't be able to: - Change PHP versions - Change WordPress versions - Enable networking - Change if extensions are loaded or not - Export to GitHub - Import from GitHub - Report error Some of these might get offline support in the future, but they won't be available in v1. ## Implementation details The `PlaygroundReduxState` store now has a `offline` selector. This selector is used by the _Customize Playground_ form and the menu to disable buttons for functionalities that don't work offline. ## Testing Instructions (or ideally a Blueprint) - Checkout this branch - Open Playground http://127.0.0.1:5400/website-server/ - Go offline (in Chrome Dev Tools > Application > Service Worker > Offline checkbox) - Open the _Customize Playground_ - Confirm that these features are disabled - Change PHP versions - Change WordPress versions - Enable networking - Change if extensions are loaded or not - Open the menu (upper right corner) - Confirm that these features are disabled - Export to GitHub - Import from GitHub - Report error ![Screenshot 2024-07-12 at 13 55 19](https://github.com/user-attachments/assets/8a5f174e-22e2-409d-9fd4-a2209f71bbb9) ![Screenshot 2024-07-12 at 13 55 26](https://github.com/user-attachments/assets/11cfccd3-ff55-41df-b478-5a506b85cb81) --------- Co-authored-by: Adam Zieliński <adam@adamziel.com>

bgrgicak · 2024-07-16T10:47:39Z

Progress update July 16th

All offline mode dependencies are now merged and I'm wrapping up Cache Playground assets to enable offline support.

I noticed that manifest.json is broken, so I added a fix for manifest.json URLs.

I will work on E2E tests once #1615 and #1535 are merged.

bgrgicak · 2024-07-17T08:48:21Z

@brandonpayton @adamziel how do you feel about moving project discussions to https://make.wordpress.org/playground/?

adamziel · 2024-07-29T13:05:28Z

@bgrgicak Makes sense to me, although, other than the Firefox issue and a few tactical todos, this project seems to be shipped now? It would still make sense to write an announcement post on that make blog. Would you please draft one for core contributors to review, since you were the one leading this?

bgrgicak · 2024-07-30T06:38:14Z

Makes sense to me, although, other than the Firefox issue and a few tactical todos, this project seems to be shipped now?

Yes, it's done now, we don't need to post a project scoping post.
I also ended up using discussions for scoping of the web app project.

bgrgicak · 2024-07-30T07:16:29Z

Would you please draft one for core contributors to review, since you were the one leading this?

@adamziel who should I ask for a review?

I have a draft, but I'm unsure about the format because this is the first post.

The post is short and doesn't include technical details. I also wanted to mention technical limitations to ensure it's clear what's possible.

bgrgicak · 2024-07-30T07:18:14Z

@adamziel should we merge this PR (after I update the document), or should we drop it?

Initially, I thought the project file could be useful to have in the codebase, but we documented everything in the code and I don't think that we need it.

adamziel · 2024-07-30T17:02:03Z

@bgrgicak that draft is a great start! Here's two things I'm missing:

Why is installing a PWA useful?
A short video demonstrating Playground loading when offline

Also, I'm not sure what does it mean that PWA uses the current URL to install the app, or what are the settings in this paragraph:

When installing Playground as a PWA, it will use the current URL to install the app. This means that every time you open the Playground app on your device it will start with the settings from that URL. You can change the settings inside the app after it starts, but the settings will be restarted the next time you open the app.

Is this a general limitation of PWAs? If yes, then perhaps we can skip it. If it's specific to Playground, let's explain why does this matter, what's the annoyance/limitation for the user.

Also cc @brandonpayton and @bph for thoughts and reviews.

adamziel · 2024-07-30T17:04:20Z

Should we merge this PR (after I update the document), or should we drop it?

Dropping it sounds reasonable. Using markdown for scoping discussions sounded like a good avenue to explore, but it seems like the user experience is not that great and GitHub discussions would be more helpful.

bgrgicak · 2024-08-06T07:28:03Z

We published Introducing Offline Mode and PWA Support for WordPress Playground on Make.

Offline support project

3395952

adamziel changed the title ~~Offline support project~~ Scoping: Offline support project Jul 11, 2024

adamziel changed the title ~~Scoping: Offline support project~~ Project Scoping: Offline Support Jul 11, 2024

adamziel marked this pull request as ready for review July 11, 2024 12:41

Remove header

f6e068a

bgrgicak self-assigned this Jul 12, 2024

bgrgicak requested a review from a team July 12, 2024 04:50

bgrgicak mentioned this pull request Jul 12, 2024

Offline mode (PWA) #133

Closed

bgrgicak added the [Type] Exploration An exploration that may or may not result in mergable code label Jul 12, 2024

bgrgicak commented Jul 12, 2024

View reviewed changes

bgrgicak mentioned this pull request Jul 12, 2024

Register service worker before spawning the worker thread #1606

Merged

bgrgicak commented Jul 12, 2024

View reviewed changes

projects/in-progress/2024-07-11-offline-support.md Outdated Show resolved Hide resolved

bgrgicak mentioned this pull request Jul 12, 2024

Disable website features that don't work while offline #1607

Merged

bgrgicak commented Jul 12, 2024

View reviewed changes

projects/in-progress/2024-07-11-offline-support.md Outdated Show resolved Hide resolved

bgrgicak added 2 commits July 12, 2024 14:13

Update projects/in-progress/2024-07-11-offline-support.md

ed237e1

Update projects/in-progress/2024-07-11-offline-support.md

2d32a2a

Update progress

fa385f1

bgrgicak closed this Jul 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Project Scoping: Offline Support #1600

Project Scoping: Offline Support #1600

bgrgicak commented Jul 11, 2024 •

edited

Loading

bgrgicak Jul 12, 2024

bgrgicak Jul 12, 2024

bgrgicak commented Jul 16, 2024 •

edited

Loading

bgrgicak commented Jul 17, 2024

adamziel commented Jul 29, 2024 •

edited

Loading

bgrgicak commented Jul 30, 2024

bgrgicak commented Jul 30, 2024

bgrgicak commented Jul 30, 2024

adamziel commented Jul 30, 2024 •

edited

Loading

adamziel commented Jul 30, 2024

bgrgicak commented Aug 6, 2024

Project Scoping: Offline Support #1600

Project Scoping: Offline Support #1600

Conversation

bgrgicak commented Jul 11, 2024 • edited Loading

bgrgicak Jul 12, 2024

Choose a reason for hiding this comment

When the site requests an asset we can cache it using a service worker.

We can cache files from a static list when the Playground boots.

bgrgicak Jul 12, 2024

Choose a reason for hiding this comment

First load

Second load

Cache miss

Cache hit

bgrgicak commented Jul 16, 2024 • edited Loading

Progress update July 16th

bgrgicak commented Jul 17, 2024

adamziel commented Jul 29, 2024 • edited Loading

bgrgicak commented Jul 30, 2024

bgrgicak commented Jul 30, 2024

bgrgicak commented Jul 30, 2024

adamziel commented Jul 30, 2024 • edited Loading

adamziel commented Jul 30, 2024

bgrgicak commented Aug 6, 2024

bgrgicak commented Jul 11, 2024 •

edited

Loading

bgrgicak commented Jul 16, 2024 •

edited

Loading

adamziel commented Jul 29, 2024 •

edited

Loading

adamziel commented Jul 30, 2024 •

edited

Loading