Configuration

You can configure all the settings of pwa as described below:

Configuration1

  • Step 1: Go to Template/TypoScript.

  • Step 2: Select root page.

  • Step 3: Select Constant Editor

  • Step 4: Select Plugin.> ns_pwa

Now, you can configure all the options which you want eg., Short name,name,Start url etc., See below screenshots.

  • Step 5: Short name Application short name.

  • Step 6: Name Add application name,It will show in FE in application Preview.

  • Step 7: Start Url (/ or /blog): The start_url property specifies the URL of the page that opens when the PWA is launched from the homescreen. This can be a relative URL, in which case it will be relative to the scope, or an absolute URL. The start url must be same as your typo3 site’s base value.

  • Step 8: Background Color: Selet background color you want to show in Application preview.

  • Step 9: Diplay: Select type display,Which you want to show in FE.

Configuration2

  • Step 10: Scope (/ or /blog): The scope property specifies the URL prefix for all the URLs that the PWA will handle. This determines which pages the PWA can be launched from, and which pages it can control while running. So, the scope must be same as your typo3 site’s base value.

  • Step 11: Theme color: Select theme color.

  • Step 12: PWA Icon: Add path of icon which you want to show in App preview.

  • Step 13: PWA Mask Icon 144*144: Add icon path,This is required for generating web app,icon size must be 144*144 as mentioned in Title,cause we use this in our extensions for generating PWA.

  • Step 14: PWA Icon 192*192: Add icon path,This is required for generating web app,icon size must be 144*144 as mentioned in Title,cause we use this in our extensions for generating PWA.

  • Step 15: PWA Icon 512*512: Add icon path,This is required for generating web app,icon size must be 144*144 as mentioned in Title,cause we use this in our extensions for generating PWA.

  • Step 16: The width and height of desktop Screenshot must be atleast 370px and at most 3840px: Pleae add image as mentioned in title itself.

  • Step 17: Please enter the size of desktop screenshot you uploaded above (it’s required): Add Exact size of image which you uploaded for desktop.

Configuration2

  • Step 18: The Width and heightof mobile Screenshot must be atleast 370px and at most 3840px : Pleae add image as mentioned in title itself

  • Step 19: Please enter the size of mobile screenshot you uploaded above (it’s required): Add Exact size of image which you uploaded for mobile.

  • Step 20: Entry Point of Site: This property used for generating the manifest file from your site path.So, the entrypoint must be same as your typo3 site’s base value.

  • Step 21: Save: After all,Save the Configuration and you can See PWA icon URL Segment!

That’s it,Now you can configure it as per your requirements.:)