Giter VIP home page Giter VIP logo

Comments (1)

ziadsarour avatar ziadsarour commented on July 18, 2024

After reviewing the code, I know $pwa.isPWAInstalled means "I'm inside a PWA" based on

const ua = navigator.userAgent
const ios = ua.match(/iPhone|iPad|iPod/)
const useDisplay = display === 'standalone' || display === 'minimal-ui' ? `${display}` : 'standalone'
const standalone = window.matchMedia(`(display-mode: ${useDisplay})`).matches
const isInstalled = ref(!!(standalone || (ios && !ua.match(/Safari/))))
const isPWAInstalled = ref(isInstalled.value)
window.matchMedia(`(display-mode: ${useDisplay})`).addEventListener('change', (e) => {
// PWA on fullscreen mode will not match standalone nor minimal-ui
if (!isPWAInstalled.value && e.matches)
isPWAInstalled.value = true
})


I also have a local module which generate manifests based on the one generated by this plugin :

  • /manifest.webmanifest
  • /en/manifest.webmanifest
  • /fr/manifest.webmanifest
  • /{localeCode}/manifest.webmanifest

This local module is specific to my website but here is a snippet you could be inspired of :

...
  const directory = path.join(__dirname, '..', '.output', 'public');
  const baseManifest = getBaseManifest({ directory });

  for (const locale of locales) {
    saveManifest({
      directory,
      locale: locale.code,
      manifest: {
        ...baseManifest,
        description: t.description[locale.code] || baseManifest.description,
        start_url: locale.url,
      },
    });
  }
...

function getBaseManifest(options: {
  directory: string;
}) {
  const filepath = path.join(options.directory, 'manifest.webmanifest');
  const file = fs.readFileSync(filepath, { encoding: 'utf-8' });

  if (!file) {
    throw `module webmanifests: missing base manifest file`;
  }

  return JSON.parse(file);
}

function saveManifest(options: {
  directory: string;
  locale: RegionLocale['code'];
  manifest: any;
}) {
  const filepath = path.join(options.directory, options.locale, 'manifest.webmanifest');
  fs.writeFileSync(filepath, JSON.stringify(options.manifest), { encoding: 'utf-8' });
}

Be sure to remove your / and to manually set the correct head href manifest based on the user locale.


I now need to resolve 2.

from nuxt.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.