タグ

PWAに関するyanbowのブックマーク (6)

  • Nuxt.js × GAS Execution API で同人頒布会向け予約システムをごにょごにょする PWA を作る - Qiita

    はじめに 「GASでQRコードを使った同人頒布会向け予約システムを作った話」の続きです。 半年ほど前、日最大級のアナログゲーム頒布会である「ゲームマーケット2018春」で、上記の予約システムを実際に運用してみたところ、 (こちらからの声かけ後を含め)QRコードを提示してくれたのは6割弱 0.5割くらいの人がガラケーないしキャリアメールのため、QRコード自体を受信できていない という問題にぶち当たりました。 QR コードが提示されなかった場合、スマホの Google スプレッドシートアプリから予約番号 or 名前を検索していましたが、いまいち操作性がよろしくない1。 というわけで、いっそスプレッドシートを外部 API 化して、スマホアプリから予約情報の検索&購入確定できるようにして、なんならアプリに QR コード読み取り機能も埋め込んじゃおう、というのが今回の趣旨です。 PWA (Prog

    Nuxt.js × GAS Execution API で同人頒布会向け予約システムをごにょごにょする PWA を作る - Qiita
  • 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

    PWA (Progressive Web Apps) とは | murashun.jp
    yanbow
    yanbow 2019/05/30
  • AMP in PWA Google公式チュートリアルの日本語訳 - Qiita

    プログレッシブウェブAMP この記事はGoogle DevelopersのProgressive Web AMPsの日語訳です。Progressive Web AMPsの多分一番いいチュートリアルです。 しかし、Service Worker, Promise, AMPに関して基礎的な知識がないと途中で挫折することになると思います。 そのような場合はこの記事をストック(←重要)した後、以下の参考記事を読むことをおすすめします。 そもそもプログレッシブウェブAMPって何?って方へ: https://www.suzukikenichi.com/blog/pwamp-is-combination-of-pwa-and-amp/ Service Workerって何?って方へ: https://developers.google.com/web/fundamentals/getting-starte

    AMP in PWA Google公式チュートリアルの日本語訳 - Qiita
    yanbow
    yanbow 2019/05/30
  • AMPページをPWA化する。AMPでServiceWorkerを使う方法 - Qiita

    AMP縛りでページ作ったけど、やっぱりPWA化もしたいと思いやってみたらあまりにも簡単にできたので手順を残しておきます。 出来上がったページをLighthouseで計測した結果、PWAの点数は100点満点でした。 TL;DR Web App Manifest Generator使ってmanifest.jsonを生成 amp-install-serviceworkerでAMPでもService Worker動く workboxでService Workerコードを簡単に生成 AMP(Accelerated Mobile Pages)とは モバイルページを高速化するためのもの 速くするというより遅くしない 詳しくはampproject.orgを見て下さい PWA(Progressive Web Apps)とは Webとネイティブアプリの良いところを合わせてUXを良くしようとする仕組み オフライ

    AMPページをPWA化する。AMPでServiceWorkerを使う方法 - Qiita
    yanbow
    yanbow 2019/03/28
  • プログレッシブウェブアプリ (PWA) を作成する前に知っておきたいこと

    もうこの表示をみることはなくなるかもしれないです。 これまで Apple 製品でのサポートがされていなかったために、あまり日の目を見ない生活を送っていた PWA 技術。 ですが、iOS 11.3 でやっとサポートされ、今後ますます注目をあびるであろう技術となっています。 ただ、調べていくうちに「ネイティブアプリを作成する意味がなる!」というわけにはいかないことが分かりました。 結論 やはり PWA は良い仕組みである。 ただ、アプリによっては相性の合わないケースもあるので、細かく調査が必要。 相性の合うケース コンテンツ内容があまりかわらないサイト (例: ブログ) 情報発信がメインのサイト (例:ニュースサイト) 相性の合わないケース リアルタイム性の強いゲーム PWA 化するには、既に公開されているサイトように PWA に必要なファイル作成すれば、すぐに実装できる。 「Generate

    yanbow
    yanbow 2019/01/31
  • モバイルWebの高速表示&アプリライクな操作性を実現する、AMP&PWA導入サイト事例8選 | in-Pocket インポケット

    AMP導入事例 AMPはAccelerated Mobile Pagesの略称で、モバイルWebサイトを高速表示するための技術です。サイトをAMP対応させることで、Google検索結果に「AMP」ラベルがつくため、高速表示できることがユーザーサイドからもあらかじめ認識することができます。 1.The Guardian https://www.theguardian.com/ イギリスの新聞大手「The Guardian」のWebサイトです。各記事がAMP対応しており、検索エンジンから高速で記事の表示が可能。気になった記事をすぐに閲覧することができて利便性は抜群。関連記事等のリンクをタップするとサイト(theguardian.com)内の記事へと遷移します。 2.朝日新聞デジタル https://www.asahi.com 「The Guardian」同様に各記事がAMP対応。高速で記事表

    モバイルWebの高速表示&アプリライクな操作性を実現する、AMP&PWA導入サイト事例8選 | in-Pocket インポケット
  • 1