Vue CLI 3 で PWA チュートリアル（Service Workers / Add to Home Screen / Push Notifications）Vue.jsFirebasePWAFirebaseCloudMessagingvue-cli オリジナル記事 https://blog.n11sh1.com/vue-pwa-tutorial-ja/ PWAとは？ PWA（Progressive Web App） の一部に以下のような機能があります。 Service Workers Add to Home Screen Push Notifications これにより Webアプリ として開発しても Nativeアプリ 同様のUXをユーザーに提供できます。 ここらへんを Vue を使って試していきます。 Ref. Progressive Web Apps | Web | Goog
PWAで一番厄介な問題と言えばキャッシュではないでしょうか。開発中などで、キャッシュを更新したい時にできなかったり、キャッシュを読み込んでしまって修正が反映されずにバグ解決に時間を取られるかも知れません。 そこでちょっとしたTipsを紹介します。 Service Worker登録時の工夫 それは registration.onupdatefound を仕込んでおくということです。このメソッドはService Workerが更新されているかどうかを検知してくれます。もし更新されている場合は、updateメソッドを使って更新できます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, o
この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。 以下を見てからこの記事をみるといい感じです。 * AWS Amplify Consoleでビルド＆デプロイ * お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる はじめに Webアプリをドメイン取って公開したら、次はPWA対応もしたくなりますよね。PWA(Progressive Web Apps)とは、Webアプリをモバイルアプリのようにスマホにインストールすることができる技術です。インストールするというか、スマホのホームにアイコンが追加され、一見モバイルアプリのように動作させることができます。 Vueで作成したWebアプリなら、簡単にPWA対応を実装することができます。 この技術のアルアルとして、「キャッシュがクリアされなく
久しぶりに、所得税・住民税・事業税・国保の計算をバージョンアップしたいなぁと考え、必要性はそこまでないですがPWA化してみます。 PWAをこのシステムに導入する利点とすれば、キャッシュを使ってオフライン対応ですね。今後は、Webプッシュも使ってようと考えてますが。 環境 Windows 10 Pro vue cli 3 Node 10.13 PWAとno PWAの違い まずは、PWAの指定有無で2つのプロジェクトを作成し、その差分からどのようにバージョンアップしていくか計画を立てます。 PWA対応プロジェクトの作成 vueプロジェクトを作成します。 [highlight_bash]vue create pwa[/highlight_bash] 最初にManualを選択し、あとはPWAを追加しただけです。 [highlight_basic]Vue CLI v3.4.1 ┌──────────
先日作った Web アプリ ココイチ注文料金簡易カリキュレータ を PWA 化した話です。 PWA・・・PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。 ([PWAとは（Progressive Web Appsとは） | SEO用語集：意味/解説/SEO効果など [SEO HACKS]](https://www.seohacks.net/basic/terms/pwa/)) 作った経緯や使っているサービスなどについては一つ前の記事を見てください。 概要 最初から PWA 対応したアプリケーションを作る場合は、 Vue CLI でプロジェクトを作る際に Progressive Web App (PWA) Support にチェックを入れておきます。 そうすると
Webブラウザからアクセスできる端末側の機能は増加しており、Webアプリでも随時サポートしていく姿勢が必要です。Webアプリの進歩を止めてしまえば、Webアプリの存在自体が過去のものとなってしまうでしょう。 PWAは比較的新しい概念ですが、開発コミュニティでは以前から活発に議論されています。コミュニティの参加者は過去2年間で堅実に成長しており、今後も一定のペースで増え続けていくでしょう。 著名な企業もこの時流に乗りPWAを採用し始めています。たとえば、Twitter（3億2,800万人のユーザーを有するソーシャルネットワーク）とAliExpress（世界最大級のeコマースサイト）では、すでにPWAを実用化しています。実用化されているPWAを手に取って確認したい方は Twitter Lite をお試しください。 PWAのメリット PWAには次のようなメリットがあります。これらは開発者・エンド
MonacaでPWAを作ってFirebaseにDeployする Monacaはアシアル株式会社が運営しているアプリ開発環境で、 3個までの非商用のプロジェクトであれば無料から使えます。 Monaca クラウド IDEというブラウザ上で動くIDEを使用すると 環境構築の必要なく、iOSやAndroidアプリの開発ができます。 また最近では、ネイティブアプリのような動作をするウェブアプリである PWA(Progressive Web Apps)の開発も可能です。 Monacaは外部サービスと連携してクラウド IDEから 直接Deployすることも可能です。 FirebaseでBasic認証 社内専用のアプリやテスト用のアプリのように公開されては困る場合 アクセス制限のためにせめてBasic認証くらいはかけたいですよね。 FirebaseでBasic認証をかけてHostingするやり方については
Googleが昨年発表した、Webアプリをネイティブアプリのように使えるようにするしくみ「PWA（Progressive Web Apps）」が話題です。既存サイトをPWA化する方法をサンプルコードをもとに解説します。 ここ最近はプログレッシブWebアプリ（Progressive Web Apps、PWA）の話題をよく耳にするとともに、これが未来のWebなのかどうかが議論の的になっています。ネイティブアプリ vs PWA論争に加わるつもりはありませんが、PWAがモバイルデバイス対応を強化し、ユーザーエクスペリエンスを向上することだけは確かです。2018年までにはモバイルからのアクセス数がほかのすべてのデバイスからのアクセス数を上回ると予測されるなかで、どうしてこの流れを無視できるのでしょうか。 良いニュースは、PWAの作成は難しくないということです。実際のところ既存のサイトをPWA化するこ
PWA（Progressive Web App）は、主にスマートフォン向けのWebアプリをネイティブアプリ風にするためのテクニックとして注目されています。あまり知られていませんが、PWAはデスクトップのWebブラウザでも恩恵があり、キャッシュを使った高速化や、Webプッシュなどの機能が利用できます。さらにブラウザにGoogle Chromeを使うことで、PWAに対応したWebアプリをデスクトップアプリケーションのようにインストールすることができます。 今回、クラウド版のMonaca IDEもPWAに対応し、皆さんのローカルコンピュータ上に配置できるようになりました！ 利用手順は、WindowsもmacOSも同じ操作になります。 Google Chromeの設定を変更する 執筆時点（2019年01月現在）ではデスクトップPWAに対応するためにGoogle Chromeの設定を変更しなければな
祝PWA対応！MonacaアプリをFirebase/GitHub Pagesへデプロイする 2018年12月3日 技術情報 Firebase, GitHub Pages, Monaca, PWA 中津川篤司 MonacaはHTML5/CSS/JavaScriptを使ってスマートフォンアプリを開発します。ネイティブのプラグインも使えますが、基本的にはWeb標準の技術を用います。そのため、アプリのコードをWebサイトでも使いたいという声をよく聞きます。 そこで、アプリとWebサイトをゆるく繋ぐ技術として注目したいのがPWA（Progressive Web Apps）です。PWAは特定の技術ワードという訳ではなく、Webアプリケーションをよりスマートフォンアプリに近づけるためのベストプラクティス集といった位置づけになります。 先日、MonacaがPWA開発に対応しました。今回はその基本的な使い方
What's PWA ? Progressive Web Apps （プログレッシブ ウェブ アップス）の略 Googleが推進している、モバイルユーザーの体験（UX）向上を目的とするプロジェクト・技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く