Skip to content

Demo repo or tutorial #1

Closed
Closed
@tacman

Description

@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

image

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!

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentationhelp wantedExtra attention is needed

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions