PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。 PWA（Progressive Web Apps）は本当に「アリ」なのか――？ ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。 一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Goog
結局 PWA は来るの？来ないの？
昨日 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日 確かに、この言い方は若干煽り気味のと
令和4年のPush通知を改めて整理する
はじめに iOSのPush通知は定期的にアップデートを繰り返しており、常に最新の技術を追っていく必要があります。 本記事では令和4年時点での全体像把握のため、概要の整理を行いました。 ※ あくまで全体感のキャッチアップを目的としているため、各トピックの詳細な解説は行っていません。 Push通知とは サーバーサイドから、任意のタイミングでユーザーの特定端末に通知を送信できる仕組み AppleのPush通知基盤であるAPNsに通知の送信をリクエストし、そこからユーザー端末に対してデータが送信される 似たものとしてローカル通知があるが、こちらはアプリ内の特定タイミングで通知を登録するもの 公式ドキュメントはこちら 要素 APNs Appleが提供しているPush通知基盤 ユーザー端末へのPush通知の送信はここを介して行われる Production環境とSandbox環境がある Producti
【速報】iOSがWEBプッシュ通知対応！PWAを無料サポートする企業とは？
iOSがWEBプッシュ通知に対応！ 抑えておきたいPWA化とは iOSに対応していないことから、PC・Androidスマホ・タブレットでの利用に限られていたWEBプッシュ通知。この度、Apple社の発表により、2023年ごろからiOSがWEBプッシュ通知に対応することがわかりました。 いよいよiOSがWEBプッシュ通知に対応。その経緯は？ 2022年6月6日のApple社WWDC(世界開発者会議)にて、iPhoneなどを展開するApple社がiOS16からWEBプッシュ通知に対応すると正式に発表。これまで、AppleはWebサイトを介してプッシュ通知をデバイスへ送信することを許可していませんでした。 今回の発表により、集客施策としてWEBプッシュ通知の導入を検討している企業・マーケティング担当者には、次のようなメリットがあります。 iOS対応による企業側のメリットは？ iPhoneユーザー
PWA対応サイトをAndroid APK（AAB）に変換する | Sqripts
こんにちは。GSです。 今回は前回（PWA対応サイトをApp Storeにリリースする）に引き続き、PWA対応サイトをAndroidアプリとしてリリースできる形にする（APK/AAB化）までの工程を行ってみたいと思います。 もちろん前回と同じように、「テンプレート的に作成しリリースする」というところを目指してみたいと思います。 今回は、前回ご紹介したPWABuilderを利用するのではなく、Google純正ツールであるBubblewrapを使用してみたいと思います。 💡 今回の作業はその殆どをコマンドで行います。 Bubblewrap Bubblewrapとは？ Bubblewrapは、Trusted Web Activity（TWA）を使用してProgressive Web App（PWA）を起動するAndroidアプリケーションのプロジェクトを、開発者が作成、構築、更新できるように設
結局PWAってどうなの？ - kk-web
また最近 PWA についていろいろとわかってきたので、現時点で持ち合わせている知見をだらだらーっと書いていこうと思います。 --- ## そもそも PWA とは [プログレッシブウェブアプリ (PWA)](https://developer.mozilla.org/ja/docs/Web/Pr
【TWA】完全開発ガイド＝超簡単にPWAをPlay Storeで配信しよう
PWAに対応したWebサイト・Webアプリケーションはほんの少し手を加えるだけでAPKを作成することができ、Google Play Storeに配信することができるのです。 本稿ではPWAのアプリ化を実現する技術「TWA (Trusted Web Activity) 」のすべてを伝授します。 TWAがあればAndroid開発は用無し 本セクションではTWAについて解説します。 リード文で説明した通り、TWAとはTrusted Web Activityの略称でWebアプリをネイティブアプリのように振る舞うPWAを更に進化させ、APKとしてパッケージ化・Google Play Storeに配信できる最近提唱された技術です。 TWAのメリット TWAのメリットは以下の通りです。 Java/Kotlinでの開発が不要 環境構築すら不要 クロスプラットフォーム開発ですべてのOSに対応できる Goog
PWA対応サイトをApp Storeにリリースする | Sqripts
こんにちは。GSです。 みなさんは既存のPWA対応サイトをモバイルアプリとしてAppStoreにリリースしたいと考えたとき、どのような手段でそれを実現するでしょうか？ ぱっと思いうかぶのは ・ネイティブ開発（Objective-C、Swiftなど）でいわゆる「ガワアプリ」を作成 でしょうか。 Androidであれば「ガワアプリ」を作ることなくPWA対応サイト（厳密にはTWA）もGoogle Playストアからリリース可能ですが、iOSではPWA対応サイトをApp Storeからリリースすることはできません。 この「ガワアプリ」ですが、単純に作ると機能足らず（PWA読み込み中に真っ白になるとか、プッシュ通知ができないとか）になりますし、かと言って作り込めば「ガワアプリなのに作るのに時間かかりすぎ＋メンテナンスコスト高すぎ」なんてことも。 「ガワアプリ」でやることは概ね決まっているかと思うで、
PWA(Progressive Web Apps)対応サイトの作り方・実装方法まとめ・入門 － AWS上で学習したPWA導入例とLighthouse Report Viewerの使い方 - NRIネットコムBlog
小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe
Next.js で作成した Web アプリを PWA 対応する | DevelopersIO
経緯 趣味が手芸（ミシン）の妻からある日突然、slack でこんな画像が送信されてきました。 特に難しいものではなかったので、隙間時間でサッと作って Cloudflare Pages にデプロイしました。 Cloth Price Calculator 計算したログを残せたほうがいいんじゃないか、そのログから合計をだしたりできたほうがいいのではないかなど色々と提案してみたのですが、これくらいシンプルなほうが使い勝手がいいとのことだったので希望通りに実装しました。 結果そこそこの反響があり、せっかくなのでオフラインでも動作するように PWA 対応をしてみました。 Next.js で PWA 対応 https://github.com/hbsnow/cloth-price-calculator/tree/v1.0.0 対応前のコードは上記になります。 ここでは Next.js の公式サイトにある
OAuth2対応したPWAをiOSでホーム画面に追加すると認証が厳しい - yasutomogのブログ
概要 社内アプリをPWAで構築したときのはなし 社内の諸々はGoogleアカウントで管理しているので、認証はGoogleのOAuth2を使用 PWAはNuxt.jsを使って作成し、APIはPHPのLaravel（社内サイトがLaravelを使ってたので流用）を使って作成 Google OAuth 2.0 認証を使用 結論（感想） Nuxt.jsを使うことで、単純なPWA構築はSPAの開発経験者であればいける（キャッシュ機構、バックグラウンド実行、オンラインとオフラインの切替時の制御とか、この辺のナレッジを溜めることでPWA経験者としての優位性が出てくると思う） OAuth2を使用する場合、認証画面を開くときに単純なリダイレクト（ブラウザの別タブで表示される）にするよりかは、window.openで認証画面を開き、認証成功時にwindowを自動で閉じるような流れにするほうが、UI/UX的にい
【解決方法】iOS端末でPWAのスプラッシュ画面が真っ白になる - Qiita
問題 iOS端末でPWA（プログレッシブウェブアプリ）のスプラッシュ画面が真っ白になり、アイコン、アプリ名などが表示されない。 バージョン iOS 11.3 詳細 manifest.jsonでName、background_color、iconを設定した場合、 Androidの場合は上記を組み合わせたスプラッシュ画面が表示される iOSの場合は真っ白な画面が表示される manifest.json { "name": "Weather PWA", "short_name": "Weather", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144
自社運営のWebアプリをPWA化した際にハマった話（OAuthなど） - APC 技術ブログ
はじめに 先進サービス開発事業部の高橋です。主にフロントエンド開発を担当しています。今回は私たちの部署で運営しているソーシャルRSSサービス「NEIGHBORS」をPWA化した際にやったことを書いていこうと思います。 NEIGHBORS | ひとりの興味をみんなの知識に とはいえ、比較的短期間で実装するという目標を掲げていたということもあり、プッシュ通知みたいなすごくネイティブっぽい機能は実装しておらず、キャッシュコントロールやホームに追加してアプリっぽく振る舞うといった比較的簡易な形で落ち着かせています。なので、この記事ではPWAの実装自体について詳しく記載していくというよりは、それまで動いていた機能がPWAというかServiceWorkerを使うことでうまく動かなくなった点に重きを置いています。 PWAとは PWA(Progressive Web App)とは、ざっくりいうと、Webア
PRPL パターン実装の具体例調査と比較 - Qiita
PRPL パターンとは Google I/O 2016 で提案されたものですが、詳しくはこちらの記事がとても分かりやすいです。 上の記事から一部を以下に引用します。 PRPL は、Progressive Web App（PWA）を構築および配信するためのパターンで、アプリの配信と起動時のパフォーマンスに重点を置いています。 PRPL は次の言葉を表しています。 Push: 最初の URL ルートに不可欠なリソースを Push（プッシュ）する。 Render: 最初のルートを Render（レンダリング）する。 Pre-cache: 残りのルートを Pre-cache（事前キャッシュ）する。 Lazy-load: オンデマンドで残りのルートを Lazy-load（遅延読み込み）する。 少しだけ補足すると、ここでいう Push というのは、 HTTP/2 Push を指します。 例えば JS
TechFeed ProのPM兼UXデザイナーが語る、PWAのデメリット・メリット
関心が高まりつつあるPWA（Progressive Web Apps）についての技術・情報交換の場である「PWA Night」。Vol.14の今回はUI/UXがテーマです。株式会社テックフィードCEOで、「TechFeed Pro」のプロダクトマネージャーでありUXデザイナーでもある白石俊平氏は、同アプリ開発の経験からUI/UX設計の2つの原則について話しました。 TechFeed ProのUI/UX 白石俊平氏（以下、白石）：始めようと思います。「TechFeed ProのUI/UX」というタイトルでやりたいと思います。 軽く自己紹介すると、株式会社テックフィードというところの社長をやってます。「TechFeed Pro」というプロダクトがあるんですけれども、そのプロダクトマネージャーとかUXデザイナーとかもやっています。なので、ビジネスからUXデザイン……僕、開発者でもあるので、そうい
最高のUXを目指して、1人月でWebアプリを開発した話
関心が高まりつつあるPWAについての技術・情報交換の場である「PWA Night」。Vol.14の今回はUI/UXがテーマです。「YouTubeをみんなでワイワイ見るためのサービスDJ7の話」というテーマで登壇したのは、Imagawa Takaya氏。1人月で開発したYouTubeの同期再生アプリ「DJ7」について、短期間での開発工程の工夫などを語りました。 ユーザーが各機能にアクセスしやすくするためのデザイン Imagawa Takaya氏：3週目に行ったことはこちらになります。今までは機能の実装がメインだったのに対して、この週からはデザインをやりました。先ほどのプロトタイプでもお見せしたとおり、DJ7ではロジックの実装とデザインの工程を明確に分けました。これはデザインしたあとで機能を増やしたくなってしまい、手戻りが発生してしまうのが嫌なためです。 この週に意識したのは、実装した機能をU
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ
数年前からGoogleは「Progressive Web Apps」（PWA）という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」（PWA）とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ
Apply instant loading with the PRPL pattern | Articles | web.dev
Apply instant loading with the PRPL pattern Stay organized with collections Save and categorize content based on your preferences. PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster: Preload the late-discovered resources. Render the initial route as soon as possible. Pre-cache remaining assets. Lazy load other routes and non-critical assets. In t
How we built Twitter Lite
We’re excited to introduce you to Twitter Lite, a Progressive Web App that is available at mobile.twitter.com. Twitter Lite is fast and responsive, uses less data, takes up less storage space, and supports push notifications and offline use in modern browsers. The web is becoming a platform for lightweight apps that can be accessed on-demand, installed without friction, and incrementally updated.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
