Progressive Web Apps（以下、PWA）は2018年ごろからホーム画面へのインストール機能やキャッシュ戦略等の技術視点でエンジニアの間で話題に挙がるようになりました。現在ではWebパフォーマンス、ユーザビリティ向上、PoC（実証実験）といったビジネス視点でも注目されており、多くのWeb実装にPWAが取り入れられています。 今回の記事では、国内のPWAの動向を振り返り、改めてPWA開発のスタンダードとこれからのPWAについてまとめます。 日本国内でのPWAの動向 2015年にPWAという名称が生まれ、Google Chromeを始めとした各ブラウザが順次PWAに対応していきます。2018年にiOSのSafariがService Workerに対応したことををきっかけに国内でもPWAが注目され始めました。筆者もその頃からPWAに興味を持ち、2019年2月に立ち上がったTechコ

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 この時点からさらに自分で使い込みながら

前回は、PWAの基礎知識について説明しました。今回は実際に制作してみたPWAに触れてもらいつつ、その内側・技術的側面について解説していきたいと思います。 今回の題材：光る電卓「Llumino（ルミノ）」2013年にiOSネイティブ版をお披露目したLluminoは、「計算をもっと楽しく」がコンセプトの電卓アプリ。当時は世界中で話題になりました。（もう5年前…！） 当時の制作過程については連載としてまとめていますので、興味がありましたらどうぞ。（👉 連載：Lluminoができるまで） 今回のチャレンジは、そんなLluminoを最新のWeb技術で再現・PWA化してみようというものです。 まずは実物を触ってみてください制作したWebアプリは https://pwa.llumino.app/ に配置しました。まずは実物を触って体感してみてください！ （昨日解禁になったばかりの「.app」ドメインだ

2022/01/17追記：この方法では無効化できません。【Chrome】ServiceWorkerを今度こそ決定的かつ完全に消去するを参照してください。 ServiceWorkersというAPIが存在します。 ブラウザをフルスクリーン表示したり、デスクトップにアイコンを作成したり、PUSH通知を行ったり、バックグラウンドでJavaScriptを動作させたりといった機能を提供します。1 見てのとおりユーザには何一つ利のない機能なので、必ず無効化しましょう。 なに、動かなくなるサイトがあって困る？ 大丈夫。 ServiceWorkersがないと動かないサイトは、存在そのものが不要なサイトです。 手順 PC版Chrome 無効化 URLにchrome://flags/と入力すると、全面英語の設定画面のようなものが出てきます。 最上部の検索欄に「Worker」および「PWA」「Progressiv

1｜「アイコン追加」・「プッシュ通知許諾」メッセージの表示パターン 今回紹介する各事例ですが、「ホーム画面へのアイコン追加」を促す方法と、「プッシュ通知」の許諾の取得方法を、前回の記事と同様にそれぞれ3パターンに分類しています。分類した各パターンを再度記載しておきます。 ホーム画面へのアイコン追加 パターン①：メッセージ表示なし（ユーザーが自発的にブラウザメニューから設定） パターン②：サイト閲覧時にデフォルトでメッセージを画面下部に自動表示 パターン③：アイコン追加を促す方法に工夫がある パターン①：プッシュ通知配信許諾のメッセージなし（またはプッシュ通知配信なし） パターン②：サイト閲覧開始直後にブラウザ固有の許諾ダイアログを自動表示 パターン③：許諾取得の方法に工夫がある 尚、以下の各事例がどのパターンに分類されているかは、「ホーム画面へのアイコン追加」「プッシュ通知許諾」のそれぞれ

[レベル: 上級] AMP の開発状況を示すロードマップの現状を紹介する記事を AMP プロジェクトの公式ブログが投稿しました。 正式リリースされた機能と開発中の機能、取り組みが始まったばかりの機能が数多く紹介されています。 個人的に気になった機能を2つ、この記事で取り上げます。 amp-next-page は AMP ページで無限スクロールを実装するコンポーネントです。 ページの下までスクロールすると追加のコンテンツが自動で読み込まれます。 EC サイトの商品リストページや、ソーシャルメディアのタイムライン、長いブログ記事などでおなじみの UI ですね。 無限スクロールが AMP ページでも利用できるようになります。 一般的に、AMP ページでは、内部リンクをたどった場合は AMP ページではなく通常のモバイルページに移動します。 amp-next-page を構成すれば、一連のコンテン

If you were looking for MSDN or TechNet blogs, please know that MSDN and TechNet blog sites have been retired, and blog content has been migrated and archived here. How to use this site Archived blogs are grouped alphabetically by the initial letter of the blog name. Select the initial letter from the TOC to see the full list of the blogs. You can also type the name of the blog or the title of the

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The easy way to turn a website into a Progressive Web App 原文公開日: 2017/11/21 著者: Alexandre Plennevaux Webサイトを簡単にPWA（Progressive Web App）に変える方法（翻訳） Progressive Web Appって何？ PWAは基本的にWebサイトの一種で、モバイルでアクセスするときにユーザーのデバイスに保存可能で、ネイティブアプリと同じように振る舞います。読み込み画面を備えていて、ChromeのUIを非表示にでき、接続が切れてもコンテンツが表示されます。最大のメリットはユーザーのエンゲージメント（engagement）を促進することです。AndroidのChromeブラウザ（他のモバイル用ブラウザについてはわか

