Chrome 93 ではインストール要件を強化せず PWA をインストール可能にするには、実際にオフライン対応していることを必須にすると今年の 2 月に Google は事前告知していました。 現状では、コードでオフライン対応しているように見せかけるだけでもインストールできる、いわば抜け道が存在しています。 今年後半にリリース予定の Chrome 93 でインストール可能の要件を変更する予定でした。 しかしながら、いったん保留です。 理由を Google は次のように公式記事で説明しています。 Updated April 14th, 2021: We previously announced plans to update the installability criteria to ensure a PWA actually provides an offline experience.

管理画面とユーザー機能の調和を取り戻す！~クエリパフォーマンス改善の成功物語~ / Restore harmony between administrative and user functions!

[レベル: 中級] Google は PWA の発展、普及に力を入れていますが、自社プロダクトの PWA 化にも乗り出しています。 この記事では、PWA 対応した Google マップと Google 検索について紹介します。 PWA 版 Google マップの Google Maps Go は Google Play からインストール可能 PWA に対応した Google マップは今年の2月に正式にリリースされていました。 その後 PWA 版 Google マップは「Google Maps Go」という名称で、Google Play にアプリとして掲載されるまでに至りました。 「Google Maps Go は、Google マップ アプリの軽量版のプログレッシブ ウェブアプリで」と説明に書かれています。 「プログレッシブ ウェブアプリ」が何なのかを一般ユーザーが理解できるかどうかはとも

Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの

昨日 Twitter でこんな記事を発見しました。 PWA が来るって言っているエンジニアは今すぐ辞めろ 「instagram の PWA が最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、オワコンであった。」 もしかしてこれのことかな？ Instagram PWA is sooooooo impressive. I probably won't be able to distinguish it with its native app. InstagramのPWAが、デキが良すぎて感動してる。ネイティブアプリと見分けられる自信ない。 pic.twitter.com/DS8TfceBZ6 — Eiji Kitamura / えーじ (@agektmr) 2018年1月26日 確かに、この言い方は若干煽り気味のと

2018年の2月に入って、PWA（Progressive Web Apps）についていくつか大きな動きがありました。PWAは、HTML5の限界を突破するためにGoogleが推進しているクライアント（ブラウザ）側の高機能化技術で、Webアプリにネイティブアプリ並の操作性や表現力を持たせようとするものです。 以前、PWAについて書いた記事の中で、 AppleにはAppleの事情があり、「はいそうですか」とはいかない部分もある と書きましたが、どうやらAppleはmacOSとiOSの「Safari」でPWAをサポートする方向になったようです。 AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装 Microsoftは、その前の週にPWAを「Windows 10」で“ネイティブに”採用することを発

[レベル: 上級] Microsoft Edge ブラウザの開発版と Apple Safari ブラウザの開発版がともにデフォルトで Service Worker のサポートを有効にしました。 Service Workers: Going beyond the page – Microsoft Edge Dev Blog Release Notes for Safari Technology Preview 46 | WebKit Safari と Egde は Service Worker をサポートせず PWA（プログレッシブ ウェブ アプリ）の構築には必須と言ってもいい、Service Worker を現状でサポートするメジャーなブラウザは、Google の Chrome と Mozilla の Firefox です。 ほかには、Opera や Samsung Internet など

ForbesのWebサイトはユーザー体験の質の低さで知られてきた。Googleは8月のはじめに、ForbesのWebサイトの広告表示に関して「失格」と認定した。また米DIGIDAYの調査でも、Forbesがサイトで提供するユーザー体験の質の低さが指摘されている。現在、同社はこの問題に取り組む姿勢を見せている。 これまでForbesのWebサイトは、ユーザー体験の質の低さで知られてきた。Googleは8月のはじめに、ForbesのWebサイトの広告表示に関して「失格」と認定した。また米DIGIDAYがパブリッシャー幹部を対象に最近実施した調査でも、Forbesがサイトで提供するユーザー体験の質の低さが指摘されている。同社では採用応募ページですら、複数のWebページにまたがっているのだ。 UX改善の取り組み Forbesはこうした問題に取り組む姿勢を見せ、今年1月に新しいモバイル専用サイトをロ

Home / Bing / Bing To Crawl Web For PWAs For Inclusion In Windows App Store? Bing To Crawl Web For PWAs For Inclusion In Windows App Store? Barry Schwartz is the CEO of RustyBrick and a technologist, a New York Web service firm specializing in customized online technology that helps companies decrease costs and increase sales. Barry is also the founder of the Search Engine Roundtable and the News

