WebサイトをPWA（プログレッシブウェブアプリ）にする手順とその必要性
ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
WordPress PWA プラグイン比較 | Technote
プラグインを使用してPWA化してみたのですが、いくつかPWA用のプラグインがあるようなので比較してみました。 なお、インストール数などの情報は2018/10/7の時点でのものになります。 追記：2018/12/13 インストール数に変化があったものを更新しました。 じわじわと広がっているのを感じます。 追記：2019/6/20 色々と情報を更新しました。 PWA for WP & AMP インストール数：200+ 追記：2018/12/13 インストール数：2000+ 追記：2019/6/20 インストール数：7000+ 開発者３人 追記：2019/6/20 5/25に開発者が法人1社に変わったようです。 プラグイン一覧では名前が「PWA for WP」 特徴 名前にAMPとありますが、このプラグイン自体にAMP機能はなく「AMP for WP」がインストールされている場合にそれを考慮する
WordPress を数分で PWA 化するプラグイン Super Progressive Web Apps - FirstLayout
Super Progressive Web Apps とは？Google が推進しているのが PWA 。PWA とは、Web サイトをアプリにする仕組みです。 この PWA を簡単に WordPress に実装するできるのが、プラグインの Super Progressive Web Apps 。WordPress に PWA を実装するための優れたプラグインです。 PWA のホーム画面への追加機能・キャッシュ機能・オフライン機能と、欲しい機能に対応。また、プラグインの OneSignal – Free Web Push Notifications と連携すれば、PWA の Push 通知まで可能です。 さらに、設定が極めて簡単なことも特徴です。今日 WordPress を始めた方も、迷わず設定できるはずです。その上、PWA への対応が不完全な iOS 向けに、自動的に対策をしてくれます。
【コピペでOK】WordPressをPWA対応させる方法（プラグインなし） | SimoSimo
This domain may be for sale!
WordPressサイトをPWA化する方法＋戻るボタンの実装【おすすめ】 | マコブログ
サイトをPWA化させるとPVや収益が上がるって聞いたけど、それを導入するのって難しいですか？PWA自体が何かイマイチ理解していないので分かりやすく教えてもらえると助かります 先に一部だけ回答しておきます、サイトをPWA化させることでPVや収益は上がります、理由は利便性が上がるからです。 本記事では、サイト（WordPress）をPWA化させる方法について解説しつつ、一部のブラウザで起こる問題点について解決策を提案しております（←ここ重要） この記事解説していること １.そもそもPWAって何？【導入サイト紹介】 ２.WordPressサイトをPWA化させるには【導入方法】 ・プラグインで設定する方法【WordPressのみ】 ・手動で設定する方法【全サイト対応】 ３.おまけ：iOS（Safari）だと戻るボタンが消える問題 この記事におすすめな人 そもそもPWAって何？【導入サイト紹介】 P
WordPressサイトを一瞬でPWA化できる PWA for WordPress【プラグイン紹介】 | バシャログ。
今年の春頃、iOSのServiceWorker対応で、PWA（Progressive Web Apps)がWeb界隈を賑わせましたね。 私は6月にAndroid Bazaar and Conferenceに参加してまいりました。 春は東大の本郷キャンパスでしたが、秋は川崎で開催されます。現在も参加登録できます! 申込はconnpassから。 PWA for WordPress WordCamp Tokyo 2018や、私が参加した日本Androidの会9月定例会で紹介がありました。サイトをPWA化するためには、manifest.jsonとservice-worker.js、他にアイコン用の画像などが必要となります。 これらを非常に簡単に設定してくれるプラグインです！ (利用には対象のWordPressサイトがhttps化している必要があります) 使ってみました！ プラグインをインストールし
【不動産業界2社の実例比較】検索結果ページで見るSEOの戦いを分析／LIFULL HOME’S(ライフルホームズ) vs SUUMO(スーモ) | メソッド | 才流
今回はSUUMOが行なってきた施策を元に、検索サイトにおける検索結果ページ（一覧ページ）に対するSEOのあるべき姿を考えてみたいと思います。 検索結果ページのSEOのポイントHOME’S、SUUMO比較得られる学びこちらを整理しましょう。 前提：検索結果ページのSEOは、難易度が高い検索サイトをリリースすると 検索結果にぶら下がるいわゆる詳細（個社）ページの流入は伸びるが検索結果ページの流入は伸びないといった現象が共通して見られます。 検索結果ページのオリジナル性が低いことが問題であることが多いため 詳細ページをよりリッチに検索結果ページに情報を追加といった打ち手を継続的に行なうことで、検索結果ページのSEOパフォーマンスは上がっていきます。 検索結果ページは ユーザの滞在時間が長く回遊数も高いといったコンテンツなので、マーケティング上攻略する価値が非常に高いです。 2015年HOME’S
PWA for WordPress
This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. Description About this plugin To make your WordPress website to PWA, this plugin make two files, “Manifest” and “ServiceWorker” in your website. Manifest file is a json file that has configurati
Let’s get ready for PWA - Compin Activity Logs
はじめに ずーっと寝かしてたブログを思い出して少し書こうかと思います。 テーマは「 PWA 」： Progressive Web Apps。 最近にわかに話題になりはじめたキーワードです。 僕も3月から PWA の集中勉強会を主催して、自分でもリサーチしたり実践した結果をフィードバックする講演活動をしています。 ここでは、エンジニア以外の人にもわかるように、まずは PWA というのがどんなものなのかを説明します。 本題に入る前に、少しこれまでのイベントの映像や資料などをご紹介しておきます。 僕の資料はご自由に活用いただいて結構ですので、よかったらご覧ください。 また、5月以降にもイベントや講演を予定していますので、ぜひご来場ください。 日本 Android の会定例会 日本 Android の会 3月定例会「クロスプラットフォーム最前線2018」（2018/3/14） イベントページ：ht
Web業界的には、iOS 11.3最大の特徴はSafariでのPWAサポート開始だ！ | 初代編集長ブログ―安田英久
「PWA」は、アプリ的な機能をWebで実現する仕組みWeb担当者さんのなかには「PWA」という言葉にまだなじみがない方も多いかもしれません。 わかりやすく説明すると、「PWA」とは、スマホアプリのような機能や動作をWebサイトで実現するための仕組みです（「Progressive Web Apps（プログレッシブ ウェブ アプリ）」の略）。 ウェブ標準として定められている仕様に則ってHTML＋CSS＋JavaScriptで動的なサイトを作れば、 アプリストアを通さなくてもWebサイト経由で利用できスマホのホームスクリーンに起動アイコンを追加してアプリのような全画面で起動でき（ブラウザのURLバーなど非表示）ネットワーク接続がなくてもコンテンツを表示でき（キャッシュを活用）プッシュ通知もサイトから送れるそんな「アプリ的な」ものを実現できるというもの。 一番のポイントは「サクサク動くインターフェ
iOS版Safariにホーム画面アイコンを簡単に追加できるPWACompat
[レベル: 上級] PWAをサポートしていないブラウザでもホーム画面アイコンを追加できる仕組みとして、PWACompat を Google は公開しました。 PWACompat を構成すると、Web App Manifest を解釈しないブラウザために、関連する meta タグや link 要素を自動的に挿入してくれます。 PWACompat で iOS 版 Safari にもホーム画面アイコンを追加 iOS 版 Safari は Service Worker のサポートに着手しましたが、完成にはまだほど遠い状態です。 たとえば、Web App Manifest（マニフェスト ファイル）によるホーム画面アイコン追加の機能をまだサポートできていません。 iOS にホーム画面アイコンを追加させようとしたら、link rel="apple-touch-icon" のようなタグを別途追加する必要が
WordPressをPWA対応させる公式プラグインがリリース（が、まだ使える状態ではない）
[レベル: 上級] WordPress サイトを PWA 対応させるプラグインがプラグインディレクトリに公開されました。 このプラグインは、WordPress の VIP パートナーである XWP が中心となって開発し、加えて WordPress 本体の開発元である Automattic とさらには PWA 発展の旗振り役でもある Google が関わっています。 WordPress を PWA 化するプラグインはすでにたくさん公開されていますが、3社がタッグを組んでいるという点でこのプラグインはPWA対応のための公式プラグインと言ってもいいのではないでしょうか。 Service Worker, Web App Manifest, HTTPS PWA対応の公式プラグインと聞くとワクワクしますが、できることは非常に限られています。 現状では次の機能をサポートできています。 Service W
進化する 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 中級者以上が対象です)
de:code2018セッションフォローアップ「進化する Web ～ Progressive Web Apps の実装と応用 ～」 | Microsoft Docs
de:code2018セッションフォローアップ「進化する Web ～ Progressive Web Apps の実装と応用 ～」 07/03/2018 7 minutes to read ひさびさにブログを書く時間が取れたので、今ごろですが de:code 2018 で私が担当した AD09「進化する Web ～ Progressive Web Apps の実装と応用 ～」のについてのフォローアップ記事を書きます。 二日目の最終セッションにもかかわらず、ご参加くださいました皆様、誠にありがとうございました。 アンケートの内容を見るに、多くの方にご満足いただけたようで非常にうれしく思います。 この記事では、同セッションの内容について記述していきます。 進化する Web ～ Progressive Web Apps の実装と応用 ～ 進化する Web ～ Progressive Web Ap
Progressive Web Apps on Windows - Microsoft Edge Development | Microsoft Docs
Progressive Web Apps (PWAs) are applications that you build by using web technologies, and that can be installed and can run on all devices, from one codebase. PWAs provide native-like experiences to your users on supporting devices. They adapt to the capabilities supported by each device and they can also run in web browsers, like websites. To start building a PWA, see Get started with Progressiv
PWA版GoogleマップがGoogle Playからインストール可能に、PWA対応したGoogle検索は高速化に成功 #io18 #io18jp
[レベル: 中級] 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と申します」── Web UXの新たな基準を考える
Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、「PWABuilder 2.0」をリリース ～既存サイトの“PWA”移行を支援／デザインの刷新や“Feature Store”の新設など。「PWABuilder 2.1」も開発中
Monaca
PWA