WordPressͰPWA P WA N i g h t 2 0 2 0 /0 7/ 1 5

Agenda • MPAͰPWAΛΊ͟͢ • WordPressͰPWA • ސ٬͕ຊ౰ʹཉ͔ͬͨ͠΋ͷ

Agenda • MPAͰPWAΛΊ͟͢ • WordPressͰPWA • ސ٬͕ຊ౰ʹཉ͔ͬͨ͠΋ͷ

SPA͡Όͳͯ͘΋ PWA͸ͭ͘ΕΔ

PWA is… • ʮઌਐతʯͰ • ʮ৴པੑʯͷ͋Δ • ʮΠϯετʔϧՄೳʯͳ • ʮ΢ΣϒΞϓϦέʔγϣϯʯ https://web.dev/what-are-pwas/

– h t t p s : / / d e v e l o p e r. m o z i l l a . o rg / j a / d o c s / We b / P ro g re s s i v e _ w e b _ a p p s “΢ΣϒΞϓϦΛ PWA ͱݺͿʹ͸ɺ ٕज़తʹݴ͑͹ɺ ҆શͳίϯςΩετ (HTTPS)ɺ 1ͭҎ্ͷαʔϏεϫʔΧʔɺ ϚχϑΣετϑΝΠϧΛ࣋ͭ΂͖Ͱ͢ɻ”

We need ✅ SSL Certification (HTTPS) ✅ Service Worker ✅ manifest.json Single Page Application

Multi Page ApplicationͰ͓͖Δ͜ͱ • ϖʔδભҠͰωοτϫʔΫΞΫηε͕ൃੜ͢Δ • ΦϑϥΠϯͰ͸ભҠઌͷHTML͕SWΩϟογϡ͞ΕΔඞཁ͋Γ • ʮ๚໰ͨ͠ϖʔδ͸ΦϑϥΠϯͰΈΕΔʯ͕ɺଞͷϖʔδ͸NG • SPA / SSGͩͱΞϓϦ಺ͰͲ͏ʹ͔Ͱ͖Δ͕ɺMPAͰ͸ݫ͍͠

MPA to SPA͸࣮࣭ϑϧϦχϡʔΞϧ • WordPress΍Laravelͷ֎ͰϑϩϯτΛߏங • ͜Ε·ͰͷϓϥάΠϯɾπʔϧɾϊ΢ϋ΢ΛࣺͯΔ • React / Gatsby / NetlifyͳͲͷίϯςΩετʹ৐Δίετ • SPAαʔόʔʴAPIαʔόʔͷΠϯϑϥ؅ཧΛͲ͏͢Δ͔

Agenda • MPAͰPWAΛΊ͟͢ • WordPressͰPWA • ސ٬͕ຊ౰ʹཉ͔ͬͨ͠΋ͷ

https://wordpress.org/plugins/pwa/

PWA Plugin by PWA plugin contributors • Google͕։ൃʹࢀը͍ͯ͠ΔϓϥάΠϯ • ίΞ΁ͷ౷߹Λݟਾ͑ͨ։ൃମ੍ • SWͷڝ߹ʢBYOSWʣ໰୊ΛWPతʹղܾ͢Δ • ࠷௿ݶͷػೳ͸Πϯετʔϧ͚ͩͰ΄΅ରԠ • ࣮ଶ͸Workbox https://wordpress.org/plugins/pwa/

Install and Activate https://wordpress.org/plugins/pwa/

Set Site Title Site Icon Site Title͸13จࣈҎ্ͩͱ লུ͞ΕΔ

{ "name": "Less than 15 words", "start_url": "https://50c106d8-45d6-47af-8561-b6a93a3067dc.appdev.getshifter.io:56104/", "display": "minimal-ui", "dir": "ltr", "lang": "en-US", "background_color": "#f5efe0", "theme_color": "#f5efe0", "description": "Just another WordPress site", "icons": [ { "src": "/wp-content/uploads/2020/07/cropped-A9D30BD8-CEDE-4990-B168-8DE593A8A295-scaled-2-192x192.jpeg", "sizes": "192x192", "type": "image/jpeg" }, { "src": "/wp-content/uploads/2020/07/cropped-A9D30BD8-CEDE-4990-B168-8DE593A8A295-scaled-2.jpeg", "sizes": "512x512", "type": "image/jpeg" } ] } Test Call WP API GET /wp-json/wp/v2/web-app- manifest

