PWA Night CONFERENCE 2022の登壇資料です。
PWA Night CONFERENCE 2022の登壇資料です。
The Web App Manifest is a JSON document that provides application metadata for Progressive Web Apps. Use the form below to generate the JSON file and optionally upload an app icon.
はじめに 「GASでQRコードを使った同人頒布会向け予約システムを作った話」の続きです。 半年ほど前、日本最大級のアナログゲーム頒布会である「ゲームマーケット2018春」で、上記の予約システムを実際に運用してみたところ、 （こちらからの声かけ後を含め）QRコードを提示してくれたのは6割弱 0.5割くらいの人がガラケーないしキャリアメールのため、QRコード自体を受信できていない という問題にぶち当たりました。 QR コードが提示されなかった場合、スマホの Google スプレッドシートアプリから予約番号 or 名前を検索していましたが、いまいち操作性がよろしくない1。 というわけで、いっそスプレッドシートを外部 API 化して、スマホアプリから予約情報の検索＆購入確定できるようにして、なんならアプリに QR コード読み取り機能も埋め込んじゃおう、というのが今回の趣旨です。 PWA (Prog
はじめに おはようございます、加藤です。年末年始は実家の北海道に帰省するつもりだったのですが、見事にインフルエンザB型にかかってしまって、急遽キャンセルしました... 予定が全て吹っ飛んで暇になったので、年末年始は下記の教材を使ってVue.jsを勉強していました。 超Vue JS 2 入門 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む) まだ7割しか終わっていないですが、せっかくなので簡単なゲームをインストール可能な状態で作って公開してみました。 新規プロジェクトの場合 Vue CLIで新規プロジェクトを作成する際に、指定する事でPWAとしてプロジェクトをセットアップできます。 npx -p @vue/cli vue create new-project # Manually select features を選択する Vue CLI v4.1.2
数年前からGoogleは「Progressive Web Apps」（PWA）という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」（PWA）とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ
[レベル: 上級] この記事では、Chrome Dev Summit 2019 の PWA 関連セッションのハイライトをレポートします。 僕はデベロッパーではないので技術的な部分、特にコーディングについては言及しません。 テクニカルな内容は記事最後で紹介する動画でご確認ください。 では、PWA の最新事情を一緒に見ていきましょう！ ウェブプラットフォームとしての PWA 新興国のような通信環境が整っていない国々でもウェブを利用しやすくする。 スマートフォンや PC などあらゆるデバイスでウェブにアクセスできるようにする。 ネイティブアプリと同等な機能をウェブアプリでも提供することが重要。 airbnb 事例 airbnb はネイティブアプリから PWA サイトでのサービス提供に移行した。 その結果、初回訪問ユーザーの 65 % はウェブ経由になった。 成果: パフォーマンス（読み込み速度）
All slide content and descriptions are owned by their creators.
直近プッシュ通知の実装が必要になったためハマったところ中心に結果をメモる。 受け取り側 pwa-moduleはOneSignalをサポートしているため、Nuxtでプッシュ通知をやりたい場合これを使うのが一番簡単。 pwa.nuxtjs.org とりあえずpwa moduleとone signal moduleを入れてnuxt.config.jsに設定を書けば受け取り側の設定は終わる。 yarn add @nuxtjs/onesignal @nuxtjs/pwa nuxt.config.js // 省略 modules: [ '@nuxtjs/onesignal', '@nuxtjs/pwa' ], oneSignal: { init: { appId: 'One Signalコンソールで発行したID', allowLocalhostAsSecureOrigin: true, // loca
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 PWAをテーマにしたコミュニティ「PWA Night」を運営する菅家大地さんが、既存のWebアプリをPWA化する簡単な実装方法を解説します。 はじめまして、菅家（@kan_dai）といいます。普段は株式会社TAMという会社でフロントエンドをメインに、クライアントのWebサイト制作やWebサービスの開発をしています。PWA（Progressive Web Apps）をテーマにしたコミュニティ「PWA Night」の運営もしています。 さて、2018年ごろからPWAという言葉を聞く機会が多くなってきました。2019年現在、毎月コンスタントにPWAに関する仕事の相談を受けるようになっており、PWAへの関心の高まりを感じます。日本経済新聞やスマートフォン版Yahoo! Japanといった有名サービスでの
ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
これはなに？ SPAのキャッシュコントロールは難しい問題だけど、ちゃんと仕組みを理解してただしい戦略を使えばそんなに難しくないよという話。 Disclaimer この記事は2019年10月くらいにおける筆者の経験と見解に基づくものです。だいたい間違ってないとは思いますが内容の正確性は保証しませんし、2ヶ月くらいするとFirebaseないしNuxt.jsの進歩によりココに書かれていることが嘘になる可能性はあります。また、特定の記事や個人を中傷する意図はありません。筆者の所属する組織やその類とは関係がありません。 なんで難しい(と思われている)の？ そもそもの前提としてちゃんとやらないとアプリケーションのリリースがままならないというプレッシャーがあります。 そのうえで... (1) SPAの構成ファイルをキャッシュしようとする輩がたくさんいる Hostingサービス（ブラウザキャッシュ） CD
久しぶりに、所得税・住民税・事業税・国保の計算をバージョンアップしたいなぁと考え、必要性はそこまでないですが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 ┌──────────
builderscon tokyo 2019 の発表資料です
初めましてsatoshiです。 エンジニアとしては業務未経験のエンジニアの僕と非エンジニアであるCEOの二人三脚で開発したバックエンドオールFirebaseアプリの知見を残しておきたいと思い記事にします。 学生エンジニアが数ヶ月で一気にプロダクトを完成させる工程という観点でも参考になれば幸いです。 アプリ概要 「Wilico」というヘルスケアCtoCサービスを開発しました。 Wilicoはダイエットや食事管理が必要なタイミングに合わせて、ユーザーと管理栄養士さんをマッチングし、すぐにプロによる食事管理を受けることができるサービスです。 〜生きるために食べる時代から、(健康に)生きるために痩せる時代へ〜 飽食の時代と言われるようになり、好きなものを好きなだけ食べることができる現代ですが、その先に待っているのは生活習慣病です。 すなわち、健康に生きるためには、好きなものばかり食べるわけにはいか
最近ScrapboxをデスクトップPWAとして使い始めました。 やはりデスクトップアプリとしてDockに表示されるだけで体験はすごく良くなるなー PWAもっといろんなサービスで使えるようになってほしいです（オフライン動作とかとりあえず要らないんでアプリとしてインストールだけでもさせてほしいなぁ） Webサービスのデスクトップアプリ化で感じる利点は、具体的にはショートカットやSpotlightで呼び出しやすいといったことくらいなのですが、OSのインタフェースから自然に使えるという体験はヘビーユースしているWebサービスを更にヘビーに使うきっかけになりえるなと。 自分自身、よく使うWebサービスは個別アプリにしたいと日頃から思っており、Electronを使ってよく使うWebサービスは個人利用用にアプリ化したりしてました。 ただElectronはアプリサイズが大きいのと、Gmail等一部のWeb
1. PWAs (Progressive Web Apps) were introduced by Google in 2015 and have grown in popularity since 2017 according to Google Trends. 2. PWAs aim to have aspects of native apps by using technologies like the Web App Manifest and Service Workers to add functionality like being installable and working offline. 3. Developers can check if their web app meets PWA criteria by using tools like the Progres
1年くらい前に仕事でNuxt.jsをいじる機会があったんだけどそれ以来使ってなかった。 ただ、GW中にNuxt tech bookを読んだところ久々にいじりたくなってしまい。 そこでちょうどFirebase HostingとPWA化に関して調べてたとこだったので、Nuxt.jsのサイトをPWA化してFirebase Hostingで動かす手慣らしでもしておこうかと思いやってみた。 ただ、普通にやっても面白くないので一応Lighthouseのスコアを満点にすることを目指してみることにした。 コンテンツはNuxtのスターターキットの初期生成されるページ。このページを対象に行う。 以下、Firebase Hostingの設定・Nuxtのプロジェクト作成・PWA設定・Lighthouseのスコア上げの流れで説明してます。 一応ソースはこちらで。 nuxt-firebase-hosting-samp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