先程、Twitterでここらへんの情報を見て、興奮しすぎて電車を1駅早く降りてしまったのですが、次の電車に乗ったら今度は降りる駅を乗り過ごしたくらい動揺しているフジイです。こんばんは。 今日の夜はインターネットの偉い人がザワついておるなあ…と思っていたら、こういうことでした。 @bradeeoh You can't imagine how happy I am. I organized an office party to celebrate! pic.twitter.com/sjJ8lddwkf — David (@medavidk) 2017年8月3日 iOSのサファリでService Workersが動くようになるかもしれない…。 と、書いてもなんのことか分かんないですよね。 超簡単に説明すると、スマホアプリみたいなことをブラウザできるようになる方向へ一歩進んだ(かもしれない)のです

[レベル: 上級] iOS で、PWA (プログレッシブ ウェブ アプリ）がサポートされる可能性が出てきました。 Service Worker が In Development に WebKit Bugzilla で Service Worker の ステータス が開発中を意味する「In development」になっていることを Marco Pöhler‏ 氏が発見しました ※WebKit Bugzilla は Safari ブラウザで使われている HTML レンダリングエンジンである WebKit の不具合や修正を管理するサイト Apple のエバンジェリストが認める ステータスが「In development」になっていることについてコメントを求められた Apple のウェブ テクノロジー エバンジェリストである Jonathan Davis 氏は、開発への取り組みが始まっていること

[レベル: 上級] PWA と AMP を組み合わせた興味深い構成が AMP の公式ブログで紹介されました。 「Shadow Reader」と呼ばれるこの構成では、PWA で構築したサイトの実質的なコンテンツとして AMP コンテンツを利用します。 PWA と AMP を連携する3つのパターン PWA と AMP を組み合わる構成には3つのパターンがあったのを覚えているでしょうか？ AMP as PWA AMP to PWA AMP in PWA 簡単におさらいしておきましょう。 1つ目の「AMP as PWA」は、サイトを AMP 単独で公開します。 概して言えば、PC 向けサイト/モバイル向けサイトとは別に、AMP サイトを公開するサイトが一般的です。 AMP サイトには別の URL が割り当てられます。 このブログも、AMP ページは別に存在します。 しかし、AMP as PWA で

一年以上前の記事なので、コードが古いです。気をつけて読んでください。 PWAとは？ 目的 技術スタック Service Worker PWAのview App Shell Content キャッシュ戦略 読み込みフロー Web App Manifest デザイン FirefoxとChromeしかService Workerないけどどうするの？ ネットワーク 実装 ライブラリ webpack-offline 構成 ファイル ルーティング アセットのインストール API周り SSR 資料 さいごに そういえばPWAの実装したことがなかったなと思ったので少し触ってみた。 PWAとは？ PWA(Progressive Web Apps) インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能

PWA時代とは PWAとは、ProgressiveWebAppsの略で、Webアプリケーションでのユーザ体験を向上させる仕組みです。 Google社が推進している技術で、最近のフロントエンドエンジニア界隈ではなかなかに盛り上がっているようです。 Angular Mobile Toolkit でフロントエンド実装を行えば、 本番用にビルドするだけでServiceWorkerが作られ、PWA対応が完了するというレベルまで来ているようです。 PWAでは、ファイルをキャッシュすることが可能で、携帯がオフラインの場合でも表示させることができます。 飛行機に乗っている間など、完全にネットワークにつながっていなくても、 キャッシュファイルをロードさせてコンテンツを表示できるというすぐれものです。 画像のレスポンシブ・Retina対応時代のimg レスポンシブ・retina対応時代のimgタグは下記のよう

某所で使った資料の公開版 用語整理 PWA: ネイティブアプリのようなUXを提供するための機能群 SPA: JSで遷移するシングルページアプリケーション AMP: 後述 PWAMP: AMPで流入させてPWAを起動する形式 MFI: モバイルファーストインデックス いまさら聞けないPWAとAMP アメブロ2017: Isomorphic Web Appの進化編 AMP とは イニシャルビューのためのHTMLの特殊なサブセット GoogleにホワイトリストされたHTML属性しか使えない GoogleにホワイトリストされたJSプラグインしか使えない CSSはHEADに全部書く AMP仕様を満たすと、Googleがキャッシュして、モバイルの検索流入ではそのキャッシュを使う HTTPS必須 必ずしも全ページをAMPに対応する必要はない PWA: ServiceWorker の機能 リソースの先読み

[レベル: 上級] PWA を実装するとウェブサイトをネイティブアプリのように機能させることができます。 では、PWA とアプリが対等になるのなら、PWA サイトがアプリストアに掲載され、インストールできるようになる可能性はあるのでしょうか？ Windows ストアには PWA が掲載 Windows Store のアプリカテゴリでは PWA が発見できるようになります。 5月に開催された Microsoft 主催のカンファレンスで紹介されました（該当箇所は 34:26〜。スライドは 49 ページから）。 つまり、ネイティブアプリではないのに PWA がアプリとして掲載されるのです。 そして、そこからインストールできます。 Windows Store での PWA 登録は革新的な試みだとして Google I/O 2017 の PWA セッションでも取り上げられました。 Google Pl