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については次の記事で解説されています。

Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

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
などがあります。

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

Introducing the react-testing-library 🐐 – kentcdodds

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

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のサポートなど

Release 3.0.0 · dequelabs/axe-core

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の使い方について。