survos/pwa-extra-bundle

针对 https://github.com/Spomky-Labs/phpwa 的额外工具

资助包维护!
kbond

安装次数: 401

依赖者: 0

建议者: 0

安全: 0

星星: 0

关注者: 4

分支: 0

开放问题: 0

类型:symfony-bundle

1.5.340 2024-09-24 13:44 UTC

README

这个包是为了改进 https://github.com/Spomky-Labs/phpwa 的想法的游乐场。

想法是,在这些工具开发完成后,它们将被整合到核心包中,这个包就不再需要了。

额外功能

在生成初始配置之前,生成图标。是的,这有点麻烦,但这是清单的要求。清单是离线运行所必需的。

composer req symfony/ux-twig-component
<twig:PwaInstall>
    <twig:block name="launch">
        Lauch button here...
    </twig:block>
    <twig:block name="install">
        <twig:button variant="success">
            Install as PWA
        </twig:Button>

    </twig:block>
</twig:PwaInstall>

要生成初始PWA Yaml配置,运行

bin/console survos:pwa:config

创建截图!

composer req symfony/mime symfony/filesystem symfony/panther
composer require --dev dbrekelmans/bdi
vendor/bin/bdi detect drivers
symfony server:status
bin/console pwa:create:screenshot https://127.0.0.1:8001/ -o homepage

简单安装

symfony new pwa-demo --webapp --php=8.2 && cd pwa-demo
composer config extra.symfony.allow-contrib true
composer config minimum-stability dev
composer require spomky-labs/pwa-bundle:1.2.x

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>cd 
    </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

将现有PWA转换为Symfony

https://github.com/tacman/tutorial-pwa-capture-camera https://github.com/JoseJPR/tutorial-pwa-capture-audio#readme https://github.com/thecodearcher/PWA-currency-converter https://github.com/SalahHamza/currency-converter-pwa```

值得一读

https://www.educative.io/answers/how-to-do-offline-data-sync-in-pwa https://dexie.org/docs/Tutorial/