diff --git "a/source/_posts/20241129a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md" "b/source/_posts/20241127a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md"
similarity index 95%
rename from "source/_posts/20241129a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md"
rename to "source/_posts/20241127a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md"
index 48df7cd57e5..20b30e9d334 100644
--- "a/source/_posts/20241129a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md"
+++ "b/source/_posts/20241127a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md"
@@ -8,13 +8,13 @@ tag:
- Vite
category:
- Programming
-thumbnail: /images/20241129a/thumbnail.png
+thumbnail: /images/20241127a/thumbnail.png
author: 大岩潤矢
lede: "Vue3で作ったWebサイトをPWA(Progressive Web Apps)化する方法を紹介します。"
---
## はじめに
-
+
本記事は [Vue連載2024](/articles/20241125a/) 3日目の記事です。
@@ -32,7 +32,7 @@ Progressive Web Apps、直訳すると「革新的なWebアプリ」です。か
Google Trendsによると、PWAは2017年頃から盛り上がりを見せ、2020年頃に一度ピークが落ち着いたものの、最近じわじわと話題が盛り返しているようです。2017年〜2020年頃にPWAに触れたものの、それっきり追っていないという方も多いのではないでしょうか？
-
+
個人的な主観とはなりますが、一時期PWAが次世代のアプリの姿として持て囃されていたものの、日本の約半数のシェアを占めるiOSがPWAサポートに消極的であったことが採用の障壁となり話題も落ち着いたものと推測します。
@@ -42,7 +42,7 @@ AndroidのGoogle ChromeにおいてPWAサポートが始まったのが2015年
しかし、iOSのバージョンが上がるにつれてそれらの問題も徐々に改善していきます。特に昨今一番のアップデートとして、バックグラウンドでのPush通知に対応したことが挙げられます。2023年3月27日リリースのiOS16.4から、Service WorkerでバックグラウンドのPush通知を受信する `ServiceWorkerRegistration.showNotification()` に対応しました。これにより、iOSでのPWA実現の一番の障壁だったPush通知がそれなりに動くようになり、一層PWAが完成に近づいたと言えるでしょう。
-
+
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration/showNotification
@@ -54,7 +54,7 @@ https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration/showNoti
その前に、今回利用する Vite PWA について紹介します。
-
+
https://vite-pwa-org.netlify.app/
@@ -69,7 +69,7 @@ https://vite-pwa-org.netlify.app/
本来であれば自分で用意しないといけない複雑な設定ファイルを、Viteのコンフィグファイルにオプションを記載するだけで自動で出力してくれるというすぐれものです。
-
+
PWAはウェブマニフェストファイルとServiceWorkerのファイルから成り立ちます。前者はPWAをインストールする際に使われるメタ情報的な役割で、後者はキャッシュ対応やバックグラウンド処理等のJSコードです。Vite PWAはこの2つのファイルを自動生成してくれます。
@@ -77,7 +77,7 @@ PWAはウェブマニフェストファイルとServiceWorkerのファイルか
まずはVue3で作成したアプリをPWA化してみましょう。ここでは、簡易的に天気予報APIを叩いて各地の天気予報を取得する簡単なアプリを用意しました。
-
+
ソースコードとデモサイトは以下に配置しています。
@@ -122,11 +122,11 @@ export default defineConfig({
このように `dev-sw.js` がService Workerとして読み込まれている事がわかります。
-
+
ターミナルのほうを見てみると、 `sw.js` と `workbox-xxxxxxxx.js` が自動生成されていることがわかります。
-
+
### PWAをインストールできるようにする（Webマニフェスト設定）
@@ -152,11 +152,11 @@ export default defineConfig({
記載できたら、 `npx pwa-assets-generator --preset minimal-2023` で実行しましょう。
-
+
正しく書き出せていそうです。
-
+
後は `vite.config.ts` に設定を記載するだけです。
@@ -205,15 +205,15 @@ https://developer.mozilla.org/en-US/docs/Web/Manifest
保存したら、再度開発サーバを立ち上げてみましょう。アドレスバー横にアイコンが表示され、クリックするとPWAのインストールダイアログが表示されます。
-
+
iPhoneでも試してみましょう。cloudflaredを使って外からアクセスできるようにして、ページを開いて「ホーム画面に追加」をタップします。
-
+
問題なく表示できていますね。
-
+
### プリキャッシュを導入する
@@ -279,11 +279,11 @@ files generated
書き出された `dist/sw.js` を見てみると、 `e.precacheAndRoute()` の引数に、書き出されたファイルが一覧されているようです。
-
+
では実際に試してみましょう。ビルドした後、先ほどと同様 cloudflared を使ってhttps通信でスマホからアクセスし、ホーム画面に追加。PWAアプリを一度開き、その後オフライン状態にして再度開くと……
-
+
オフライン状態でも表示できました！しかし、外部リソース（ここでは天気予報APIやそこから取得した画像ファイル）からの取得は失敗してしまっていますね。
@@ -322,7 +322,7 @@ workbox: {
では実際に試してみましょう。build後、PWAをインストールし直してみます。
-
+
今回はオフライン状態でもAPIリクエストをキャッシュできました！
diff --git a/source/images/20241129a/Pasted_image_20241125132625.png b/source/images/20241127a/Pasted_image_20241125132625.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125132625.png
rename to source/images/20241127a/Pasted_image_20241125132625.png
diff --git a/source/images/20241129a/Pasted_image_20241125133903.png b/source/images/20241127a/Pasted_image_20241125133903.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125133903.png
rename to source/images/20241127a/Pasted_image_20241125133903.png
diff --git a/source/images/20241129a/Pasted_image_20241125170033.png b/source/images/20241127a/Pasted_image_20241125170033.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125170033.png
rename to source/images/20241127a/Pasted_image_20241125170033.png
diff --git a/source/images/20241129a/Pasted_image_20241125170224.png b/source/images/20241127a/Pasted_image_20241125170224.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125170224.png
rename to source/images/20241127a/Pasted_image_20241125170224.png
diff --git a/source/images/20241129a/Pasted_image_20241125173130.png b/source/images/20241127a/Pasted_image_20241125173130.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125173130.png
rename to source/images/20241127a/Pasted_image_20241125173130.png
diff --git a/source/images/20241129a/Pasted_image_20241125173237.png b/source/images/20241127a/Pasted_image_20241125173237.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125173237.png
rename to source/images/20241127a/Pasted_image_20241125173237.png
diff --git a/source/images/20241129a/Pasted_image_20241125200146.png b/source/images/20241127a/Pasted_image_20241125200146.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125200146.png
rename to source/images/20241127a/Pasted_image_20241125200146.png
diff --git a/source/images/20241129a/Pasted_image_20241125203153.png b/source/images/20241127a/Pasted_image_20241125203153.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125203153.png
rename to source/images/20241127a/Pasted_image_20241125203153.png
diff --git a/source/images/20241129a/Pasted_image_20241125203351.png b/source/images/20241127a/Pasted_image_20241125203351.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125203351.png
rename to source/images/20241127a/Pasted_image_20241125203351.png
diff --git a/source/images/20241129a/Pasted_image_20241125204440.png b/source/images/20241127a/Pasted_image_20241125204440.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241125204440.png
rename to source/images/20241127a/Pasted_image_20241125204440.png
diff --git a/source/images/20241129a/Pasted_image_20241128142353.png b/source/images/20241127a/Pasted_image_20241128142353.png
similarity index 100%
rename from source/images/20241129a/Pasted_image_20241128142353.png
rename to source/images/20241127a/Pasted_image_20241128142353.png
diff --git a/source/images/20241129a/ogp-2.png b/source/images/20241127a/ogp-2.png
similarity index 100%
rename from source/images/20241129a/ogp-2.png
rename to source/images/20241127a/ogp-2.png
diff --git a/source/images/20241127a/thumbnail.png b/source/images/20241127a/thumbnail.png
new file mode 100644
index 00000000000..77740219795
Binary files /dev/null and b/source/images/20241127a/thumbnail.png differ
diff --git a/source/images/20241127a/thumbnail.png:Zone.Identifier b/source/images/20241127a/thumbnail.png:Zone.Identifier
new file mode 100644
index 00000000000..a45e1ac4c0c
--- /dev/null
+++ b/source/images/20241127a/thumbnail.png:Zone.Identifier
@@ -0,0 +1,2 @@
+[ZoneTransfer]
+ZoneId=3
diff --git "a/source/images/20241129a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2313.png" "b/source/images/20241127a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2313.png"
similarity index 100%
rename from "source/images/20241129a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2313.png"
rename to "source/images/20241127a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2313.png"
diff --git "a/source/images/20241129a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2314.png" "b/source/images/20241127a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2314.png"
similarity index 100%
rename from "source/images/20241129a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2314.png"
rename to "source/images/20241127a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2314.png"
diff --git "a/source/images/20241129a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2315.png" "b/source/images/20241127a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2315.png"
similarity index 100%
rename from "source/images/20241129a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2315.png"
rename to "source/images/20241127a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2315.png"
diff --git "a/source/images/20241129a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2316.png" "b/source/images/20241127a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2316.png"
similarity index 100%
rename from "source/images/20241129a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2316.png"
rename to "source/images/20241127a/\343\202\271\343\203\251\343\202\244\343\203\210\343\202\2316.png"