PWAサービスワーカーとIndexedDBによるオフライン動作可能Webなアプリを作った話

PWA Builderについても少しだけ試してみた

Transcript

1. Web技術のみで スマホアプリを作る話 東京都立大学システムデザイン学部 情報科学科2年　あゆ 𝕏 @aya172957 mail ayu@ayutaso.com
2. 自己紹介 名前：あゆ 戸籍ネーム：堤　歩斗 所属：TMU::SD::CS::B2 好きな言語：Python 好きなデータベース：SQLite AtCodee：茶～緑 つくったもの：石池、Qualtet、kibaco拡張機能、等
3. Web技術でスマホアプリが作れるの？ • はい • 一般にスマホアプリを作るにはiOS向けならSwift、Android向けならkotlin等での開 発が必要 • クロスプラットフォーム対応技術である React Native や Flutter も使いません • PWAという技術を使います
4. Progressive Web Appsを知っていますか？私は知ってい ます。 • PWA(Progressive Web Apps) ◦ サイト上で「アプリをインストールしますか？」と聞かれるアレ • 通常のWebアプリとの違い ◦ インストールが可能 ◦ オフライン動作をサポート ◦ プッシュ通知が使える(今回は省略) • ネイティブアプリとの違い ◦ インストールしなくても利用できる ▪ (ブラウザから利用できる) ◦ 更新が容易 ▪ ストアの審査が不要 ◦ 完全クロスプラットフォーム対応
5. PWAの作り方 1. まずWebアプリを用意します 2. マニフェストを準備します 3. サービスワーカーを加えます 4. 完成
6. インストール可能を実現するWeb App Manifest Webアプリケーションをデバイスのホーム画面 に登録できるようにする技術 JSON形式でWebアプリケーションの情報を記 述したファイルを用意し、それをHTMLのhead 要素内に入れてあげるだけで、インストール可 能になる backgournd_color 背景色 display Webアプリの表示方 法 icons アイコン画像 name アプリ名 short_name 短いアプリ名 theme_color テーマカラー start_url 最初に表示される URL
7. オフライン動作を実現する Service Workers バックグラウンドでネットワークプロキシ処理を実 行する Service Workers はWebブラウザとWebサーバー の間に割り込み(右図)、プロキシのように動作する JavaScriptプログラムを実現する。 オフライン時にWebサーバーにアクセスせずにブ ラウザ内に保存されたリソースを Webアプリケー ションに返す処理を書けば良い。 https://knowledge.sakura.ad.jp/23201/#WebAndroidWeb_App_Manifest
8. 完成したものがこちらです インストール方法 Android : [インストール] iOS : [共有] → [ホーム画面 に追加] https://timetable.ayutaso.com
9. 技術スタック https://api.ayutaso.com/docs api/{day}/{period} 静的ホスティングServer バックエンドAPI 曜日・時限を指定して 授業情報をGET ユーザーの時間割情報 (ローカルストレージ) 新規登録時 閲覧時
10. IndexedDB ユーザーの登録した授業の情報はサーバー には保存していない ブラウザのローカルストレージに保存してい る IndexedDBはユーザーのブラウザ内にデー タを永続的に保存できる。 autoIncrementやトランザクション、簡単なク エリも実行出来て便利。
11. Service Workerが作るキャッシュ Service Worker内の実装でファイルをキャッシュ出来る。 今回は全部キャッシュした。
12. でもこれ、アプリじゃなくね？ • アプリにもできます！ ◦ PWA Builderというツールを使います(pwabuilder.com) • PWA製ウェブアプリをGoogle PlayやApp Storeなでへアップロード可能な形式へ変 換してくれる(すごい) • 中身はウェブビューなので、ネイティブアプリとは当然違う
13. PWA Builderを試す URLを入力するだけで、Windows、Android、 iOS、Meta Quest(!?)向けのアプリに変換できるみ たい ですが…
14. アプリをストアに出すのはめんどくさい • AppleのApp Storeでアプリを公開するには、年間99ドルの費用がかかります。 • iOS向けアプリをビルドするにはXCodeが必要です。これはMacでしか使えません。 • Google Playでは、一度のみ25ドルの登録料が必要です。 ちなみにChrome Webストアは一度のみ5ドルです。(安い)
15. PWAで良くね？ この程度のアプリケーションであれば、スマートフォン向けのアプリケーションとして提供し たい場合でも、PWAを活用することで開発者としては手軽に そしてより良いユーザー体験を提供出来るはずです。 PWAはいいぞ。
16. 開発で困ったこと Offline動作のテストが難しい ただのキャッシュで上手くいってないのに上手く 言ってるように見える場合がある • 開発者ツールに便利な機能があった ServiceWorkerのInstallは上手くいってるけど実 はfetchでまだエラー吐いたりしてる
17. リポジトリとか フロント(React) https://github.com/Atotti/pwa-timetable-app バックエンドAPI(FastAPI) https://github.com/Atotti/pwa-timetable-app アプリケーション https://timetable.ayutaso.com Swagger https://api.ayutaso.com/docs