Nuxt.js+TypeScriptなアプリをProgressive Web App(PWA)化する - Qiita
Nuxt.js #2 Advent Calendar 2018の4日目の投稿となります。 Nuxt.jsにTypeScriptを適用したプロジェクトとして下記をよく利用させてもらっています。そちらがまだPWA化していなかったので、対応してみました。 jeehyukwon/nuxt-serverless: Nuxt.js Serverless SSR Starter on AWS (Lambda + API Gateway + S3) with Serverless Framework https://github.com/jeehyukwon/nuxt-serverless Progressive Web App(PWA)とは Googleが力を入れるプログレッシブウェブアプリ（PWA）とはなにか？ | SEO研究所サクラサクラボ https://www.sakurasaku-labo.j
PWAのプッシュ通知の仕組み
PWAウェブプッシュ 2018.02.08 yamamoto エンジニアの山本です。 Progressive Web Applicationの入門記事『PWA対応をするためにやった最低限のこと』に続きまして、プッシュ通知を実装していきたいのですが、その前にWebプッシュの仕組みを理解する必要があると感じたため、本投稿ではどのようにWebプッシュが機能しているのかについて、説明します。 Webプッシュの登録から送信まで Webプッシュに関して、大きく分けて２つの段階があります。 登録が完了するまでの準備段階 プッシュ通知を送信する実行段階 この仕組みを段階的に確認しながら、プッシュ通知の理解を深めていただければと思います。 （準備段階）Webプッシュの登録が完了するまでのフロー まずは、Webプッシュの登録が完了するまでのフローをみていきます。 全体像はこんな感じです。 ステップ１ ユーザー
PWAストアの実現性についての考察 – One IT Thing
We’ve been using the Bing Crawler to identify PWAs on the web for nearly a year, and as we’ve reviewed the nearly 1.5 million candidates, 「私たちはこの一年ほど、Bingのクローラを使ってウェブ上のPWAを識別してきました。そして150万ほどの候補を確認しました」 https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/#1ZY7hmpLgydiexUj.97 Bingでインターネットをクロールしたところ150万のPWAが見つかったそうです。 去年2018年のストアアプリ登録本数がGoogle Play（320万本）、App
iOS版Safariにホーム画面アイコンを簡単に追加できるPWACompat
[レベル: 上級] PWAをサポートしていないブラウザでもホーム画面アイコンを追加できる仕組みとして、PWACompat を Google は公開しました。 PWACompat を構成すると、Web App Manifest を解釈しないブラウザために、関連する meta タグや link 要素を自動的に挿入してくれます。 PWACompat で iOS 版 Safari にもホーム画面アイコンを追加 iOS 版 Safari は Service Worker のサポートに着手しましたが、完成にはまだほど遠い状態です。 たとえば、Web App Manifest（マニフェスト ファイル）によるホーム画面アイコン追加の機能をまだサポートできていません。 iOS にホーム画面アイコンを追加させようとしたら、link rel="apple-touch-icon" のようなタグを別途追加する必要が
PWA (Progressive Web Apps) とは | murashun.jp
［ ＋ expand ］PWA (Progressive Web Apps) とはプログレッシブレスポンシブネットワークに依存しないアプリケーション感覚常に最新安全発見しやすい再エンゲージメント可能インストール可能リンク可能Web App Manifestbackground_color メンバーdescription メンバーdir メンバーdisplay メンバーicons メンバーlang メンバーname メンバーorientation メンバーprefer_related_applications メンバーrelated_applications メンバーscope メンバーshort_name メンバーstart_url メンバーtheme_color メンバーmanifest.json の存在をブラウザに伝えるWeb App Manifest をテストするService Wo
自社運営のWebアプリをPWA化した際にハマった話（OAuthなど） - APC 技術ブログ
はじめに 先進サービス開発事業部の高橋です。主にフロントエンド開発を担当しています。今回は私たちの部署で運営しているソーシャルRSSサービス「NEIGHBORS」をPWA化した際にやったことを書いていこうと思います。 NEIGHBORS | ひとりの興味をみんなの知識に とはいえ、比較的短期間で実装するという目標を掲げていたということもあり、プッシュ通知みたいなすごくネイティブっぽい機能は実装しておらず、キャッシュコントロールやホームに追加してアプリっぽく振る舞うといった比較的簡易な形で落ち着かせています。なので、この記事ではPWAの実装自体について詳しく記載していくというよりは、それまで動いていた機能がPWAというかServiceWorkerを使うことでうまく動かなくなった点に重きを置いています。 PWAとは PWA(Progressive Web App)とは、ざっくりいうと、Webア
PWAで「ホーム画面に追加」が表示されない時に確認する事 - 文系プログラマによるTIPSブログ
以外としょうもない理由で表示されないんですよね〜 最近PWAが徐々に浸透してきましたね。 PWAは概念的な言葉なので、いざ具体的にPWAに対応しようとすると、「PWAってそもそも何だ？」となります。 ネットで調べると、ブラウザでサイトを表示した時に「ホーム画面に追加」ダイアログが表示されるようにする事もPWAの一つである事が解ります。 しかし、いざ対応してみたけど、何故か「ホーム画面に追加ダイアログ」が一向に表示されません。 今回はその原因を少しだけまとめてみようと思います。 manifest.jsonがhtmlソース内に定義されていない ServiceWorkerが登録されていない サイトがTLSに対応していない サイト訪問回数が2回ではない サイトの訪問間隔が5分以上ではない manifest.json内のアイコン画像が404である ブラウザやcurlコマンド等でアイコン画像のURLを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside