タグ

PWAに関するakira_maruのブックマーク (10)

  • 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分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか

    WebサイトをPWA(プログレッシブウェブアプリ)にする手順とその必要性
  • 簡単過ぎる!GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、Googleのスプレッドシートを利用して誰でも手軽にPWAアプリを開発して公開することができるサービスをご紹介します! スプレッドシートにデータを準備するだけなので、エンジニア以外の方でも簡単にアプリ開発を楽しむことができます。多彩な機能をグラフィカルなGUIで追加していくことも可能なので、ご興味のある方はぜひ参考にしてみてください! 【 Glide 】 ■「Glide」の使い方 それでは、まず最初にGlideをどのように使っていけばよいのかを見ていきましょう! サイトにアクセスしたら【Sign Up】ボタンをクリックして無償のユーザー登録を済ませておきます。 GlideはGoogleのスプレッドシートを利用するので、自分のGoogleアカウントから簡単にログインできるようになっています。 ログインが完了すると自分専用のダッシュボードが

    簡単過ぎる!GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた! - paiza times
  • 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化している必要があります) 使ってみました! プラグインをインストールし

    WordPressサイトを一瞬でPWA化できる PWA for WordPress【プラグイン紹介】 | バシャログ。
  • WordPressのPWA化が簡単にできるプラグイン「PWA for WordPress」がやばい #wctokyo

    そもそもPWAとは PWA=Progressive Web Apps 段階的な実装、累進的な進歩が可能なWeb アプリ Webサイトがアプリになる • スマートフォンのホーム画面にアイコンを設置できる • インストール時にWebコンテンツやリソースのキャッシュし、表示の高速化を見込める • キャッシュされたJavaScript がオフラインでアプリを制御可能 • 以下今のところAndroidだけの機能 バックグラウンドでの動作(Background Sync) Push通知 PWAのいいところ PWAはWebとアプリのいいとこ取りが可能 ・動作が早い オフラインのキャッシュを表示 ・導入が早い 既存コンテンツにちょっと足すだけ 一から専用コンテンツを作らなくていい ・アプリの良いところが使える ホーム画面にアイコン設置 Push通知 バックグラウンドで処理 ・Webのいいところが使える 検

    WordPressのPWA化が簡単にできるプラグイン「PWA for WordPress」がやばい #wctokyo
  • Challenge PWA!! WordCamp Tokyo 2018

    2018年3月末、iOS+Safari の ServiceWorker 搭載により、いよいよスマートフォンの99%のデバイスで PWA が稼働できる下地が整いました。 私たちの Web サイト、Web アプリケーションは、これから「アプリ」としてユーザーのホーム画面へ進出していくことができるのです! このセッションでは、PWA (Progressive Web Apps) とはどんなものなのか、その利点ご紹介しつつ、WordPress の PWA化について、その簡単な手法や注意点などのノウハウを時間の許す限りお伝えしたいと思います。 また、WordPress PWA 化プラグイン「PWA for WordPress」を利用したクイックな WordPress サイトの PWA化のデモもお披露目したいと思っています。 https://wordpress.org/plugins/pwa4wp/

    Challenge PWA!! WordCamp Tokyo 2018
  • PWA素人のPWA素人の為のライトニングトーク #okamoba

    2018年4月28に開催された 岡山モバイルアプリ開発もくもく会でのLT資料です。 https://okmoku.connpass.com/event/80432/ PWAとは何か、PWAを作るにはどうすればよいかについて調べて実際にコードを書いて実行してみました。

    PWA素人のPWA素人の為のライトニングトーク #okamoba
  • iOSの11.3からのPWA対応でできるようになったこと

    With iOS 11.3, Apple has silently added support for the basic set of new technologies behind the idea of “Progressive… 今回のiOSのアップデートでService Workerが使えるようになったのはSafariブラウザのみでWeb Viewを使っているFirefox、Chrome、Fabookのアプリ内ブラウザではService Workerは動作しません。 Twitterのアプリ内ブラウザはSafari View Controllerを使っているのでService Workerが動作します。 iOSのPWAでできること (iOS 11.3以前から使えるものも入っています) 位置情報方位磁石、速度メーター、ジャイロスコープなどのセンサーカメラ音声出力スピーチ音声合成App

  • PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita

    What's PWA ? Progressive Web Apps (プログレッシブ ウェブ アップス)の略 Googleが推進している、モバイルユーザーの体験(UX)向上を目的とするプロジェクト技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi

    PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
  • 注目のサイト改善施策PWAとは?企業の最新活用事例5選 | 株式会社パンタグラフ

    ・サイトに検索からの流入を増やしたい ・商品ページに人が集まらない などに困ったことはありませんか? 上記の悩みは、いわゆる“SEO対策”をすれば、解決しそうな問題です。しかし、具体的な策がわからず、悪戦苦闘中というウェブマーケティング担当者も少なくないでしょう。 最近では、コンテンツマーケティングが普及してきたこともあり、「狙ったターゲットに適切な情報を届ける」ことがGoogleからの評価を上げる1つの策であることがわかってきました。 しかし、それだけでは不十分です。検索エンジンに好かれるサイトになるためには、サイトの力(内容だけでなく表示速度の速さなどの技術的な側面)も非常に重要なポイントになります。 そこで今回は、現在モバイルサイトの改善において最もホットな施策と言っても過言ではない『PWA対応』について、国内の事例とともにご紹介します。 読み込み速度や表示の高速化といったサイト強化

    注目のサイト改善施策PWAとは?企業の最新活用事例5選 | 株式会社パンタグラフ
  • WordPress を PWA に!ホーム画面への追加機能を実装 - FirstLayout

    メリット多くのサイトやサービスが導入しているのが PWA 。 Google が推進する PWA は、ウェブサイトとアプリのメリットを併せ持つウェブアプリの仕組みです。 Twitter や Instagram 、日経電子版などが導入し、訪問数やページビューを高めています。 成功例として真っ先に挙げられるのが TwitterTwitter Lite として提供されている PWA 版 Twitter は、閲覧ページ数やツイートの投稿数が高まっています。 また、通常のアプリのサイズは約 72MB に対し、Twitter Lite は 約 0.16MB しかありません。それでいて使い勝手は通常のアプリとほぼ変わりません。 参考:PWA 対応した Twitter は毎日 100 万のユーザーがホーム画面アイコン経由 #IO17JP 日のサイトでは、楽天レシピが成功例として 2017 年の Goo

    WordPress を PWA に!ホーム画面への追加機能を実装 - FirstLayout
  • 1