Pwa setup

[Aliiiu]

PWA Setup

This PR works on setting up PWA for the project

Observation

• The beforeInstall Prompt needs some requirement to show and it does not show immediately for all devices even after meeting the requirement

Custom Prompt on Android

Custom Prompt on iPhone

How to test

• Prompt only shows for mobile screens
• it only shows once when you just open the app and not every time
• clear cache to see prompt again

How the Splash Screen looks on android Phones

Installed through Google Pixel Chrome Browser

Installed through Samsung Browser

Installed through Samsung Chrome Browser

How the Home screen looks like on Android and iPhones

Android Homescreen

iPhone Homescreen

Linked issues

closes EveripediaNetwork/issues#2848
closes EveripediaNetwork/issues#2899

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
iq-wiki	✅ Ready (Inspect)	Visit Preview	Jul 18, 2024 3:00pm

[kesar]

long time ago i build some PWA. something I remember its the API caching was tricky to do. Ensure that works fine (no caching unless we know how to do it properly) 👍🏻

[Aliiiu]

long time ago i build some PWA. something I remember its the API caching was tricky to do. Ensure that works fine (no caching unless we know how to do it properly) 👍🏻

Alright sir

[Aliiiu]

long time ago i build some PWA. something I remember its the API caching was tricky to do. Ensure that works fine (no caching unless we know how to do it properly) 👍🏻

the package I am using does some default caching for the apis, below is the configuration

    urlPattern: ({ url }) => {
      const isSameOrigin = self.origin === url.origin
      if (!isSameOrigin) return false
      const pathname = url.pathname
      // Exclude /api/auth/callback/* to fix OAuth workflow in Safari without impact other environment
      // Above route is default for next-auth, you may need to change it if your OAuth workflow has a different callback route
      // Issue: https://github.com/shadowwalker/next-pwa/issues/131#issuecomment-821894809
      if (pathname.startsWith('/api/auth/')) return false
      if (pathname.startsWith('/api/')) return true
      return false
    },
    handler: 'NetworkFirst',
    method: 'GET',
    options: {
      cacheName: 'apis',
      expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
      },
      networkTimeoutSeconds: 10 // fall back to cache if api does not response within 10 seconds
    }
  },
  {
    urlPattern: ({ url }) => {
      const isSameOrigin = self.origin === url.origin
      if (!isSameOrigin) return false
      const pathname = url.pathname
      if (pathname.startsWith('/api/')) return false
      return true
    },
    handler: 'NetworkFirst',
    options: {
      cacheName: 'others',
      expiration: {
        maxEntries: 32,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
      },
      networkTimeoutSeconds: 10
    }
  },
  {
    urlPattern: ({ url }) => {
      const isSameOrigin = self.origin === url.origin
      return !isSameOrigin
    },
    handler: 'NetworkFirst',
    options: {
      cacheName: 'cross-origin',
      expiration: {
        maxEntries: 32,
        maxAgeSeconds: 60 * 60 // 1 hour
      },
      networkTimeoutSeconds: 10
    }
  }

and this is the link to the file
cache.js

[Aliiiu]

@Adebesin-Cell done with the setup for ios

[Softdev1]

Nice stuff