Custom DataCollector / Debug Toolbar

[tacman]

I'd like to know more about the PWA and specifically the page, without going to /sw.js. The debug toolbar is a perfect place for that.

We could even have the debug toolbar change with the online/offline status.

The idea of using an Attribute to indicated caching strategy means that there will be several ways to configure routes to be cached. The debug toolbar could say which caching strategy would be used if it were a PWA.

As far as the manifest goes, we could also display the name, shortname, description, and maybe even the smaller icons, orientation, etc.

What else would we want in the debug toolbar?

[tacman]

I almost have the wiring done for this. Is there a service I can inject to get the caching strategy for a particular route?

That is, $this->somePwaService->getCacheStrategy('app_homepage') would return CacheThenNetwork (or whatever)?

[Spomky]

The Service Worker object is a service. It contains a Workbox properties that is used to create JS caching rules.
The Workbox object seems to be the right place to add custom cache rules, at the same level of the other rules (Page, Fonts...)

[tacman]

I added an attribute and compiler pass to the survos/pwa-extra-bundle

<?php

namespace App\Controller;

use Survos\PwaExtraBundle\Attribute\PwaExtra;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

#[PwaExtra(cacheStrategy: 'CacheOnly')]
class AppController extends AbstractController
{
    #[Route('/', name: 'app_homepage')]
    #[Route('/index', name: 'app_index')] // not sure why the manifest can't start on /
    public function home(): Response
    {
        return $this->render('noise-index.html.twig', [
        ]);
    }

    #[Route('/about', name: 'app_about')] // not sure why the manifest can't start on /'#[PwaExtra(cacheStrategy: 'CacheOnly')]
    #[PwaExtra(cacheStrategy: 'CacheThenNetwork')]
    public function about(): Response
    {
        return $this->render('about.html.twig', [
        ]);
    }
    #[Route('/howler', name: 'app_howler')] // not sure why the manifest can't start on /
    public function howler(): Response
    {
        return $this->render('howler.html.twig', [
        ]);
    }

}

If you're in dev, there's a toolbar item that shows the caching strategy according to the Attribute.

BUT it doesn't work yet, it's just the structure, it needs to be integrated with the actual pwa-bundle

[Spomky]

Yes a toolbar could be really great.
For the Manifest, some porperties are required by browser to "install" the app. The toolbar may highlight the required/missing ones.
I coult also show the JSON file when compiled.

[tacman]

Where is the compiled json? site.manifest is dynamically generated, right, but is there a json cache somewhere?

[Spomky]

There is no cache in dev env.
When the browser calls /site.webmanifest the Manifest file is serialized and served directly.

In production, the command asset-map:compile sends an event. This event is catched and trigger the compiler. The real file is computed.
Same for the service worker.

[tacman]

/site.webmanifest the Manifest file is serialized and served directly.

What service creates sw.js and the manifest, and can it be injected? Where in the code is that?

[Spomky]

The Manifest is an object that is simply serialized: https://github.com/Spomky-Labs/pwa-bundle/blob/1.1.x/src/Subscriber/AssetsCompileEventListener.php#L43L48
For the Service Worker, that's the job of the ServiceWorkerCompiler. The event subscriber calls it: https://github.com/Spomky-Labs/pwa-bundle/blob/1.1.x/src/Subscriber/ServiceWorkerCompileEventListener.php#L38L42

In dev env, the files are provided on-demand: https://github.com/Spomky-Labs/pwa-bundle/blob/1.1.x/src/Subscriber/PwaDevServerSubscriber.php#L76L91

[tacman]

Check out my branch of the demo with a debug toolbar installed!

git clone [email protected]:tacman/phpwa-demo && cd phpwa-demo
git checkout tac
composer install
echo "DATABASE_URL=sqlite:///%kernel.project_dir%/var/data.db" > .env.local
bin/console doctrine:schema:update --force --complete
bin/console tailwind:build
symfony server:start -d
symfony open:local

And you'll see the PWA debug toolbar.

Feedback welcome, especially if there's more / better data to show.

And @Spomky , whenever you think it's appropriate, let's move the toolbar stuff into the main bundle. I did some of the grunt work to set this up, and I hope it's helpful, but you'd be better at adding the substance. Of course, I'm happy to continue to help, but it'd be great if the toolbar made it into 1.1 and was available for your talk later this month.

[tacman]

I added the actual urls in the cache, not just the pre-cached ones and the pattern. The collector gets the data from the Cache Storage.

That means at any point you can see exactly what's in the cache and what would be available if app goes offline. Hopefully this will be helpful to someone configuring the cache.

It still needs to be cleaned up, maybe highlighting the pre-cached items, or putting all the urls in one page with different colors for the cache. But at least I'm finally able to see what's in the cache!