Pwa for ios

HeHang0 · Nov 9, 2023 · d908e21 · d908e21
1 parent 7b19302
commit d908e21
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 21 deletions.
diff --git a/web/index.html b/web/index.html
@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent" />
+    <meta name="format-detection" content="telephone=no" />
     <title>音乐和</title>
   </head>
   <body>

diff --git a/web/scripts/fix.ts b/web/scripts/fix.ts
@@ -59,10 +59,7 @@ function transformIndexHtmlHandler(html: string) {
     prependedHtml += '\n    ' + scriptPwa;
     html = html.replace(matchScript, '');
   }
-  return html.replace(
-    '<head>',
-    '<head>' + prependedHtml.replaceAll('="./', '="/musiche/')
-  );
+  return html.replace('<head>', '<head>' + prependedHtml);
 }
 
 export const FixPwaPlugin = function () {

diff --git a/web/src/App.vue b/web/src/App.vue
@@ -6,7 +6,7 @@ import Footer from './components/Footer.vue';
 import CurrentList from './components/CurrentList.vue';
 import PlayDetail from './components/PlayDetail.vue';
 import WindowHelper from './components/WindowHelper.vue';
-import { webView2Services } from './utils/utils';
+import { isIOS, isInStandaloneMode, webView2Services } from './utils/utils';
 import { MusicConnection } from './stores/connection';
 import { usePlayStore } from './stores/play';
 import { useSettingStore } from './stores/setting';
@@ -29,13 +29,16 @@ iconLink.rel = 'icon';
 iconLink.href = LogoCircleImage;
 document.head.appendChild(iconLink);
 new MusicConnection(webView2Services.enabled);
+let rootClass = webView2Services.enabled ? 'webview-host' : '';
+if (isInStandaloneMode) rootClass += ' standalone';
+if (isIOS) rootClass += ' ios';
 </script>
 
 <template>
   <el-container
     class="music-layout"
     direction="vertical"
-    :class="webView2Services.enabled ? 'webview-host' : ''"
+    :class="rootClass"
     :style="
       setting.appTheme.image
         ? `background: url(${setting.appTheme.image}) 50% 50% / cover`
@@ -74,11 +77,7 @@ new MusicConnection(webView2Services.enabled);
   }
   &-top {
     overflow: hidden;
-    flex: unset;
-    height: calc(100% - 80px);
-    &-full {
-      height: 100%;
-    }
+    flex: 1;
   }
   &-top {
     width: 100%;
@@ -87,12 +86,16 @@ new MusicConnection(webView2Services.enabled);
 .music-main {
   position: relative;
   overflow-x: hidden;
+  :deep(.el-scrollbar > .el-scrollbar__wrap > .el-scrollbar__view) {
+    position: relative;
+    min-height: 100%;
+  }
 }
-</style>
-
-<style lang="less">
-.music-main > .el-scrollbar > .el-scrollbar__wrap > .el-scrollbar__view {
-  position: relative;
-  min-height: 100%;
+@media (max-width: 720px) {
+  .music-layout.standalone.ios {
+    .music-footer {
+      padding-bottom: 10px;
+    }
+  }
 }
 </style>
diff --git a/web/src/components/Footer.vue b/web/src/components/Footer.vue
@@ -177,8 +177,6 @@ const play = usePlayStore();
   opacity: 0.8;
 }
 .music-footer {
-  position: fixed;
-  bottom: 0;
   background-color: var(--music-footer-background);
   height: 80px;
   width: 100vw;

diff --git a/web/src/stores/setting.ts b/web/src/stores/setting.ts
@@ -32,6 +32,8 @@ const controlKeys = [
   'metaright'
 ];
 const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const appleMobileWebAppStatusBarStyle: HTMLMetaElement | null =
+  document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
 export const useSettingStore = defineStore('setting', {
   state: () => ({
     maximized: false,
@@ -242,8 +244,9 @@ export const useSettingStore = defineStore('setting', {
     },
     setAppTheme(appTheme?: AppTheme) {
       let preferredColorScheme = 0;
+      const dark = appTheme?.id.includes('dark');
       if (!this.autoAppTheme) {
-        preferredColorScheme = appTheme?.id.includes('dark') ? 2 : 1;
+        preferredColorScheme = dark ? 2 : 1;
       }
       this.appTheme.id = appTheme?.id || '';
       this.appTheme.color = appTheme?.color || '';
@@ -254,6 +257,11 @@ export const useSettingStore = defineStore('setting', {
         id: this.appTheme.id,
         name: this.appTheme.name
       });
+      if (appleMobileWebAppStatusBarStyle) {
+        appleMobileWebAppStatusBarStyle.content = dark
+          ? 'black-translucent'
+          : 'default';
+      }
       musicOperate('/theme?theme=' + preferredColorScheme);
     },
     setCustomTheme(appTheme?: AppTheme) {

diff --git a/web/src/utils/utils.ts b/web/src/utils/utils.ts
@@ -42,6 +42,13 @@ try {
   webView2Services.enabled = !!webView2Services.specialService;
 } catch (error) {}
 
+export const isInStandaloneMode = Boolean(
+  'standalone' in window.navigator && window.navigator.standalone
+);
+export const isIOS = !!navigator.userAgent.match(
+  /\(i[^;]+;( U;)? CPU.+Mac OS X/
+);
+
 export function scrollToElementId(
   id: string,
   center?: boolean,

diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -20,10 +20,11 @@ const plugins = [
   FixJSMediaTagsErrorPlugin(),
   VitePWA({
     manifest: {
+      id: 'top.picapico.musiche',
       name: 'Musiche',
       short_name: 'Musiche',
       description: '音乐播放器[支持网易云、QQ音乐、咪咕音乐].',
-      start_url: 'musiche',
+      start_url: '',
       scope: '.',
       display: 'standalone',
       background_color: '#ffffff',