Emit metatags for iOS from a submodule

For discussion, I'd just like to add that iOS also has it's own (long standing) method for providing a launch screen which is also facilitated by metatags. It's rather long winded but works quite well.

The code below is added to the head.

 <link href="/path-to/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<link href="/path-to/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<link href="/path-to/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

<link href="/path-to/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

<link href="/path-to/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<link href="/path-to/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

<link href="/path-to/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<link href="/path-to/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<link href="/path-to/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<link href="/path-to/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> 

A number of online services exist which make the generation of device specific images fairly straight forward. I used this one.

I found that uploading a 512x512 pixel image produced a comparable splash screen to the one which is (sometimes) presented by Chrome.

Cross referencing with https://www.drupal.org/project/pwa/issues/3074111 where @zenimagine correctly notes that the absence of an apple-touch-icon is now called out by a recent update to Chrome Lighthouse.

Try this patch, it includes the submodule `pwa_meta_tags` all metatags are controlled there, let me know any feedback.

Actually I noticed an issue with this on installation, will fix it.

WSOD after enabling the module.

Error: Unsupported operand types in pwa_meta_tags_page_attachments() (line 18 of /Users/paul/Sites/drupal8test/public_html/web/modules/contrib/pwa/pwa_meta_tags/pwa_meta_tags.module) #0

Yes noticed that too with the simplytest.me link after I uploaded the patch, try this.

Thanks for your contribution. Great work!
I have reviewed the patch from the high-level.I'm planning to use this sub-module in an upcoming project. I would be able to provide more feedback when we will leverage it in the project.

1. +++ b/pwa_meta_tags/config/install/pwa_meta_tags.config.yml
   @@ -0,0 +1,7 @@
   \ No newline at end of file
   

   Add new line at end of the file

2. +++ b/pwa_meta_tags/pwa_meta_tags.info.yml
   @@ -0,0 +1,6 @@
   \ No newline at end of file
   

   Ditto as above. Add new line at EOF

