Fork me on GitHub

2018-04-10のJS: PWA on iOS & Windows Store、dom-testing-library

Edit on GitHub 編集履歴を見る

JSer.info #378 - Progressive Web Apps on iOS are here 🚀 – Maximiliano Firtman – Mediumという記事では、iOS 11.3/Safari 11.1でサポートされたService WorkerなどいわゆるProgressive Web Apps (PWA)の対応について書かれています。

ホームスクリーンアプリとしての動作やSafari Technology Previewを使ったService Workerのデバッグ方法について紹介しています。加えて、iOSのネイティブアプリと違いやAndroid/ChromeのPWAとの違いなどについても書かれています。

またFirst Windows 10 Progressive Web Apps (PWA) published by Microsoft hit the Store | Windows Centralという記事では、Windows 10 Spring Creators Update(Windows 10 build 1803)のプレビュー版のWindows StoreにPWAなアプリケーションが掲載されるようになったことが書かれています。

Windows StoreでのPWAについては次の記事で解説されています。


kentcdodds/dom-testing-library: 🐙 Simple and complete DOM testing utilities that encourage good testing practices.というDOM要素をテストするためのライブラリが公開されています。
テストの際によく利用するテキストを含む要素を選択するgetByText関数やdata-testid属性を元に要素を選択するgetByTestId関数などを提供するライブラリとなっています。

著名なViewライブラリ向けのバインディングも用意されていてreact-testing-library
vue-testing-library
などがあります。

詳しくは作者により次の記事で解説されています。


ヘッドライン


Axe 3.0 has arrived — here’s what you need to know - Deque

www.deque.com/blog/axe-3-0-has-arrived/

accessibility ReleaseNote

Axe 3.0リリース。
Shadow DOMのサポートなど


First Windows 10 Progressive Web Apps (PWA) published by Microsoft hit the Store | Windows Central

www.windowscentral.com/first-batch-windows-10-progressive-web-apps-here

MS PWA news

Microsoft StoreにPWAアプリが公開されるようになった


sails/CHANGELOG.md at v1.0.0 · balderdashy/sails

github.com/balderdashy/sails/blob/v1.0.0/CHANGELOG.md

node.js JavaScript ReleaseNote

Node.jsのウェブアプリケーションフレームワークであるSails.js 1.0リリース。


アーティクル


React v16.3 changes - blog.koba04.com

blog.koba04.com/post/2018/04/04/react-v163-changes/

React article

React 16.3の変更点について


Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers

developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

performance browser JavaScript CSS

画像や動画の遅延ロードについて。
画像の遅延ロードとしてIntersection Observerを使った方法、CSSを使った方法について。
動画とGIFのロード、遅延ロードを補助するライブラリ、ロードに失敗した時のFallbackなどについて


Headless Chrome: an answer to server-side rendering JS sites  |  Tools for Web Developers  |  Google Developers

developers.google.com/web/tools/puppeteer/articles/ssr

Chrome server article

Headless Chromeを使ったサーバーサイドレンダリングについてのチュートリアル。
どのように実装するか、最適化について


GoDaddy Open Source Center - Isomorphic Asset System for React and React-Native

godaddy.github.io/2018/04/04/isomorphic-asset-system-for-react-and-react-native/

SVG React library article

SVGのアセットを管理するツール、React/React Nativeコンポーネント、webpack loaderなどについて


Strategies for Service Worker Caching for Progressive Web Apps

blog.hasura.io/strategies-for-service-worker-caching-d66f3c828433

ServiceWorker article

Service Workerのキャッシュの仕組みとキャッシュの問題があるケースについて。
壊れたデプロイを行った時の問題、service-worker.jsファイル自体をキャッシュした時の問題、キャッシュすべきでないレスポンスなどについて。
またcreate-react-appの事例やClear-Site-Dataヘッダについて


Progressive Web Apps on iOS are here 🚀 – Maximiliano Firtman – Medium

medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

ios safari article ServiceWorker PWA

iOS 11.3でサポートされたService WorkerなどのPWAに関する機能について。
ネイティブアプリと比較した場合の制限やChrome/Androidとの違いなどについて


Transform your codebase using codemods | nec.is

nec.is/writing/transform-your-codebase-using-codemods/

JavaScript Tools article AST

jscodeshiftを使ったJavaScriptのコード変換についての記事。
どのようにJavaScriptのコードを扱うのか、ASTについて、jscodeshiftのAPIについて紹介している


Introducing the Payment Request API for Apple Pay | WebKit

webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/

safari article

Safari 11.1のPayment Request APIでApple Payを利用する方法についての解説記事。
-webkit-appearance: -apple-pay-button;"のスタイルを指定するだけでAppley Payボタンを表示できる。
またPayment Request APIの使い方について。


Understanding JavaScript Proxies by Examining on-change Library

codeburst.io/understanding-javascript-proxies-by-examining-on-change-library-f252eddf76c2

JavaScript proxy article

プロパティの変更検知をES Proxyで実装しながら、Proxyについて紹介している記事


スライド、動画関係


Browser Automated Tests // Speaker Deck

speakerdeck.com/derekb/browser-automated-tests

JavaScript testing slide

puppeteerとmochaを使った自動テストについてのスライド。


サイト、サービス、ドキュメント


React lifecycle methods diagram

projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React document

React 16.3以降を含むReactのライフサイクルの図


ソフトウェア、ツール、ライブラリ関係


kentcdodds/dom-testing-library: 🐙 Simple and complete DOM testing utilities that encourage good testing practices.

github.com/kentcdodds/dom-testing-library

JavaScript DOM testing library

DOM要素をテストするMatcherライブラリ


kwolfy/webworker-promise: Promise based wrapper for webworkers

github.com/kwolfy/webworker-promise

JavaScript webworker library

WebWorkerを扱うライブラリ。
EventEmitterライクなイベントの仕組みとPromiseを使った非同期処理、Worker poolの仕組みなどを持っている


avwo/whistle: HTTP, HTTPS, WebSocket debugging proxy

github.com/avwo/whistle

HTTP proxy debug node.js

Node.jsで書かれたHTTP/HTTPS/WebSocketsのデバッグProxy


この記事へ修正リクエストをする
記事を紹介する