Automatic Workspace folders #123
Description
Chrome has introduced a feature (currently still behind a feature-flag) to automatically discover workspace folders. What this enables is an edit-save-see-without-refreshing experience for resources like CSS files. This might be a good addition to the development server when this comes out from behind a flag.
How it works
- The development server must deliver a file
/.well-known/appspecific/com.chrome.devtools.jsonand specify the workspace's root directory in it - When the user opens the devtools, Chrome detected the folder and asks the user for consent (see below)
- After the user accepts, resources can either be edited and saved in the devtools - or, the other way around, edited and the filesystem, with changes instantly appearing in the browser (as long as the devtool window is open)
The com.chrome.devtools.json file
{
"workspace" : {
"root" : "/path/to/web/root",
"uuid" : "6e29a6df-42e1-4f39-9a1b-6af7546a8ebf"
}
}Discovery and consent
Editing experience
Proof of concept
use util\UUID;
use web\Application;
use web\handler\FilesFrom;
class Hello extends Application {
public function routes() {
$workspace= json_encode(['workspace' => [
'root' => (string)$this->environment->webroot(),
'uuid' => (string)UUID::randomUUID()
]]);
return [
'/(style.css|favicon.ico)' => new FilesFrom($this->environment->webroot()),
'/.well-known/appspecific/com.chrome.devtools.json' => function($req, $res) use($workspace) {
$res->answer(200);
$res->send($workspace, 'application/json; charset=utf-8');
},
'/' => function($req, $res) {
$res->answer(200);
$html= sprintf(<<<'HTML'
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>Hello %s</h1>
</body>
</html>
HTML,
htmlspecialchars($req->param('name', 'Guest'))
);
$res->send($html, 'text/html; charset=utf-8');
},
];
}
}See also: