Vue.jsで作ったゲームをインストール可能（PWA）にしてGitHub Pagesで公開してみた | DevelopersIO
はじめに おはようございます、加藤です。年末年始は実家の北海道に帰省するつもりだったのですが、見事にインフルエンザ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
こえのブログでのPWA ~ PWA編 ~ / PWA Night Vol.4
PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～の資料です。 https://pwanight.connpass.com/event/128434/
やっていこう。PWA
「PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～」にて登壇した発表資料です。 https://pwanight.connpass.com/event/128434
【実践】Google Play Store でPWA配信 (TWA) - Qiita
先日「GooglePlayストアでPWAが配信できるようになった！」という記事が話題になっていました。 Google Play Store now open for Progressive Web Apps 😱 実態は「Chrome72で実装されたTWA (Trusted Web Activity) を使用することで、URLバー無しでPWAページを開かせるAndroidアプリを開発できるようになった」という事です。 検証がてら実際にTWAでPWAをGooglPlayストアに公開してみたので手順を紹介したいと思います。 実際のAndroidプロジェクトはGitHubでも公開しています。 https://github.com/zprodev/QR-TWA 環境 AndroidStudioはver3.3.1を使用します。 公開するPWAはこちらのQRコードリーダーです。 https://qr.
PWAでここまでできる
スライド内の関連リンク * DiverseのPodcast https://podcast.diverse-inc.com/ * 採用ページ https://diverse-inc.co.jp/recruit/positions * 今回のサンプルGithub https://github.com/SAMUKEI/droidkaigi2019-sample-pwa * 今回のサンプル動画 https://youtu.be/ehW6397JceI * はじめてのプログレッシブ ウェブアプリ https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja * PWA Builder https://www.pwabuilder.com/ * How to Package Android https:
Google Play StoreでPWAを配信できるらしい | Hypertext Candy
この記事では、先日 Medium に公開された Maximiliano Firtman 氏による記事『Google Play Store now open for Progressive Web Apps 😱』を要約して感想などを加えています。 記事のタイトルを訳すと『Google Play ストアで PWA を配信できるようになった 😱』という感じでしょうか。Web エンジニアとしては惹かれるタイトルですよね。ただ私は Android 事情には疎いですし、結局どういうことなのか？記事を読んでまとめてみようと思いました。 まとめると Android 向け Chrome のバージョン72から Trusted Web Activity が実装された。 ネイティブアプリ内で Web アプリを起動する新しい仕組み。WebView など既存の同種の仕組みの欠点を補っている。よりネイティブと We
Google Play Store now open for Progressive Web Apps 😱
Disclaimer: I’m not affiliated with Google Play, Chrome or any other company mentioned. This is not an official statement; usage of the logo and name is just for illustration.⚠️ Updated version of this article ⏩ firt.dev Chrome 72 for Android shipped the long-awaited Trusted Web Activity feature, which means we can now distribute PWAs in the Google Play Store! I played with the feature for a while
業務システムでこそ使えるPWA - Speaker Deck
FRONTEND CONFERENCE 2018 https://2018.kfug.jp/ での発表資料です。
Firebaseを使って簡単にプッシュ通知を行う方法 | フロントエンドBlog | ミツエーリンクス
今月の初め、WebKit Feature StatusにおけるService Workersの項が「Under Consideration」から「In Development」となり、iOSのSafariでもService Workersが実装される可能性が高まりました。iOSでPWAが機能するとなればネイティブアプリへの影響が出る可能性は捨てきれませんが、iOSデバイスのシェアが多い日本ではこれを機にPWAの認知度が高まればと個人的にはとても期待しています。 Service WorkersがWebに与える恩恵はキャッシュによるオフライン化やファイルリクエストのインターセプトだけではありません、プッシュ通知を表示するためのpushイベントもService Workersで実行します。 今回はFirebase用いて簡易的なプッシュ通知を行う方法と、プッシュ通知を行う上での課題点などを記載しま
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
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
App Manifest Generator
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.
Vue.jsで作ったサイトをPWAに対応させてみる - じゅころぐAR
2018年はPWA(Progressive Web Application)が注目されつつあるので、先日Vue.jsで作成したWebサイトをPWA対応させてみたいと思います。 jyuko49.hatenablog.com PWAとは？ PWAのメリット SPAのアプリ化が簡単 WebのOSSを使い放題 Webアプリの機能を拡張 PWAに対応する Vue.jsプロジェクトをPWAボイラープレートで作成する アイコンを作る Lighthouseでチェックする PWAを動かしてみる iOS11.3 Android7.0 まとめ PWAとは？ "ホーム画面に追加"を行うことでネイティブアプリのように動作するWebアプリケーションです。オフラインキャッシュで快適に動作したり、Webプッシュ通知が受けられたりします。 Googleが提唱していた技術で、以前から気になってはいましたが、Microsoft
一日Nuxt.js入門[ジロッカソン体験記] - Qiita
はじめに ジロッカソン 2018に一人で参加して、現地ではじめマシマシてというチームを組み開発をしました。 チーム決めの時にPWA?Nuxt.js??という自分の謎のワードが飛んでいたのですが、面白そう！と思ってチームを組みました。 プロダクトとしては並んでいる時間に二郎をクリックしてポイントを貯めガチャを引くことができるジロッカーというサービスを作成しました。 1dayハッカソンだったのですが、その中でNuxt.jsを使ってみた感想をまとめます。 環境構築等は公式に詳しく書かれているため、そちらを参照してください。本投稿では、大枠について紹介します。 Nuxt.jsとは Nuxt.jsnの特徴を公式のドキュメントからわかりやすく、2行だけつまんで解説します。詳しくきになる人は、公式(はじめに |Nuxt.js)を参照ください Nuxt.js とはユニバーサルな Vue.js アプリケーシ
![一日Nuxt.js入門[ジロッカソン体験記] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/64d3c9beab5cc17444b1484da831a5a94041ae67/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU0JUI4JTgwJUU2JTk3JUE1TnV4dC5qcyVFNSU4NSVBNSVFOSU5NiU4MCU1QiVFMyU4MiVCOCVFMyU4MyVBRCVFMyU4MyU4MyVFMyU4MiVBQiVFMyU4MiVCRCVFMyU4MyVCMyVFNCVCRCU5MyVFOSVBOCU5MyVFOCVBOCU5OCU1RCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGNlYTFmZWMyYWRjODFkMWU3ZWFkYWJhMThjMTNiM2U%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwNGdlcnUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFlYWI3MWUyNTNkYTQxY2Q0MjcwYmEyYjgwZDBhNWRi%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D53fac30e2dba3df66f9630e9eeadb40d)
ネイティブアプリの代わりにPWAで戦う選択肢 / pwa-instead-of-native
PWAのメリットが強くなる時ってどんなときか考えた。 今回はネイティブアプリの代わりにPWAで頑張る話したけど、ネイティブアプリのありなしに関わらずWebを良くしていきたい。 紹介した自作PWA - http://ease.netlify.com/ (TODOリスト) - http://mottox2.com/ (ブログ)
シャニマスはPWA時代のGoogleMapなのかもしれないという話 - MANA-DOT
※ この記事はポエムです。 先日、 アイドルマスター シャイニーカラーズ がリリースされました。 僕自身はアイマスはちょっとアニメを見る程度で熱心なファンというわけではないのですが、こちらのゲームはゲーム内容だけではなく別の側面でも注目されていると思います。 それは、ブラウザ上で動くゲームであるというところです。ブラウザゲーム自体は古来から存在するものですが、このゲームが挑戦的なのは、「PWAであるブラウザゲーム」であるところであると思います(PWAであるかどうかは後述します)。 少し触ってみて「これは昨今のソーシャルゲーム的ゲームをPWAとしてアプローチしたとても挑戦的なプロダクトだ」と自分の中で盛り上がっているので、なぜ盛り上がっているかを冷めないうちに書いてみようと思います。 シャニマスはPWA？ そもそもPWAとはなんであったか PWA という言葉はGoogleが提唱して以降よく耳
Mercari Web / Frontend meetup #1 を開催しました | メルカリエンジニアリング
フロントエンドエンジニアの @nullpoo です。 2/19（月）にメルカリで外部登壇者の方々をお招きして Mercari Web / Frontend meetup #1 を開催したので、その様子をお届けします。 mercari.connpass.com @uskay 氏による、「Modern Webを作ろう / Progressive Web Apps と AMP」 宇都宮 佑亮氏(@uskay) – グーグル合同会社 gTech シニア モバイル ソリューションズ コンサルタント AMPやPWAの他に、表示速度やプッシュ通知許可の求め方など、ユーザーの体験を向上させるためのテクニックが満載の発表でした InstagramやSnapchatで提供されているストーリーと似たAMP Storyや、AMP内でもworker経由でJavaScriptが実行できるようになるかもしれないという話
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mdn/pwa-examples: Examples for progressive web apps.
ServiceWorker Side XXX
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
https://engineering.mercari.com/entry/2017/12/19/workbox