Check the site by Lighthouse short_nameͱPNG Icon͸ ͨ·ʹҾ͔͔ͬΔͷͰɺ ը૾αΠζ΍จࣈ਺Λௐ੔͢Δ

add_filter( 'web_app_manifest', function( $manifest ) { $manifest['short_name'] = 'Shortness'; // ৭ͱ͔΋ม͑ΕΔ // $manifest['theme_color'] = '#0073AA'; return $manifest; } ); Customize by WP Hooks

BYOSW(Bring Your Own Service Worker)໰୊ • ϓϥάΠϯ΍ςʔϚͰͦΕͧΕService WorkerΛొ࿥͢ΔͱԾఆ • ొ࿥͞ΕΔService Worker͸1αΠτʹ1ͭ • PWAϓϥάΠϯ(with Google)͸ू໿͢ΔͨΊͷϑοΫΛ࣋ͭ

WPͰService WorkerΛ࢖͏3ͭͷಓ 1. All in Oneͳawesome PWAϓϥάΠϯʹҰ೚͢Δ 2. PWAϓϥάΠϯ(with Google)Λ࢖͍ɺϑοΫͰௐ੔͢Δ 3. ࣗલͰϑϧεΫϥον

Example: Cache my-theme-image.png add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) { $scripts->precaching_routes()->register( 'https://example.com/wp-content/themes/my-theme/my-theme-image.png', array( 'revision' => get_bloginfo( 'version' ), ) ); } );

Example: Cache wp-content image files add_action( ‘wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) { $scripts->caching_routes()->register( ‘/wp-content/.*\.(?:png|gif|jpg|jpeg|svg|webp)(\?.*)?$', array( 'strategy' => WP_Service_Worker_Caching_Routes::STRATEGY_CACHE_FIRST, 'cacheName' => ‘images', 'plugins' => array( 'expiration' => array( 'maxEntries' => 60, 'maxAgeSeconds' => 60 * 60 * 24, ), ), ) ); } );

Lists of WP hooks • [Filter Hook] wp_service_worker_skip_waiting • [Filter Hook] wp_service_worker_clients_claim • [Filter Hook] wp_service_worker_nativation_preload • [Filter Hook] wp_offline_error_precache_entry • [Filter Hook] wp_server_error_precache_entry • [Filter Hook] wp_service_worker_errormessages • [Action Hook] wp_front_service_worker • [Action Hook] wp_admin_service_worker • [Action Hook] wp_default_service_workers

Offline & HTTP500 Support

Service WorkerΛ࢖ͬͯɺ ΦϑϥΠϯ / HTTP500ͷදࣔΛม͑ΕΔ • Offline page templateʢ/YOUR-THEME/offline.phpʣ https://your-site-name.com/?wp_error_template=offline; • HTTP500 page templateʢ/YOUR-THEME/500.phpʣ https://your-site-name.com/?wp_error_template=500 • ಡΈࠐΈ৔ॴɾॱংͳͲ͸ίʔυࢀর(TwentyγϦʔζ͸σϑΥϧτରԠ) https://github.com/GoogleChromeLabs/pwa-wp/blob/develop/wp-includes/template.php#L31-L64

࣮ફతͳ࢖͍ํͷΞΠσΟΞ • offline.phpͰΦϑϥΠϯίϯςϯπΛ༻ҙ͢Δ • 500.phpͰαʔόʔΤϥʔ͕ൃੜͨ͠৔߹ͷίϯςϯπΛ༻ҙ͢Δ • ςʔϚͷΞηοτʢΞΠίϯͳͲʣ΍Ajaxݺͼग़͠ΛSWͰprecache • ΦϑϥΠϯͰͷίϝϯτ஗Ԇૹ৴

͜͏͍͏࢖͍ํ΋Ͱ͖ͦ͏Ͱ͕͢ɾɾɾ • ECαΠτͷ঎඼ը૾Λ͢΂ͯService WorkerͰΩϟογϡ • 2ճ໨Ҏ߱͸ը૾ͷωοτϫʔΫΞΫηε͕ͳ͘ͳͬͯߴ଎Խʂ • ʮͦͷը૾ɺͲ͜ʹอଘ͞Ε͍ͯ·͔͢ʁʯ

࣍๚ΕΔ͔΋ Θ͔Βͳ͍αΠτͷͨΊʹɺ ͋ͳͨͷσΟεΫ༰ྔΛ ࠩ͠ग़͍ͨ͠ͱࢥ͍·͔͢ʁ