Googleが提唱する「プログレッシブWebアプリ（PWA）」。そのコンセプトを理解し、実装に反映するには「アプリ感覚」の体験を実現することが必要です。ポイントを紹介します（PWAの入門記事も併せてどうぞ）。 グーグルのZach Cochが「Webとアプリの境界線はこれまでになくあいまいになっています」と述べたように、Webはかつてなく改良され、「高速なリッチアプリ感覚」の驚くべき体験を創出できるフェーズになりました。 しかし、Webには特有の課題があります。モバイルでWebサイトを見るとき、ブラウザーではなくネイティブアプリを利用してしまうように、モバイルでのWeb体験は完璧とは言えません。 よく直面する問題を挙げます。 低パフォーマンス：平均的なユーザーは、ロードに3秒以上かかるWebサイトからは離脱する。モバイルサイトの平均ロード時間は19秒程度と、大きなギャップがある レスポンシブ

[レベル: 上級] WordPress サイトを PWA 対応させるプラグインがプラグインディレクトリに公開されました。 このプラグインは、WordPress の VIP パートナーである XWP が中心となって開発し、加えて WordPress 本体の開発元である Automattic とさらには PWA 発展の旗振り役でもある Google が関わっています。 WordPress を PWA 化するプラグインはすでにたくさん公開されていますが、3社がタッグを組んでいるという点でこのプラグインはPWA対応のための公式プラグインと言ってもいいのではないでしょうか。 Service Worker, Web App Manifest, HTTPS PWA対応の公式プラグインと聞くとワクワクしますが、できることは非常に限られています。 現状では次の機能をサポートできています。 Service W

🔥 2022年にサイトの作りを変えまして、もう現状はこの記事の限りではありません。もしこちらの記事の実装を参照されるのであれば こちらのブランチ を参照ください。 これで何度目の挑戦でしょうか。記憶する限り、２年ぶり１０度目くらいのブログでございます。会社のパイセンの@ymotongpooさんは１２年もご自身のブログを継続されており、日々コンテンツとその作業に耐えうるだけの筋肉を増やし続けられているのを横目に、私はといえば過去に１年以上続いた書きものは日記も含めて一切なく、ブログはというと思い返してみれば2004年ごろのライブドアブログから始まり、辞めては乗り換え辞めては乗り換えを繰り返してきた挙句、最終的にはJekyllいじったあたりでさっぱり音信不通になったのが２年前。並びに、筋肉事情に関して申し上げると、最後にジムに行ったのも気づけば１年半が経っており、会員権が腐り始めている小太り

一年以上前の記事なので、コードが古いです。気をつけて読んでください。 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) インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能

追記: 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 / えー

2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった方に向けてセッションの内容を記事にまとめましたので、ぜひご覧ください。 進化する Web ～ Progressive Web Apps の実装と応用 ～ from Osamu Monoe この記事では、昨今話題に上ることが多いPWAことProgressive Webアプリケーションについて、実際の作り方を解説しながら、それがいったいどういったものであるかを詳(つまび)らかに紹介することを目的としています。 Webでは、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが本当かどうか記事

WordPressでAMP + PWA（プログレッシブ ウェブアプリ）を実装する方法を模索しながら、今はこうやっています ここ最近、PWA（プログレッシブ ウェブアプリ）という技術について見聞きする機会が増えてきて、AMP（Accelerated Mobile Pages）と組み合わせて実装する方法について、私の周囲では話題になっていました。 「PWAとかAMPってなんですか？」という方は、以下のページをご参考ください。 はじめてのプログレッシブ ウェブアプリ | Web | Google DevelopersAccelerated Mobile Pages Projectというわけで「WordPressでAMP + PWAを実装するにはどうすればいいのか」。ここ最近いろいろと試していましたが「この方法だとどうかな？」と思って試したことや、現在まで得た知識、感想などを以下にまとめました。

PWA（Progressive Web Apps）をやり始めているところが多くなりそれ自体は喜ばしいところです。ただ、最近のWebサイトで「通知しますか？」と言って来ることが多くなり正直ウザすぎです。誰がこんなの考えたんだってくらいイラっとします。 イメージですが、だいたいネイティブってというのは「お前のことが気に入った！いつでも連絡くれよ！」ってことでインストールするのに対して Web の場合は「たまたま今晩偶然に会っていい雰囲気だったけど多分もう会わないよね？」って感じで偶然意気投合しただけなのに後で連絡要らないよなと全てのサイトで思ってしまいます。 例え話がちょっとあれですが、詰まる所 Web とネイティブは同じようなインターフェースじゃ無いんだよと言いたいし、単純にサイト更新したから見てくださいの通知を実装してしまうセンスってどうなんだろうと思ったり。 プッシュ機能に限っては、サイ

普段は開発にもメモにもVS Codeを使っているのですが、VS CodeはChromebook等では使えません。そこでVS CodeのエディタエンジンであるMonaco Editorを、Azure Web Appsにデプロイして、PWAとして使ってみました。 PWAにすることで、ブラウザさえあればオフラインでも動作するようになり、エディタアプリのように利用できます。 Monaco Editor on Cloud https://monaco-on-cloud.azurewebsites.net 実際に、この記事もこのエディタで書きました。 以下に、今回使ってみた技術を列挙します。なお本件はGlobal Azure Bootcamp 2018@TokyoでLTをしたのですが、思ったよりもAzure関係ない技術が多かったので、こうして改めてまとめてみました。 Visual Studio Cod