Demo repo or tutorial

[tacman]

Description

Kudos -- this is very exciting! Thanks for releasing this.

I'd love to see a tutorial on how to use this to create a simple off-line app, or fetch remote data and cache it in the manifest.

Example

Here's a trivial SPA that displays the current time from javascript, and the page render time from twig (which will be fixed when offline). It uses stimulus, asset-mapper (importmap), bootstrap and bootstrap-icons, so it's got enough elements to be a real app. I have another demo app that fetches headlines that I'd like to see as a PWA, but have never figured out the manifest!

symfony new pwa-demo --webapp --php=8.2 && cd pwa-demo
composer config extra.symfony.allow-contrib true
composer req symfony/asset-mapper symfony/stimulus-bundle

bin/console importmap:require bootstrap
echo "import 'bootstrap/dist/css/bootstrap.min.css'" >> assets/app.js
bin/console importmap:require bootstrap-icons/font/bootstrap-icons.min.css
echo "import 'bootstrap-icons/font/bootstrap-icons.min.css'" >> assets/app.js

bin/console make:controller AppController
sed -i "s|Route('/app'|Route('/'|" src/Controller/AppController.php
sed -i "s|'app_app'|'app_homepage'|" src/Controller/AppController.php

cat > templates/app/index.html.twig <<END
{% extends 'base.html.twig' %}
{% block body %}
<div class="container">
<span class="bi bi-clock h1"></span>
<div {{ stimulus_controller('epoch') }}></div>

        <div class="text text-muted">
            created from {{ _self }} on {{ 'now'|date('U') }}
        </div>
    <a class="btn btn-primary">
        <span class="bi bi-download"></span>
        Install as PWA</a>
    </div>
{% endblock %}
END

cat > assets/controllers/epoch_controller.js <<END
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
    connect() {
        this.element.textContent = "epoch time is now " +  Date.now();
    }
}
END

symfony server:start -d
symfony open:local

composer config minimum-stability dev
composer require --dev spomky-labs/phpwa

So what I'd love to see is the next steps to create the manifest and such and run this offline.

Again, thanks for putting this together and making it available!

[Spomky]

Hi,

I am happy this bundle will help many people. Please note that it is very young and not stable at the moment.

I'd love to see a tutorial on how to use this to create a simple off-line app, or fetch remote data and cache it in the manifest. I hope I will be able to talk about it during the Symfony Live 2024 in Paris. But yes, it's definitively a good idea to have a tutorial for it. I'll keep it open until the job is done. Thanks.

[tacman]

Thanks. I'm happy to help with testing and some sample repos.

On Wed, Jan 10, 2024 at 7:35 AM Florent Morselli @.***> wrote:

Hi,

I am happy this bundle will help many people. Please note that it is very young and not stable at the moment.

I'd love to see a tutorial on how to use this to create a simple off-line app, or fetch remote data and cache it in the manifest. I hope I will be able to talk about it during the Symfony Live 2024 in Paris. But yes, it's definitively a good idea to have a tutorial for it. I'll keep it open until the job is done. Thanks.

— Reply to this email directly, view it on GitHub https://github.com/Spomky-Labs/phpwa-demo/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEXIQPFLGBKLY2BACNAPJ3YN2KL5AVCNFSM6AAAAABBUYYTFWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBUHA3DIMJZGI . You are receiving this because you authored the thread.Message ID: @.***>

[Spomky]

I thought about it again and this app is a bit too simple and doesn't allow to test all the capabilities that PWAs offer. I tell myself that a weather-type application would be more interesting with caching strategies:

• Current weather on the home page (Online First strategy)
• Forecast page (Stale-While-Revalidate strategy)

This would make it possible, for example, to create:

• Last known weather forecast (with warning sign if offline)
• Shortcut to forecast page
• Windows widget with current weather

[Spomky]

Hi,

The way it works is now satisfactory (to my POV). I use Symfony UX as sandbox and it looks good (https://github.com/symfony/ux/pull/1350). There are few things to fix regarding the offline mode, but could be done as the demo application progresses. The README page is up to date. Let me know if you have any comment, suggestion or anything else.

I'll keep this issue open until the demo is done. Regards.

[tacman]

I don't quite follow. Can you create a separate repo for the demo?

I'm quite excited to see the conversation on UX Symfony. I'm certain there's a way to tie in AssetMapper.

[tacman]

So I've installed the bundle and tweaked my demo app to include the web manifest, and that seems to be working.

So now I'm trying to follow along with the README to install the service worker and icons, but please! provide a demo repo with the final result of everything you've done in the README.

Sure, a weather app would be more complete and "real world", but really just a hello world app that runs offline would be a great start.

I would move the :compile section down to the bottom and specify that it's only for deploying to production. Too often (I'm speaking for myself here), developers go through a tutorial by cutting and pasting the instructions. That command will burn you in the dev environment.

[tacman]

I started to set up the weather app (API Key and basic call), but it OpenWeather requires lat/long and I was too lazy to make 2 calls.

I think the demo app should instead display HackerNews. There's already a bunch of PWA clients in different frameworks at https://hnpwa.com/, but none for Symfony. Plus, you can leverage best practices and such from existing clients. The cool part about your bundle is the integration with Symfony.

[Spomky]

So now I'm trying to follow along with the README to install the service worker and icons, but please! provide a demo repo with the final result of everything you've done in the README.

This is the top item of my TODO list.

Sure, a weather app would be more complete and "real world", but really just a hello world app that runs offline would be a great start.

Indeed. It always starts with a "Hello World"

I would move the :compile section down to the bottom and specify that it's only for deploying to production. Too often (I'm speaking for myself here), developers go through a tutorial by cutting and pasting the instructions. That command will burn you in the dev environment.

I agree. This should be the last step of the documentation. When it will be really stable, I will use Gitbook instead of the README file.

I think the demo app should instead display HackerNews. There's already a bunch of PWA clients in different frameworks at https://hnpwa.com/, but none for Symfony. Plus, you can leverage best practices and such from existing clients. The cool part about your bundle is the integration with Symfony.

That's a very nice idea! Let me a moment and I will push the first bricks of this app.

[tacman]

Drat, the HNPWA project appears to be abandoned/archived.

BUT there are still some working projects with other frameworks. In particular, the one I see as "closest" to a Symfony-powered PWA is the one based on Vue: https://anubhav7495.github.io/hnpwa-vue/#/newest (not sure where the source code is for this though).

Because Vue requires a build step, I'm more inclined to use Stimulus and whatever else we can from Symfony UX.

Fortunately, the Vue part of that app is pretty trivial. We could also use HTMX and mustache, but really anything that doesn't require a build step. I've been using twigjs and quite like it, but this application is so simple that we don't need a templating library.

The key URLs come from https://node-hnapi.herokuapp.com/ e.g.

• https://node-hnapi.herokuapp.com/newest?page=1
• https://node-hnapi.herokuapp.com/new?page=1
• https://node-hnapi.herokuapp.com/jobs?page=1

[tacman]

ping...

I know your talk is in a month, so I imagine you'll have a demo in place well before that. Happy to help test.

I saw this article and thought it was interesting. Not a great design practice, but the idea of using importmaps in web workers is so appealing that maybe it's worth the overhead.

https://github.com/environment-safe/esm-worker

If you have any apps, even if it's not a demo app, that use your bundle can you provide a link to the repo?

[Spomky]

Basic demo in progress