σόΠεͷσΟεΫ༰ྔʹґଘ͢Δ͕ɺ ࣗ෼͚͕ͩ޷͖ʹ࢖ͬͯΑ͍΋ͷͰ͸ͳ͍ – h t t p s : / / l o v e 2 d e v. c o m / b l o g / w h a t - i s - t h e - s e r v i c e - w o r k e r- c a c h e - s t o r a g e - l i m i t / “The amount of storage is dependent upon how much available disk space the customer's device has. The general range is 50MB over 20GB. Before you get all excited about 20GB of storage you still need to be responsible.”

ετΞ͢Δσʔλ͸શମͰ50MBʹೲΊΔ – h t t p s : / / l o v e 2 d e v. c o m / b l o g / w h a t - i s - t h e - s e r v i c e - w o r k e r- c a c h e - s t o r a g e - l i m i t / “Since most visitors are on a mobile device, you should plan for about 50MB of available space. This should keep you within a safe zone that enables you to create a good experience without consuming the user's bandwidth.”

ྺ࢙ʹֶͼɺ Evil͸ආ͚Δ https://webkit.org/blog/10218/full- third-party-cookie-blocking-and- more/

Agenda • MPAͰPWAΛΊ͟͢ • WordPressͰPWA • ސ٬͕ຊ౰ʹཉ͔ͬͨ͠΋ͷ

PWAͰʮύϑΥʔϚϯε͕վળʯ͢Δ΋ͷͷྫ • ΦϑϥΠϯ • Ωϟογϡ͞Εͨίϯςϯπɾϖʔδͷදࣔ • Predictive PrefetchingʹΑΔઌಡΈͰͷߴ଎Խ

– h t t p s : / / d e v e l o p e r s . g o o g l e . c o m / w e b / f u n d a m e n t a l s / c o d e l a b s / y o u r- f i r s t - p w a p p ? h l = j a “͔͠͠Ұ౓ΞϓϦΛΠϯετʔϧͯ͠ΞϓϦΛ։࢝͢Δͱɺͦͷۤ࿑͸͢΂ͯใΘΕ ·͢ɻ࣮ߦ·Ͱʹ଴ͨ͞ΕΔ͕࣌ؒมΘΔΑ͏ͳ͜ͱ͸͋Γ·ͤΜɻΞϓϦέʔγϣ ϯͷىಈ͸લճͱಉ͘͡Β͍ૣ͘ɺมΘΔ͜ͱ͸͋Γ·ͤΜɻΠϯετʔϧ͢Δ͜ͱ ͰϢʔβʔ͕ظ଴͢ΔΑ͏ʹͳΔ͜ͷ৴པͰ͖ΔύϑΥʔϚϯεΛϓϩάϨογϒ ΢ΣϒΞϓϦ͸ఏڙ͠ͳ͚Ε͹ͳΓ·ͤΜɻ”

׬શͳ৽نϢʔβʔʹͱͬͯ PWAʹΑΔߴ଎ԽͷԸܙ͸ͳ͍

ʮPWA͔ͩΒૣ͍ʯ ʮૣ͍ΞϓϦ͕PWAͩͬͨʯ • ϘτϧωοΫͷௐࠪ • CDN΍NginxͳͲͷΩϟογϡͷ׆༻ • AWS / GCPͳͲͰPHP / MySQLαʔόʔΛߴ଎Խ • Jamstack΁ͷϑϧϦχϡʔΞϧ • ʮPWAͷߴ଎Խʯͷલʹ΍Δ͜ͱ͕ͳ͍͔Λ͔֬ΊΔ

PWAͰϢʔβʔ͕تͼͦ͏ͳ͜ͱΛߟ͑Δ • ΦϑϥΠϯʹͳͬͯ΋ߪೖϑϩʔ͕தஅ͞Εͳ͍ECαΠτ • τϯωϧʹೖͬͯ΋ίϝϯτ౤ߘ͕Ͱ͖Δܝࣔ൘ɾϒϩά • ϝʔϧड৴ͳͲͷόοΫάϥ΢ϯυλεΫʹؔ͢ΔPUSH௨஌ • αʔόʔʹো֐͕ى͖ͯ΋୅ସίϯςϯπ͕ΈΕΔϝσΟΞ

How hard can it be?

Thanks you! • MPAͰPWAΛΊ͟͢ • WordPressͰPWA • ސ٬͕ຊ౰ʹཉ͔ͬͨ͠΋ͷ Shifter https://getshifter.io Twitter @motchi0214 GitHub https://github.com/hideokamoto/