3. +++ b/pwa_meta_tags/pwa_meta_tags.install
   @@ -0,0 +1,13 @@
   +function pwa_meta_tags_uninstall() {
   

   It would not be required. enforced dependency of the configuration on the module would delete the configuration

4. +++ b/pwa_meta_tags/pwa_meta_tags.links.menu.yml
   @@ -0,0 +1,5 @@
   +  parent: system.admin_config_system
   

   Can you define a new menu link in the pwa module and make the metatag configuration under /admin/config/pwa

5. +++ b/pwa_meta_tags/pwa_meta_tags.links.task.yml
   @@ -0,0 +1,8 @@
   +pwa.config:
   

   Move this to pwa module

6. +++ b/pwa_meta_tags/pwa_meta_tags.links.task.yml
   @@ -0,0 +1,8 @@
   \ No newline at end of file
   

   Add newline at EOF

7. +++ b/pwa_meta_tags/pwa_meta_tags.module
   @@ -0,0 +1,106 @@
   +  if (!\Drupal::currentUser()->hasPermission('access pwa')) {
   

   The permission has been removed. Please use "access content"

8. +++ b/pwa_meta_tags/pwa_meta_tags.routing.yml
   @@ -0,0 +1,7 @@
   +  path: '/admin/config/system/pwa_meta_tags'
   

   Change the route and put it under the admin/config/system/pwa if the maintainer agrees on the creating a dedicated menu for the PWA

9. +++ b/pwa_meta_tags/pwa_meta_tags.routing.yml
   @@ -0,0 +1,7 @@
   +    _permission: 'administer site configuration'
   

   administer pwa

10. +++ b/pwa_meta_tags/src/Form/ConfigurationForm.php
    @@ -0,0 +1,172 @@
    + * @package Drupal\pwa_meta_tags\Form
    

    Remove it

11. +++ b/pwa_meta_tags/src/Form/ConfigurationForm.php
    @@ -0,0 +1,172 @@
    +  ¶
    

    Remove the space and from all other places in the file.

12. +++ b/pwa_meta_tags/src/Form/ConfigurationForm.php
    @@ -0,0 +1,172 @@
    +    $form['second_list'] = [
    

    Rename the form key to express what's it is for?

13. +++ b/pwa_meta_tags/src/Form/ConfigurationForm.php
    @@ -0,0 +1,172 @@
    +      "#title" => $this->t(''),
    

    Why there's not any title of these checkbox? Please add a comment.

14. +++ b/pwa_meta_tags/src/Form/ConfigurationForm.php
    @@ -0,0 +1,172 @@
    +      ->set('color_select', $form_state->getValue('color_select'))
    

    Define the defination of these properties in the config/schema/pwa_meta_tags.schema.yml

Thanks naveenvalecha, please feel free to reroll the patch and post it here, otherwise I will get to it soon.

I have some time today. I could address above. Assigning to myself for that.

This is looking great.

1.) Just peeking at the generated mark-up and see that image paths currently point at /user/touch-icon-iphone.pngrather than /sites/default/files/pwa - As a work in progress I guess you are aware of this and I mention it only in case it is a bug.

2.) Field group title 'APPLE ADD TO HOMESCREEN ICONS' should probably be 'APPLE LAUNCH SCREEN IMAGES'. I say launch screen rather than splash screen because this is what Apple call them.

Is the plan to generate all the various icons and launch screen images from the pwa settings image? Or just to implement the meta tags, with image creation being the responsibility of the site builder?

If this is to be left to site builders we should add some help text.

Edited

Is the plan to generate all the various icons and launch screen images from
the pwa settings image? Or just to implement the meta tags, with image
creation being the responsibility of the site builder?

I was thinking the sitebuilder can just drop the icons into the root directory or whatever folder we decide on, probably the simplest solution for everyone, agree help text is needed.

But if someone wants to build an image upload/generation that works flawlessly, that could be cool too.

I tend to think that image generation for touch icons would not be much different to existing functionality. Launch screens would be more involved though.

Given that PWA module already creates a folder at /sites/default/files/pwa, I would have thought this ought to be the default location. Any reason why this should not be so?

I don't have a reason other than I don't think it's a top priority right now, also it just adds another layer of complexity to maintain and dropping in images manually seems easy for anyone technical enough to SFTP which I think is most Drupal users. I agree with you though that it's better to have than not to.

Here's the patch which accommodated #10. Also, I renamed the module from the pwa_meta_tags to pwa_ios as it is specific to the IOS.

There's still a lot of clean up required before it gets in. Please find the attached interdiff to see what changes have been made between two patches.

Next Items:
- Address the #13
- More cleanup
If anyone wants to take it up before I address it feel free to take it up.

Cool thanks for getting this done, it has a meta tag which is not specific to iOS theme-color (which changes the mobile navbar color, a requirement for lighthouse) and is meant to be for any PWA related meta tags if any more come up.

@AlexBorsody,

Cool thanks for getting this done, it has a meta tag which is not specific to iOS theme-color (which changes the mobile navbar color, a requirement for lighthouse) and is meant to be for any PWA related meta tags if any more come up.

It should remain in the pwa module. If there will be further meta tags for the Lighthouse, it should be moved to the pwa_lighthouse sub modul. What do you think?

Re: #13 and #15 Can you upload the default apple icon images which are referred to in the codebase?

That sounds fine to me Naveen, do you suggest we just move theme-color back to where it was in pwa.module? If you want to reroll with this change I can test and we can get this initial work pushed. Maybe Paul can be so kind as to send those icons over, otherwise, I'll generate them.

We should ship with the default icons in the modules and let the site builders override them if they want to.We'll document it in the Readme.txt of the module. "How to override the icons."

Maybe Paul can be so kind as to send those icons over, otherwise, I'll generate them.

Sorry Alex, I am not understanding you. Likewise @naveenvalecha with the Re: #13 and #15 comment

---

The definition of a PWA is evolving, and it arguably goes beyond the provision of a manifest file and a service worker. So I tend to think that anything that causes a Lighthouse PWA advisory should be part of the main module. This would include the apple-touch-icon, as well as theme-color.

In another post, @rupl recommended that a single apple-touch-icon of 192 pixels could be used. Existing functionality of the main module already addresses icon generation so this seems logical to me.

As for this module, yes it is currently about ios and metatags, but rather than tying it down, perhaps naming this submodule as pwa_extras would be more flexible.
---
Edit: Add link for @rupl comment about apple touch icon

As for this module, yes it is currently about ios and metatags, but rather than tying it down, perhaps naming this submodule as pwa_extras would be more flexible.

+1 I would rename the module in the next iteration of the patch if its also fine with the AlexBorsody

I agree that for certain tags, putting them in the main module is the best course of action. theme-color and one apple-touch-icon (or at least a very limited set) are indeed supplying critical functionality of this module IMO.

If the list grows and grows, putting the extras in a submodule helps keep the output manageable by default, while catering to peoples' edge cases and desires in a more manageable way.

I'll accommodate rest of #22 and #24 tomorrow as I'll need to go through the entire history of the conversion issue and the D7 version of the module. Here's the patch which renames the module name.

Everything you suggested sounds fine for me, thanks for getting involved naveenvalecha.

Here's another iteration of the patch. It does the following:

• Move the theme_color back to the pwa module
• Defined the schema metadata of the configuration

Next:
- Add Readme.txt to the module
- Add hook_help to the module
- More clean up in pwa_extras_page_attachments
- Add apple-touch-icon of 192 pixels icon in the assets directory of the module and use it
- Test the module

Using the simplytest.me link generated by Dreditor (anyone testing should definitely try this!), the module doesn't seem to be emitting any meta tags now...

PWA Extras Settings should also probably be under Progressive Web App dashboard link too. I can look more later.

I'll look at this tomorrow

Here is the meta tags submodule named as pwa_extras, remember to drop any needed icons for the tags into the root directory.

Next:
- Add Readme.txt to the module
- Add hook_help to the module
- More clean up in pwa_extras_page_attachments
- Add icons to the assets directory of the module and use it if none are found.
- Possibly add image upload functionality.

Noticed some issues with this patch, needs more work not ready to test yet sorry.

There was a typo in the previouse patch try this.

Thanks for your contribution.

I reviewed the patch on clean Drupal install, and it works as intended.

Test:
After installing the module, I added tags and icons via admin page and all shows in the markup perfectly. I was able to uninstall it without problems.

The module admin page:

Generated markup:

Thanks, Guys for taking this to end. I didn't get the time to take this up as my project is taking my whole day.
@AlexBorsody,
Any plans for a new release?