Progressive Web Applications have become all the rage; with companies like Instagram, Twitter, Forbes and Alibaba investing real effort into making their mobile sites feel like native apps. Yet, there are plenty reasons not to make your next mobile app a Progressive Web App instead. The add to homescreen user experience doesn't feel smooth enough, and we can't ignore the snail-like speed at which
先日「GooglePlayストアでPWAが配信できるようになった！」という記事が話題になっていました。 Google Play Store now open for Progressive Web Apps 😱 実態は「Chrome72で実装されたTWA (Trusted Web Activity) を使用することで、URLバー無しでPWAページを開かせるAndroidアプリを開発できるようになった」という事です。 検証がてら実際にTWAでPWAをGooglPlayストアに公開してみたので手順を紹介したいと思います。 実際のAndroidプロジェクトはGitHubでも公開しています。 https://github.com/zprodev/QR-TWA 環境 AndroidStudioはver3.3.1を使用します。 公開するPWAはこちらのQRコードリーダーです。 https://qr.
この記事では、先日 Medium に公開された Maximiliano Firtman 氏による記事『Google Play Store now open for Progressive Web Apps 😱』を要約して感想などを加えています。 記事のタイトルを訳すと『Google Play ストアで PWA を配信できるようになった 😱』という感じでしょうか。Web エンジニアとしては惹かれるタイトルですよね。ただ私は Android 事情には疎いですし、結局どういうことなのか？記事を読んでまとめてみようと思いました。 まとめると Android 向け Chrome のバージョン72から Trusted Web Activity が実装された。 ネイティブアプリ内で Web アプリを起動する新しい仕組み。WebView など既存の同種の仕組みの欠点を補っている。よりネイティブと We
ラクス Advent Calendar 2018 繋ぎの3番バッターです。 今回はChrome 70から実験的に使えるようになっているShape Detection APIについてまとめてみます。使ってみると意外と実用的だったのでPWA化してブラウザだけでスマホアプリ相当のことが実現できそうなことも検証してみました。 Shape Detection APIとは Webの新しい技術の普及を推進する団体の WICG が仕様策定を進めているJavaScriptのAPIです。 Accelerated Shape Detection in Images まだEditor's Draft（草案レベル）ですが以下の3つの事ができます。 Face Detection（顔検出） Barcode Detection（バーコードスキャン） Text Detection（テキスト認識） Shape Detecti
Trusted Web Activity is a new way to open your web-app content such as your Progressive Web App (PWA) from your Android app using a protocol based on Custom Tabs. Looking for the code? android-browser-helper library on GitHub Trusted Web Activity demos Bubblewrap, a NodeJs library / CLI to generate and build Trusted Web Activity projects There are a few things that make Trusted Web Activity differ
Stay organized with collections Save and categorize content based on your preferences. 1. Welcome In this lab, you'll take an existing web application and make it work offline. This is the first in a series of companion codelabs for the Progressive Web App workshop. There are seven more codelabs in this series. What you'll learn Write a Service Worker by hand Add a Service Worker to an existing we
Disclaimer: I’m not affiliated with Google Play, Chrome or any other company mentioned. This is not an official statement; usage of the logo and name is just for illustration.⚠️ Updated version of this article ⏩ firt.dev Chrome 72 for Android shipped the long-awaited Trusted Web Activity feature, which means we can now distribute PWAs in the Google Play Store! I played with the feature for a while
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。 PWA（Progressive Web Apps）は本当に「アリ」なのか――？ ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。 一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Goog
概要 PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの ※ 2020/04/05 追記: PWAに関する仕様の策定当初はモバイルでのユースケースが主だったと記憶していますが、PWAはモバイルに限定されたものではなく、実際にデスクトップでの活用例も増えています。参考: PWAs: building bridges to mobile, desktop, and native (Google I/O '18) AMP = モバイルのWEBページを高速化するためのもの どちらもGoogleが主軸となって策定されている、モバイルページを進化させるためのプロジェクトおよび技術。ネイティブアプリの代替技術ではなく、ブラウザAPIの進化によってネイティブアプリのようなUXをウェブページで提供することが主眼。 1. PWAとは Progressive Web Appsの
PWAのメリットが強くなる時ってどんなときか考えた。 今回はネイティブアプリの代わりにPWAで頑張る話したけど、ネイティブアプリのありなしに関わらずWebを良くしていきたい。 紹介した自作PWA - http://ease.netlify.com/ (TODOリスト) - http://mo…
最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか！」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として
PRPL は、ウェブページの読み込みとインタラクティブ化を高速化するために使用されるパターンを記述する頭字語です。 遅れて検出されたリソースをプリロードします。 できるだけ早く初期ルートをレンダリングします。 残りのアセットを事前キャッシュに保存します。 他のルートやクリティカルでないアセットを遅延読み込みします。 このガイドでは、これらの手法がどのように連携し、独立して使用してパフォーマンスを向上させるかについて説明します。 Lighthouse でページを監査する Lighthouse を実行して、PRPL 手法に沿った改善の機会を特定します。 Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して DevTools を開きます。 [Lighthouse] タブをクリックします。 [パフォーマンス] チェックボックスと [プログレッシブ ウェブアプリ
これ以上は長くなるため後述． ##Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． ##だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が進む可能性が大きい． ブラウザの制約が弱まり，ウェブアプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く