---
# System prepended metadata

title: PWA

---

# PWA

Objectifs:

- Permettre d'installer l'app Dior My Account sur son device (ou Dior ?)
- Permettre une expérience light "hors connexion" de myAccount
- Permettre le push de notifs lors du trigger d'un webhook lié aux orders

## 1 - Installable
- récupérer 2 icones 
- Creer un manifest et faire le settings d'activation instantané des sw

Static Host URL en local ?

## 2 - Offline
- Quelle expérience en offline ?
- Récolter toutes les urls à précharger

## 3 - Notifs
Pusher ?



### Expérimentations

- Utiliser next-pwa pour activer les PWA sur Next.js et simplifier l'import du manifest

```js
if (process.env.NODE_ENV === 'development') {
  require('dotenv-flow').config({
    node_env: process.argv[2],
  });
}
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
});
const defaultConfig = require('./config/defaults');
const customWebpackConfig = require('./webpack.config');

const isDev = process.env.NODE_ENV === 'development';

const getAssetConfiguration = () => ({
  assetPrefix: '/couture-my-account-assets',
  rewrites() {
    return [
      {
        source: '/couture-my-account-assets/_next/:path*',
        destination: '/_next/:path*',
      },
    ];
  },
});

const nextConfig = {
  compress: false,
  poweredByHeader: false,
  ...getAssetConfiguration(),
  publicRuntimeConfig: Object.entries(defaultConfig).reduce(
    (config, [key, defaultValue]) => {
      config[key] = process.env[key] || defaultValue;
      return config;
    },
    {},
  ),
  env: {
    IS_DEV: isDev,
  },
  webpack: customWebpackConfig,
};

let config;
if (process.env.ANALYZE === 'true') {
  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: true,
  });
  config = withBundleAnalyzer(nextConfig);
} else {
  config = nextConfig;
}

module.exports = withPWA(config);

```