ネイティブアプリと同様の機能をウェブアプリに追加できる技術、それがProgressive Web Apps (PWA)です。iOSでも近年、徐々にPWAの機能が追加されています。これらの流れは、ユーザービリティに重きを置く昨今の潮流に即しているように感じます。 この発表では、PWAの現状とその可能…
PWAの今とこれから、iOSでの対応状況 / PWA now and in the future, status of support on iOS
ネイティブアプリと同様の機能をウェブアプリに追加できる技術、それがProgressive Web Apps (PWA)です。iOSでも近年、徐々にPWAの機能が追加されています。これらの流れは、ユーザービリティに重きを置く昨今の潮流に即しているように感じます。 この発表では、PWAの現状とその可能…
PWAを開発する上での考慮事項メモ - Qiita
本記事は記録用です。 開発していく上で考慮しなければいけない要素を述べたものです。 テーマ Androidでフルスクリーンでサクサク動くPWA ※PWAが何かについては他の記事を参照してください。 課題 １.トップページにアクセスした際に複数ページをcacheしにいく。 ２.新しいコンテンツをcahceするときは古いcacheをきちんと削除する。 実装 1 とりあえず下記レポジトリからhttp-serverモジュールで動く静的ファイル一式をgit clone 2 sever.jsがサーバ立ち上げファイルなので、node ./server.js若しくはnpm run start さてこれでサンプルの環境が整いました。 上記で挙げた課題を一つ一つ潰していきましょう。 まずこの写真のように、ブラウザキャッシュとSWのキャッシュが混合しているとSWのキャッシュだけを追いにくいので、DevToolの
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より)
2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった方に向けてセッションの内容を記事にまとめましたので、ぜひご覧ください。 進化する Web ～ Progressive Web Apps の実装と応用 ～ from Osamu Monoe この記事では、昨今話題に上ることが多いPWAことProgressive Webアプリケーションについて、実際の作り方を解説しながら、それがいったいどういったものであるかを詳(つまび)らかに紹介することを目的としています。 Webでは、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが本当かどうか記事
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 PWAs. Vide
【新機能】PC版「Googleフォト」がPWA化、まるでネイティブアプリに変身！
人気オンラインストレージサービス「Googleフォト」のデスクトップ版が、Googleが提唱するPWAに対応しました。PWA化により、Web版のGoogleフォトをあたかもネイティブアプリのように利用できるようになります。 Googleフォトのデスクトップ版がPWAに対応！ Google（グーグル）が提供しているオンラインストレージサービス「Googleフォト」のデスクトップ版（パソコン版）が、このたびPWA（Progressive Web Apps）に対応しました。 PWA（Progressive Web Apps）とは、WebサービスをWebブラウザーとは別に独立したウィンドウで表示し、あたかもネイティブアプリのように利用できるようにする仕組みです。PWAは通常のWebサイトよりもレスポンスが速いとされ、ユーザーの操作性の向上が謳われています。また、Webベースでサービスを利用できるた
ServiceWorkerを簡単に書けるworkbox-swの使い方 - Qiita
workbox-swの使い方 GMOペパボ Advent Calendar 2017の11日分のエントリーになります。 皆さんはPWA(Progressive Web Apps)をご存知でしょうか。 分かりやすさを優先して言うならば、新しい技術によってネイティブアプリのような動作が可能になったWebアプリケーションのことで、オフラインで動作したりプッシュ通知が送れるWebアプリケーションを実現することができます。 （詳細はGoogle Developersや私の発表スライドをご参照ください） さて今回はPWA作成にあたってとても便利なライブラリであるworkbox-sw（以下、workbox）の紹介記事となります。 workboxとは簡単な記述で最適なServiceWorkerのコードを生成してくれるライブラリです。 PWA自体どうやらまだ認知度が低く、それを作るためのライブラリ関連もまた
実践PWA：光る電卓「Llumino PWA」の開発と技術解説 - ここぽんのーと
前回は、PWAの基礎知識について説明しました。今回は実際に制作してみたPWAに触れてもらいつつ、その内側・技術的側面について解説していきたいと思います。 今回の題材：光る電卓「Llumino（ルミノ）」2013年にiOSネイティブ版をお披露目したLluminoは、「計算をもっと楽しく」がコンセプトの電卓アプリ。当時は世界中で話題になりました。（もう5年前…！） 当時の制作過程については連載としてまとめていますので、興味がありましたらどうぞ。（👉 連載：Lluminoができるまで） 今回のチャレンジは、そんなLluminoを最新のWeb技術で再現・PWA化してみようというものです。 まずは実物を触ってみてください制作したWebアプリは https://pwa.llumino.app/ に配置しました。まずは実物を触って体感してみてください！ （昨日解禁になったばかりの「.app」ドメインだ
Vue.jsで始めるPWA - Qiita
はじめに 先月、フロントエンドエンジニア界隈ではリニューアルした日経電子版が高速すぎてヤバイ件に注目が集まりましたね。 今自分で注目しているVue.jsと、PWAでSPAをつくるためのことはじめを記事にしようと思います。 1. PWAとは PWA（Progressive Web Application）とは、一言で言えば「ネイティブアプリのような使い勝手を実現したWebアプリ」です。 Googleのコードラボを一通りやると全体像がつかめるかと思います。 PWAでできること ホームスクリーンへの追加（Add to homescreen） PWAで作られたWebアプリケーションにアクセスした際に、ホーム画面への追加を促すことができます。 条件は下記です。 必要な情報が記載されたマニフェストファイルが存在する サイトにService Workerが登録されている HTTPS経由で配信されている
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 マップ アプリの軽量版のプログレッシブ ウェブアプリで」と説明に書かれています。 「プログレッシブ ウェブアプリ」が何なのかを一般ユーザーが理解できるかどうかはとも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Service Worker(PWA)でRangeリクエストに対応する - Qiita
No Code App Builder: Create Custom, AI-Powered Apps | Glide
https://the8760.com/
PWAのサンプルアプリを作ってみた
Workbox使ってVue.jsのPWA作ってみた - mya-ake.com
はじめてのプログレッシブ ウェブアプリ