Update the PWA manifest

This adds:
* fingerprint of the manifest for better updates
* landscape mode
* better integration of apple devices

frontend/index.html

@@ -5,13 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="Description" content="Canapé">
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= require("./img/apple-touch-icon.png") %>">
     <link rel="icon" type="image/png" href="<%= require("./img/favicon-32x32.png") %>" sizes="32x32">
     <link rel="icon" type="image/png" href="<%= require("./img/favicon-16x16.png") %>" sizes="16x16">
-    <link rel="manifest" href="/manifest.json">
-    <meta name="theme-color" content="#4E5D6C">
     <meta name="msapplication-navbutton-color" content="#4E5D6C">
-    <meta name="apple-mobile-web-app-status-bar-style" content="#4E5D6C">
     <link rel="mask-icon" href="<%= require("./img/safari-pinned-tab.svg") %>" color="#5bbad5">
     <title>Canapé</title>
   </head>

frontend/js/app.js

@@ -2,7 +2,6 @@
 import "../img/noimage.png"
 
 // Import favicon settings
-import "../img/apple-touch-icon.png"
 import "../img/favicon-16x16.png"
 import "../img/favicon-32x32.png"
 import "../img/favicon.ico"

webpack.config.js

@@ -76,15 +76,22 @@ const config = {
     new CleanWebpackPlugin({
       cleanOnceBeforeBuildPatterns: ["**/*", "!img/**/*", "!img"],
     }),
+    new HtmlWebpackPlugin({
+      template: path.join(SRC_DIR, "../index.html"),
+    }),
     new WebpackPwaManifest({
-      fingerprints: false,
+      fingerprints: true,
-      inject: false,
+      inject: true,
+      ios: {
+        "apple-mobile-web-app-status-bar-style": "default",
+        "apple-mobile-web-app-title": "Canapé",
+      },
       name: "Canapé",
       short_name: "Canapé",
       background_color: "#4e5d6c",
       theme_color: "#4e5d6c",
       display: "standalone",
-      orientation: "portrait",
+      orientation: "omit",
       scope: "/",
       start_url: "/",
       icons: [
@@ -92,11 +99,13 @@ const config = {
           src: path.resolve(__dirname, "frontend/img/android-chrome-512x512.png"),
           sizes: [96, 128, 192, 256, 384, 512],
         },
+        {
+          src: path.resolve(__dirname, "frontend/img/apple-touch-icon.png"),
+          sizes: [80, 120, 152, 167, 180],
+          ios: true
+        },
       ],
     }),
-    new HtmlWebpackPlugin({
-      template: path.join(SRC_DIR, "../index.html"),
-    }),
   ],
   resolve: {
     extensions: [".js"],