Add manifest.json for PWA Standalone Mode

[dillchen]

Description

We want to become a PWA. This requires some configuration changes. This is only for adding the configuration changes, it does not include the flow for prompting the user to operate in standalone mode

Adds the manifest JSON and relevant handler in top-level HTML The web app manifest contains details such as name of the app, icons and if the display is standalone mode or not

The business goal of enabling a PWA is to increase user engagement and retention using push notifications on mobile, and keeping Common top of mind for users. Detailed out more in this PRD - Progressive Web App PRD

Project Owner

PM: @dillchen / @sachben91
EM: IDK

Engineering Requirements

Manifest JSON Example

{
  "icons": [
    { "src": **Insert links to logos for App Icon** },
    { "src": **Insert links to logos for App Icon** },
  ],
  "display": "standalone",
  "start_url": "/"
}

Top Level HTML Tag

      <link rel="manifest" href="/manifest.json" />

Acceptance Criteria

• User is able to open the share menu on iOS and add to their homescreen, the app should operate in standalone mode. I.e we should not see a bottom "nav bar" user to see Safari
• this should be replicable across android devices in QA as well

Not Standalone (bottom nav bar)

Standalone (no bottom nav bar)

Additional context

Further documentation can be found here using the following tutorial

• This does not include service worker configuration for offline usage, and or prefetching, those should enhance the experience, but may be tackled separately link
• This does include prompts to add it (which can be done anytime after this is done)

[rbennettcw]

Estimating as 2.

A prerequisite is to provide a high quality image asset to be used as the icon– if not already available in the repo. Then we can use an online tool to convert to various formats as needed.

[CowMuon]

@sachben91 - To be added to list of outstanding assets needed:

• High rez logo files in png format (see comment below), probably 192x192 and 512x512
• Additional alt sized logo files as needed for additional device support (NB we don't actually have a matrix showing device support coverage we get with just 129 & 512.
• Official description text that will be used for all users downloading the app.

Even better if @dillchen could update manifest example in description to fill in our desired values for the required keys:

"name": "Common App ? ",
"short_name": "Common ? ",
"description": "Official Common app desciption",

[CowMuon]

I have questions.

• What, if any, thing is needed to determine (which) device(s we want to) support?
• Which devices we intend to be supported?
• Assumption: background-color key should be set to 'FFFFFF' @jessmart1213
• What about theme color?
• Will 192x192 and 512x512 cover all devices we intend to support?
• What additional image sizes, if any, are needed for additional devices we intend to support?
• How will we be versioning the manifest?
• (also what will be our test plan for service workers, tho that may have to be FF.)

Related question here is who can pull from Mixpanel ranked list of most used devices on Commonwealth.im?

Links

• Awesome PWAs

[CowMuon]

I agree it's a 2 for actual implementation, however taking into account other considerations and questions I'm inclined to call this a 3. (Leaving as a 2 for now.)

[dillchen]

Description — create onchain together. Community forums with onchain rewards, roles and more Sent via Superhuman iOS ***@***.***>

…

On Thu, Feb 1 2024 at 8:54 PM, Forest Mars ***@***.***> wrote: I agree it's a 2 for actual implementation, however taking into account other considerations and questions I'm inclined to call this a 3. (Leaving as a 2 for now.) — Reply to this email directly, view it on GitHub <#6226 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABIWMHNRSCTR64EWUYN23KTYRRBODAVCNFSM6AAAAABBOXZBWWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRSGY2DKOBYG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[dillchen]

Name and short name should both be Common Sent via Superhuman iOS ***@***.***>

…

On Thu, Feb 1 2024 at 10:33 PM, Dillon Chen ***@***.***> wrote: Description — forums with memecoins, contests, and more Sent via Superhuman iOS ***@***.***> On Thu, Feb 1 2024 at 8:54 PM, Forest Mars ***@***.***> wrote: > I agree it's a 2 for actual implementation, however taking into account > other considerations and questions I'm inclined to call this a 3. (Leaving > as a 2 for now.) > > — > Reply to this email directly, view it on GitHub > <#6226 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ABIWMHNRSCTR64EWUYN23KTYRRBODAVCNFSM6AAAAABBOXZBWWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRSGY2DKOBYG4> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[CowMuon]

Here's our starting manifest, with installable set to false. We will only change that to true when we are ready to launch. Nb. We need to ensure that users will not get the prompt before then. Additional comments follow.

  "name": "Common App",
  "short_name": "Common",
  "description": "Create onchain together - Community forums with onchain rewards, roles and more",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/static/assets/icon-212.png",
      "sizes": "212x212",
      "type": "image/png"
    }
    {
      "src": "/static/assets/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "manifest_version": 0.0.1,
  "installable": false
}```

[CowMuon]

Notes:

• Assets assumed to located in /static/assets rather than static/brand_assets (where extant branding elements are located.)
• We need to add the theme_color key for a more immersive experience. @jessmart1213 @jabell88
• Icon sizes 192 and 212 are just suggestions

Additional Assumptions

• We will not need to add keys for permissions such as camera, location, etc, as the app does not currently use any such mobile functionality. However, given we are now moving to a mobile first approach to app development, that could certainly change.
• Are we looking at adding shortcuts? Ifso, they would need to be in the manifest (for example, giving Community Admins a deep link short cut to the screen they use the most.)

Future Roadmap Considerations

• When we are ready to add our app to the App & Play stores we will need a key for categories to be listed in.
• When that time comes we will also want to add attractive screenshots to our manifest to be displayed in App & Play store listings.