Slide 1
Slide 1 text
PWA checklist app
PWA をチェックするリストを見てみましょう
2019/05/10 Okachi.js
KAZUHIRO HARA
@kara_d
Slide 2
Slide 2 text
https://kansock.industries
KAZUHIRO HARA 原 一浩 (@kara_d)
Web サイトデザインの観測・ビッグデータのビジュアライズ
および、複雑な UI デザインがメイン領域
屋号は、カンソク (観測) からきてます
Slide 3
Slide 3 text
もくじ
1. PWA に必要な manifest.json について
2. Lighthouse
3. PWABuilder
4. Progressive Web App Checklist
5. その他のリソース
Slide 4
Slide 4 text
kansock.industries の manifest.json
https://kansock.industries/manifest.json
{
"short_name": "KANSOCK.I",
"name": "KANSOCK.INDUSTRIES",
"icons": [
...
],
"splash_pages": null,
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Slide 5
Slide 5 text
Lighthouse
● Lighthouse を使ってサイトをチェックしてみる (Next.js + MDX + TypeScript + Bulma
+ PWA)
○ https://kansock.industries/ja/articles/20190421_01/
Slide 6
Slide 6 text
PWABuilder
● PWABuilder にて、PWA の Manifest などをチェックする
○ https://kansock.industries/ja/articles/20190506_01/
Slide 7
Slide 7 text
Progressive Web App Checklist
● Progressive Web App Checklist | Web | Google Developers
○ https://developers.google.com/web/progressive-web-apps/checklist
Slide 8
Slide 8 text
その他のリソース
● PWA Checklist 2019 - DEV Community
○ https://dev.to/uyouthe/pwa-checklist-2019-25j4
● プログレッシブウェブアプリチェックリスト
○ https://gist.github.com/xl1/b8b9ef9ada5657b9b268c76e625fc5ee
● PWA Minimus: A minimal PWA checklist - mobiForge
○ https://mobiforge.com/design-development/pwa-minimus-a-minimal-pwa-checklist
● The SEO Checklist For PWAs
○ https://www.authoritylabs.com/the-seo-checklist-for-pwas/
Slide 9
Slide 9 text
END
KAZUHIRO HARA
@kara_d
https://kansock.industries