ChromeのPWAインストール要件が変更に、オフライン対応必須。Chrome 89で警告
[レベル: 上級] Chrome での PWA インストールの要件が変更になります。 オフラインを実際にサポートしている必要があります。 Chrome 93 で変更が適用される予定ですが、リリースされたばかりの Chrome 89 ではオフラインサポートしていないと警告が出ます。 実際のオフラインサポートがPWAインストールの条件に Web担当者Forum の連載コラムで取り上げたように、Chrome での PWA インストール要件が変わります。 [PC 版 Chrome での PWA インストール] インストール可能にするにはオフライン対応している必要があり、そのチェック体制が厳しくなります。 技術的に言うと、これまでは、Service Worker に fetch イベントがあれば適合していました。 実際にはオフライン対応していなくても問題なかったのです（Chromeにそこまで検証する
Trusted Web Activityを触ってみる
暑くなってきましたね。なんか昨夜暑すぎて非常に寝苦しかったので、就寝をあきらめ、今まで「時間がない」を言い訳に着手していなかった技術検証を寝落ちするまでひとまず進めてみようと一人立ち上がったオジサンが私です。お久しぶりです。こちら改めまして 「会社の意見は一切代表していませんし、ありません。すべて私の個人的な見解です。」 な技術検証作業ログです。 実は2017年ごろにコンセプトが公開されたTrusted Web Activityという「フルスクリーンなChromeを一つのActivityとして立ち上げてPWAを表示する」ためのAndroidのフィーチャーを、残念ながら私は一切触って来なかった背景があり、概念としてはわかるんだけど実際どんなものかよくわかってなかったので、この寝れない夜を利用してこのブログをアプリ化してみることにしました。 0. 前提私はAndroidアプリ開発はスーパー初心
Trusted Web Activity のご紹介
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
やっていこう。PWA
「PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～」にて登壇した発表資料です。 https://pwanight.connpass.com/event/128434
Chrome 73 で Desktop PWA Support & mdbuf アップデート - mizchi's blog
developers.google.com Signed HTTP Exchange もですが、個人的に待望だった Desktop PWA が正式リリース。 PWAアプリをウェブアプリのように振る舞わせることができます。 例えば mdbuf を開いて、「mdbuf をインストール」を選択すると… モーダルが出て Win/Mac のアプリのように立ち上がります mdbuf について https://mdbuf.netlify.com サンプルで紹介しましたが、これは僕が作ってる markdown のプレビューツール です。 amachang さんや結城浩先生へのインタビュー、その他このブログの記事、各種書籍への原稿も全部これで書いています。 mdbuf v1.0.0: 最高の Mardkown Preview を目指して - mizchi's blog この時点からさらに自分で使い込みながら
mdbuf v1.0.0: 最高の Mardkown Preview を目指して - mizchi's blog
mdbuf, そこそこ使い物になりそうな品質になったので改めて紹介します。 https://markdown-buffer.netlify.com で遊べます。 コンセプト ブラウザで完結 編集とプレビューのみに注力 PWA 機能を最大限に活かす 特長: 高速な Markdown プレビュー 色々頑張ってみた結果、高速な入力が可能です。 試した限り、 100000 文字以上だと流石に重くなっていきます。将来的に領域を分割してレンダリングできないか実験中です。 Desktop PWA 対応 PWA アプリとして、オフラインで起動することが可能です。編集中のデータはブラウザ内に保存されます。 編集位置への自動スクロール Markdown を編集すると、プレビュー側の対応する行へ自動的にフォーカスします。 自分が知る限りこの機能を実現してるのは mdbuf だけです。 アウトライン機能 指定した
Chrome 68 ベータ版: ホーム画面に追加、Payment Handler、Page Lifecycle
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer - Speaker Deck
Chrome で Desktop PWAs が実装されたので Twitter Lite を macOS デスクトップで使う - kondoumh のブログ
Chrome 67 の feature flags に Desktop PWAs が入って Android で使える PWA が macOS や Windows でも使える日が近づいてきました。 Chrome のタブを別ウィンドウで開いておくよりもデスクトップアプリらしい振る舞いをします。Chrome に限らずメジャーブラウザが対応中。かなり前から Chrome にはサイトをアプリケーション化する機能がありましたが、PWA が Web 標準であること、サイト側が PWA に対応することで、よりアプリらしい体験を得ることができます。 Desktop PWAs は Chrome 67 では無効化されているため chrome://flags で有効化します。 昨年末に PWA サイトとして話題になった dev.to や Twitter Lite で試せます。 dev.to 有効化して PWA 対
Chrome に PWA for Desktop が来ていたので next-editor で試した - mizchi's blog
追記: Canary じゃなくてもいいらしいのでタイトル修正した。が…実装具合はよくわからない 今年中に来るとは聞いていたやつ。要はウェブアプリを デスクトップアプリ化する。Electron と違って Chrome の Sandbox と同じ権限で動いている Twitter Lite をデスクトップ PWA にして使ってるんだけど、最 & 高です。 Mac だと Chrome Canary で enable-desktop-pwas のフラグを立てると使えます。 pic.twitter.com/0TPhe8gyQL— Eiji Kitamura / えーじ (@agektmr) 2018年7月12日 ちなみに Chrome Canary + フラグは上級者向けなので、自身のない方はいましばらくお待ち下さい。そのうち安定版で普通に使えるようになります。— Eiji Kitamura / えー
ブラウザ上で完結するGit組み込みエディタ作っている - mizchi's blog
PWA-Editor(仮) デザインとかは適当なんだけど、コンセプト的にどこまで実装可能かの検証を一通り終えた。頑張れば本格的なものが作れそう、という手応えがある。 IndexedDB バックエンドに fs 動かして ismorphic-git を動かしている。 UIは全然足りないが、 ポテンシャル的には GitHub に push できることも検証済み。ServiceWorker でオフラインで動くようになっている。 デプロイ先は https://nervous-kilby-73c9b0.netlify.com/ 開発中のものなので、予告なく互換が壊れることがある。 動機 Chromebook 買ったんだけど、やはり開発機として使うには厳しい気持ちがあった。主にまっとうなエディタがないのが辛い。cloud9 とか試したけど、辛かった。 フロントエンドのツール周りはJSで完結して PWA
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。 PWA（Progressive Web Apps）は本当に「アリ」なのか――？ ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。 一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Goog
Engadget | Technology News & Reviews
How to watch Polaris Dawn astronauts attempt the first commercial spacewalk
進化する Web ～ Progressive Web Apps の実装と応用 ～
de:code2018の登壇で使用したスライドです。 セッションの内容は、こちらの記事にまるっとまとめてありますのでぜひご覧ください。 https://blogs.msdn.microsoft.com/osamum/2018/07/03/about_pwa/ == 概要 == Progressive Web Apps (PWA) は Service Worker に代表される新しい API を複数組み合わせて実現する新しい Web アプリケーションの概念です。PWA は新旧問わず、ブラウザーの能力に応じた最適なユーザー体験を提供し、新しいブラウザーにはこれまでの Web にはなかった、ネイティブアプリのような体験も実装できます。 このセッションでは、PWA の概念と具体的な実装方法、その技術の応用について紹介します。(※本セッションは JavaScript 中級者以上が対象です)
PWAで何ができるようになるのか / What does PWA do
PWAとその他の技術との比較 PWAが出てきた背景 Progressive Web App Checklist Service Workerとは Web App Manifestとは
Progressive Web App Checklistを読んでまとめてみた - mottox2 blog
Googleが公開しているProgressive Web App Checklistをサラッと読んでまとめてみました。 思ったより普通で、Webでいい体験を提供しましょうというニュアンスが強めだった。 > BaselineBaseline Lighthouseで計測可能。基本的なチェックリスト。 Site is served over HTTP Pages are responsive on tablets & mobile devices レスポンシブ対応をすること All app URLs load while offline オフラインでも読み込みが出来ること ServiceWokerによってオフライン対応が可能 Metadata provided for Add to Home screen HomeScreenに追加する時のmeta情報を提供すること manifest.jsonに
実践PWA：光る電卓「Llumino PWA」の開発と技術解説 - ここぽんのーと
前回は、PWAの基礎知識について説明しました。今回は実際に制作してみたPWAに触れてもらいつつ、その内側・技術的側面について解説していきたいと思います。 今回の題材：光る電卓「Llumino（ルミノ）」2013年にiOSネイティブ版をお披露目したLluminoは、「計算をもっと楽しく」がコンセプトの電卓アプリ。当時は世界中で話題になりました。（もう5年前…！） 当時の制作過程については連載としてまとめていますので、興味がありましたらどうぞ。（👉 連載：Lluminoができるまで） 今回のチャレンジは、そんなLluminoを最新のWeb技術で再現・PWA化してみようというものです。 まずは実物を触ってみてください制作したWebアプリは https://pwa.llumino.app/ に配置しました。まずは実物を触って体感してみてください！ （昨日解禁になったばかりの「.app」ドメインだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
pixiv chatstory の
PWA としての取り組み
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
モバイルアプリのブーム終焉と、その次に来るもの | アドビUX道場 #UXDojo - Adobe Blog
