【２】Nuxt.jsのサンプルアプリをPWAとしてFirebaseにホスティングする

2884 ワード
nuxt.js Firebase PWA Firebase テキストリンク

はじめに

PWA（Progressive Web Application）として再デプロイしてみて、実際に自分のスマホにインストールしてみます。

手順

マニフェストファイルの作成

PWAにはmanifest.jsonが必要だが、nuxt.jsでは@nuxtjs/pwaさえ入っていればとてもシンプル。
前記事でやったようにnuxt.config.jsを編集する。

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv'
  ],
+  pwa: {
+    manifest: {
+      name: 'すずめも', // アプリの名前
+      lang: 'fa'
+    }
+  },

もしアイコンを変えたい場合は、 static/icon.png を編集すればOK。

その他に必要なことは、下から勉強する必要がありそうです。
https://pwa.nuxtjs.org/modules/meta.html#applestatusbarstyle

これで npm run deploy でデプロイしなおすと、

いい感じ！

ここまで

【悩み中】iOS用に調整する

distに出力されたindex.htmlの head 属性に下記のjsファイルを入れれば動くと思ったのだけれど、いまは失敗している。

+ <script async src="https://cdn.jsdelivr.net/npm/[email protected]/pwacompat.min.js"
+          integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc"
+          crossorigin="anonymous"></script>
</head>

あとでこれをやってみる予定。
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja#ios%E3%81%AEmeta%E3%82%BF%E3%82%B0%E3%81%A8%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0

<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">