Be more specific saying that a PWA is installable #100
Replies: 7 comments 10 replies
-
|
It can be installed on desktop browser. Safari is the only exception and things are "complicated". |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
You don't have anything like in here? |
Beta Was this translation helpful? Give feedback.
-
|
No 🤷♂️ |
Beta Was this translation helpful? Give feedback.
-
|
@Spomky would you like to see my manifest file? |
Beta Was this translation helpful? Give feedback.
-
|
Yes please. Or go to the debug window and capture the application warnings. |
Beta Was this translation helpful? Give feedback.
-
|
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
|
Beta Was this translation helpful? Give feedback.
-
|
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... |
Beta Was this translation helpful? Give feedback.
-
|
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.jpgIt'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. |
Beta Was this translation helpful? Give feedback.
-
|
I am pretty sure I wrote something in the documentation. But yes you are right it should be more explicit |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
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/iconsThen, 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. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
@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-bundleand then the toolbar should appear |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
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.
Beta Was this translation helpful? Give feedback.
All reactions