Be more specific saying that a PWA is installable

[davidromani]

Maybe if someone arrived to this bundle is not so obvious that when we talk about doing a web app built with Symfony installable, may be needs to be more precise saying that it's only installable for the mobile device browsers (aka smatphones or tablets).

If you try to do a PWA installation with a desktop browser the whole process it doesn't works, maybe it seems to obvious, or maybe not... In my opinion is better to write in the documentation this subtle information.

[Spomky]

It can be installed on desktop browser. Safari is the only exception and things are "complicated".
I will write the missing section

[tacman]

Go to https://noise.survos.com -- it can be installed on the desktop. (Work in progress, it's a test project for a bootstrap-based PWA).

Repo at https://github.com/survos-sites/noise

My goal is to make it work at a 100% standalone app after installation.

[davidromani]

I've tried to install with Safari, Firefox & Chorme (both of them with desktop versions) on my macOS and never seen the button to install.

I've cheched my manifest.json and it seems to be ok. I've remove caches from Symfony & browser too and I'm not trying to install from a private (incognito) browser window.

[Spomky]

You don't have anything like in here?

[davidromani]

No 🤷‍♂️

[davidromani]

@Spomky would you like to see my manifest file?

[Spomky]

Yes please. Or go to the debug window and capture the application warnings.
To be installed, some properties are mandatory. Maybe one is missing or invalid

[davidromani]

All this code has been applied into a brand new Symfony demo clone (v2.5.1) only for testing purpouses:

# config/packages/pwa.yaml
pwa:
    manifest:
        enabled: true
        id: '/'
        scope: '/'
        name: 'Symfony Demo PWA'
        short_name: 'SF PWA'
        start_url: '/ca'     # 'ca' Catalan is my default locale
        display: 'standalone'
        background_color: '#ffffff'
        theme_color: '#4285f4'
    serviceworker:
        enabled: true
        src: 'sw.js'
        workbox:
            enabled: true

<!DOCTYPE html>
<html lang="{{ app.request.locale }}">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta name="view-transition" content="same-origin" />
        <title>{% block title %}Symfony Demo application{% endblock %}</title>
        <link rel="alternate" type="application/rss+xml" title="{{ 'rss.title'|trans }}" href="{{ path('blog_rss') }}">
        {% block stylesheets %}{% endblock %}
        {% block javascripts %}
            {% block importmap %}{{ importmap('app') }}{% endblock %}
        {% endblock %}
        <link rel="shortcut icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
        {{ pwa() }} {# here, before close the head node, is where I've put the PWA bundle Twig command #}
    </head>
    <body id="{% block body_id %}{% endblock %}">
        ...

$ composer show spomky-labs/pwa-bundle
name     : spomky-labs/pwa-bundle
descrip. : Progressive Web App Manifest Generator Bundle for Symfony.
keywords : bundle, pwa, symfony
versions : * 1.0.5

# /site.webmanifest
{
    "categories": [],
    "name": "Symfony Demo PWA",
    "short_name": "SF PWA",
    "start_url": "/ca",
    "background_color": "#ffffff",
    "display": "standalone",
    "display_override": [],
    "id": "/",
    "scope": "/",
    "theme_color": "#4285f4",
    "scope_extensions": [],
    "icons": [],
    "screenshots": [],
    "file_handlers": [],
    "protocol_handlers": [],
    "related_applications": [],
    "shortcuts": [],
    "widgets": []
}

[davidromani]

I think that I already seen the problem, missing PWA icons and screenshots...

Maybe it will be interesting to write an attention about this behaviour in the documentation...

[tacman]

Yes, and the bundle already provides some tools for creating those. So the instructions could say Find an icon at least 512x512, put it in /assets/images, then run

mkdir assets/images
curl (iconUrl) -O assets/images/icon.jpg
bin/console pwa:create:icons assets/images/icon.jpg

It's be nice if the created icons were detected somehow and injected into the manifest, as I ran into this problem with my first project as well.

[Spomky]

I am pretty sure I wrote something in the documentation. But yes you are right it should be more explicit

[Spomky]

#107

[davidromani]

Just generated the icons (without screenshots) and it appears the browser action button to install (only with Chrome!)

I've used this command:

$ php bin/console pwa:create:icons assets/circus.png --output assets/icons

Then, I've copy&pasted the output configuration into config/packages/pwa.yaml with a little trouble with the identations, but no so difficult to solve.

[Spomky]

#106

[tacman]

@davidromani do you have a fork of the Symfony demo with the PWA installed? I'd play around with it if you do.

Also, I just published survos/pwa-extra-bundle, which adds debug info to the toolbar, I'd love your feedback.

composer req survos/pwa-extra-bundle

and then the toolbar should appear

[davidromani]

No, I haven't forked, it's just a simple installation for testing purposes. I'll check your bundle, but before I need to get rid about all of my Service Worker knowledge stucks.

Thanks for your help, I'm reading some of your code from this repo trying to undestand general SW behaviours.

[tacman]

I'm glad it's helpful. Noise is a bit of a mess right now because I switched over to bootstrap (my css sucks) and didn't finish the migration. I also installed an audio player, because I wanted to leverage as many 3rd-party tools as possible.