ブラウザ上で完結するGit組み込みエディタ作っている - mizchi's blog
PWA-Editor(仮) デザインとかは適当なんだけど、コンセプト的にどこまで実装可能かの検証を一通り終えた。頑張れば本格的なものが作れそう、という手応えがある。 IndexedDB バックエンドに fs 動かして ismorphic-git を動かしている。 UIは全然足りないが、 ポテンシャル的には GitHub に push できることも検証済み。ServiceWorker でオフラインで動くようになっている。 デプロイ先は https://nervous-kilby-73c9b0.netlify.com/ 開発中のものなので、予告なく互換が壊れることがある。 動機 Chromebook 買ったんだけど、やはり開発機として使うには厳しい気持ちがあった。主にまっとうなエディタがないのが辛い。cloud9 とか試したけど、辛かった。 フロントエンドのツール周りはJSで完結して PWA
Twitter LiteはReactNativeWebで作られてる？？？ - そーす
【追記】 本人から確定ツイートありました。 If you use Twitter Lite you're now using a web app rendered by React Native for Web— Nicolas (@necolas) September 29, 2017 https://mobile.twitter.com/home ちょっと前にTwitterLiteがリリースされました。 なんでもProgressive Web App(PWA)対応したとかで話題になってました。 はじめてのプログレッシブ ウェブアプリ | Web | Google Developers 気になってソースを少し見てみたのですが、なんだかReactNativeWebを使っているのでは？？というソースを少し見かけました。 写真のreact-native-xxxってやつですね。 JSのソ
進化する 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 中級者以上が対象です)
実践PWA：光る電卓「Llumino PWA」の開発と技術解説 - ここぽんのーと
前回は、PWAの基礎知識について説明しました。今回は実際に制作してみたPWAに触れてもらいつつ、その内側・技術的側面について解説していきたいと思います。 今回の題材：光る電卓「Llumino（ルミノ）」2013年にiOSネイティブ版をお披露目したLluminoは、「計算をもっと楽しく」がコンセプトの電卓アプリ。当時は世界中で話題になりました。（もう5年前…！） 当時の制作過程については連載としてまとめていますので、興味がありましたらどうぞ。（👉 連載：Lluminoができるまで） 今回のチャレンジは、そんなLluminoを最新のWeb技術で再現・PWA化してみようというものです。 まずは実物を触ってみてください制作したWebアプリは https://pwa.llumino.app/ に配置しました。まずは実物を触って体感してみてください！ （昨日解禁になったばかりの「.app」ドメインだ
PWA 方法 無料 今すぐ
READY FOR THE BATTLE? -Introduction to Live Coding-
PWABuilder
All the tools you need to build and deploy your Progressive Web Apps.
結局 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日 確かに、この言い方は若干煽り気味のと
真に Universal な ReactComponent を書く - Qiita
ややお気持ち多め。 前置き 最近の個人的な考えとして、React 書く人は ReactNative 側にスキルを寄せたほうが良いのではないか、と思っている。 ReactNative の需要の高まりは凄い。最初はプロトタイピング採用だったのが、徐々にプロダクションに出始めている。今年末には新規プロジェクトの10~20%は ReactNative になるんじゃないか？という感すらある。 僕はデスクトップのブラウザは好きだけども、残念ながら、世の中の趨勢はモバイル側にある。その上でフロントエンドにロックインすることをリスクに感じている。PWAのアプリケーションも来そうではあるが、直近の需要を賄うためにやはりReactNativeに習熟しておきたい。 大事なのは、「考え方として」 ReactNative に軸足を移したほうが色々といいということだ。 Web は基本的に動きが少ない。見栄えをよくした
1日1PR生活を目標に1ヶ月やってみた - 技術探し
2月は毎日、どこかのリポジトリに1PRを投げるのを目標に作業してみました。 もちろん、1日以上かかる作業はあるのであまり強制的にやっていたわけではないけど、意識して2月は暮らしてみた感じです。 旅行中とかは毎日コミットできてないですので、強制ではなかったです。 普段は、PRを投げる時はバグを見つけて投げたり、暇だったら投げたりしています。 目的 GitHubと毎日向き合う。 結果 20PR出しました(26 - 6) たまたまこの時期、PRのオートデプロイをするbotを開発していたので、自分へのPRが6つほどあります。 PRのstorybookをオートデプロイするようにした結果、レビューがくっそ楽になったのでおすすめです— hiroppy😶 (@about_hiroppy) 2018年2月27日 粒度 docの修正やASTの操作など簡単なものから構築周りなど。 ただ、続かないので少なくとも
攻撃者視点で見る Service Worker / PWA Study SW
PWA Study( https://web-study.connpass.com/event/65267/ ) で発表した資料です。
マイクロソフト、Progressive Web Apps（PWA）をWindows 10のデスクトップで実行可能に。Windows 10はWindows、Linux、PWA対応のプラットフォームへ
マイクロソフト、Progressive Web Apps（PWA）をWindows 10のデスクトップで実行可能に。Windows 10はWindows、Linux、PWA対応のプラットフォームへ マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps（PWA）を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ環境でも実行可能にすることを明らかにした。 Windows 10は当然のことながらWindowsアプリケーションを実行可能なOSですが、Windows Subsystem for Linuxが新たに搭載されてLinuxアプリケーションのサポートも進められています。 そしてマイクロソフトはさらにWindows 10の守備範囲を広げようとしています。次はWeb技術を用いたアプリケーション、「Progre
Web App ManifestでWebアプリをインストール可能に - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを冬休みに作った際に、Web App Manifestを登録することで、このWebアプリを簡単にインストール(ホーム画面に追加)できるようにした。このWebアプリはService Workerを使ってオフラインでも動くようにしているので、ホーム画面から起動し、ネイティブアプリと同等の体験を提供できる。もちろん、Manifestを使っていない通常のページでも、メニュー画面から「ホーム画面に追加」を選ぶことで同様のことはできるが、下の動画のように、下から出てくるAppインストールバナーのボタンを一回タップするだけ登録できるのは利便性が高い。 Appインストールバナーの出し方 Google Developersのこの記事によるとAppインストールバナーを出すには下記の条件を満たす必要がある。 Web App
AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装
AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装 Appleが、iOSとmacOSの次バージョンにバンドルされるSafari 11.1で、Progressive Web Apps（PWA）の重要な構成要素であるService Workerをサポートすることが分かりました。次のiOSとmacOSのバージョンはiOS 11.3/macOS 10.13.4で、現在ベータ版としてAppleが開発中です。 PWAとは、HTML、CSS、JavaScriptなどのWeb技術によって開発されるWebアプリケーションの一種です。Webサーバから配信されて実行されるだけでなく、リソースをローカルに保存しオフラインでの実行にも対応。Service Workerによるバックグラウンド処理やプッシュ通知なども
PWAの実装をしてみた - 技術探し
一年以上前の記事なので、コードが古いです。気をつけて読んでください。 PWAとは？ 目的 技術スタック Service Worker PWAのview App Shell Content キャッシュ戦略 読み込みフロー Web App Manifest デザイン FirefoxとChromeしかService Workerないけどどうするの？ ネットワーク 実装 ライブラリ webpack-offline 構成 ファイル ルーティング アセットのインストール API周り SSR 資料 さいごに そういえばPWAの実装したことがなかったなと思ったので少し触ってみた。 PWAとは？ PWA(Progressive Web Apps) インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． ちなみにMicrosoft Edgeでは既に開発中34である． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が
App Shell モデルの素振り（前編）webpack と Workbox を利用した構築
App Shell モデルという設計パターン App Shell モデルは、共通のガワ部分を構成する HTML、CSS、JavaScript をシェルと定義し、その中に入る動的なコンテンツ部分と構造的に分離して扱えるように設計されます。 アプリケーション シェル（App Shell）アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web App を構築する方法の 1 つです。 アプリの「シェル」とは、ユーザー インターフェースが機能するために必要な最小限の HTML、CSS、JavaScript です。これらをオフラインで使用できるようにキャッシュしておくことで、ユーザーが同じページに再アクセスした際に、瞬時に高いパフォーマンス が発揮されます。つまり App Shell は、ユーザーがアクセスするたびにネットワークからす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
加速するフロントエンドとPWA
https://engineering.mercari.com/entry/2017/12/19/workbox
日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa
Workbox Broadcast Cache Update | Workbox | Google Developers