pwa: add support for maskable icons (#64297)

combo/apps/pwa/migrations/0008_auto_20220418_1059.py

@@ -0,0 +1,40 @@
+# Generated by Django 2.2.28 on 2022-04-18 08:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('pwa', '0007_text_to_jsonb'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='pwasettings',
+            name='maskable_icon',
+            field=models.BooleanField(
+                default=False,
+                help_text='Maskable icons have their important content in a safe zone; '
+                'they can be cropped by devices to be shown in a variety of shapes. '
+                'A circle marker will be displayed on top of the preview so you can check is fits.',
+                verbose_name='Maskable Icon',
+            ),
+        ),
+        migrations.AlterField(
+            model_name='pwanavigationentry',
+            name='icon',
+            field=models.FileField(blank=True, null=True, upload_to='pwa', verbose_name='Icon'),
+        ),
+        migrations.AlterField(
+            model_name='pwasettings',
+            name='application_icon',
+            field=models.FileField(
+                blank=True,
+                help_text='Icon file must be in JPEG or PNG format, and should be a square of at least 512×512 pixels.',
+                null=True,
+                upload_to='pwa',
+                verbose_name='Application Icon',
+            ),
+        ),
+    ]

combo/apps/pwa/models.py

@@ -46,6 +46,15 @@ class PwaSettings(models.Model):
         blank=True,
         null=True,
     )
+    maskable_icon = models.BooleanField(
+        verbose_name=_('Maskable Icon'),
+        default=False,
+        help_text=_(
+            'Maskable icons have their important content in a safe zone; they can be '
+            'cropped by devices to be shown in a variety of shapes. A circle marker '
+            'will be displayed on top of the preview so you can check is fits.'
+        ),
+    )
     offline_text = RichTextField(
         verbose_name=_('Offline Information Text'),
         default=_('You are currently offline.'),

combo/apps/pwa/static/css/combo.manager.pwa.scss

@@ -70,6 +70,17 @@ div#mobile-case {
 			img {
 				width: 50%;
 			}
+			&.with-maskable-area::after {
+				content: "";
+				display: block;
+				position: absolute;
+				top: 10%;
+				height: 80%;
+				left: 30%;
+				width: 40%;
+				border-radius: 100%;
+				border: 1px dashed rgba(255, 255, 255, 0.5);
+			}
 		}
 		div.applabel {
 			position: absolute;

combo/apps/pwa/templates/combo/manifest.json

@@ -15,7 +15,8 @@
             {% thumbnail pwa_settings.application_icon icon_size crop='center' format='PNG' as im %}
             "src": "{{ site_base }}{{ im.url }}",
             {% endthumbnail %}
-            "type": "image/png"
+            "type": "image/png",
+            "purpose": "any{% if pwa_settings.maskable_icon %} maskable{%endif%}"
         }{% if not forloop.last %},{% endif %}
       {% endfor %}
      {% else %}

combo/apps/pwa/templates/combo/pwa/manager_home.html

@@ -82,6 +82,12 @@ $(function() {
     $('.mobile-app-content iframe').attr('src', '/');
     $('.mobile-app-content').addClass('splash-off');
   });
+  if ($('#id_maskable_icon').is(':checked')) {
+    $('.appicon').addClass('with-maskable-area');
+  }
+  $('#id_maskable_icon').on('change', function() {
+    $('.appicon').toggleClass('with-maskable-area');
+  });
 
   $('.navigation-entries').sortable({
     handle: '.handle',