特典機能について

PWAで3つのエラーが発生する | 不具合報告 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

対象のページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
PWAで3つのエラーが発生する
 
共有:
通知
すべてクリア

PWAで3つのエラーが発生する

固定ページ 1 / 2

maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

お世話になります。

現在発生している問題について

Cocoonを利用しているブログで、PWAの設定を有効化してLighthouseで検証した結果、PWAに関する3つの設定の内、3箇所の項目でエラーが発生していました。

【Fast and reliable】
2 Current page does not respond with a 200 when offline
3 start_url does not respond with a 200 when offline
Unable to fetch start URL via service worker.(赤字)

【Installable】
5 Does not register a service worker that controls page and start_url

ちなみに、【PWA Optimized】は全てクリアしています。

LightHouseの実行結果:

自分で試したこと

ChromeのDevtoolで確認したところ、エラーが起きて読み込めていないのを確認しました。

【警告】Manifest: found icon with no valid size. 
cocoon-service-worker.js:1
【エラー】Uncaught (in promise) TypeError: Request failed
【エラー】Uncaught (in promise) TypeError: Failed to update a ServiceWorker: Not found

また、Networkタブで確認したところ、cocoon-service-worker.jsが一部のファイルにアクセスできていないことを確認しました。

Dev Toolsの表示(Consoleタブ):
Dev Toolsの表示(Networkタブ):

さらに調査を進めて「/wp-includes/」「/wp-content/」から指定されているものが404エラーを起こしていることが分かったので「.」を追加して再度実行しました(修正箇所は赤字部分)。

const urlsToCache = [
'/',
'https://maruhoi.com/wordpress/wp-content/uploads/2015/09/5877-gadget-game-game-controller-gaming-joystick-technology-icon-favicon.png',
'https://maruhoi.com/wordpress/wp-content/uploads/2015/09/5877-gadget-game-game-controller-gaming-joystick-technology-icon-favicon.png',
'https://maruhoi.com/wordpress/wp-content/themes/cocoon-master/javascript.js',
'https://maruhoi.com/wordpress/wp-content/themes/cocoon-child-master/javascript.js',
'https://maruhoi.com/wordpress/wp-content/themes/cocoon-master/webfonts/fontawesome/css/font-awesome.min.css',
'https://maruhoi.com/wordpress/wp-content/themes/cocoon-master/webfonts/icomoon/style.css',
'./wp-includes/js/jquery/jquery.js',
'./wp-includes/js/jquery/jquery-migrate.min.js',
'./wp-content/themes/cocoon-master/webfonts/fontawesome/fonts/fontawesome-webfont.woff2',
'./wp-content/themes/cocoon-master/webfonts/icomoon/fonts/icomoon.ttf',
'./wp-content/themes/cocoon-master/plugins/highlight-js/highlight.min.js'
];

その結果、サービスワーカーがアクセスできていなかったファイルにアクセスできるようになりました。しかし、再度コンソールタブで2つのエラーが発生してしまい、LightHouseでも3つのエラーが出たままです。

【エラー】Uncaught (in promise) DOMException
【エラー】Uncaught (in promise) TypeError: Failed to update a ServiceWorker: Not found


とりあえずここまで進めましたが、何が原因か分からず困っています。検索しましたが同様のエラーで困っている人が見当たらなかったので、投稿させていただきました。

何とぞよろしくお願いいたします。

----------------------------------------------
サイト名:maruhoi1's blog
サイトURL: https://maruhoi.com/wordpress
ホームURL: https://maruhoi.com
コンテンツURL:/wordpress/wp-content
インクルードURL:/wordpress/wp-includes/
テンプレートURL:/wordpress/wp-content/themes/cocoon-master
スタイルシートURL:/wordpress/wp-content/themes/cocoon-child-master
子テーマスタイル:/wordpress/wp-content/themes/cocoon-child-master/style.css
スキン:/wordpress/wp-content/themes/cocoon-master/skins/skin-colors-black/style.css
Wordpressバージョン:5.1.1
PHPバージョン:7.2.7
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.7.4.9
カテゴリ数:10
タグ数:481
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
Gutenberg:0
AMP:1
PWA:1
ホームイメージ:/wordpress/wp-content/uploads/2015/08/logo.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
001 Prime Strategy Translate Accelerator 1.1.1
AddQuicktag 2.5.3
Akismet Anti-Spam 4.1.1
BackWPup 3.6.8
EWWW Image Optimizer 4.7.2
Font Awesome 4 Menus 4.7.0
Google XML Sitemaps 4.1.0
Quicklink for WordPress 0.5.0
Revision Control 2.3.2
SiteGuard WP Plugin 1.4.3
SNS Count Cache 0.11.1
Throws SPAM Away 3.0.2
TinyMCE Advanced 5.1.0
WebSub/PubSubHubbub 3.0.2
WP Multibyte Patch 2.8.2
----------------------------------------------


引用
トピックタグ
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

とりあえず、スタートページは、URLを指定するようにしてみました。
以下で試してみていただければ幸いです。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
試す前に、一度Cocoon設定を「保存」する必要があります。
そうすることで、マニフェストファイルが再生成されます。設定は変更する必要はありません。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。ご対応いただきありがとうございます。
こちら、GitHubの変更履歴を参考に手元で修正しました。

ですが、再度エラーが出る状態なため、原因を探りました。

まず、urlsToCacheで一箇所「.」を追加しました(赤字箇所)。

const urlsToCache = [
'./',
'https://maruhoi.com/wordpress/wp-content/uploads/2015/09/5877-gadget-game-game-controller-gaming-joystick-technology-icon-favicon.png',
'https://maruhoi.com/wordpress/wp-content/uploads/2015/09/5877-gadget-game-game-controller-gaming-joystick-technology-icon-favicon.png',
'https://maruhoi.com/wordpress/wp-content/themes/cocoon-master/javascript.js',
'https://maruhoi.com/wordpress/wp-content/themes/cocoon-child-master/javascript.js',
'https://maruhoi.com/wordpress/wp-content/themes/cocoon-master/webfonts/fontawesome/css/font-awesome.min.css',
'https://maruhoi.com/wordpress/wp-content/themes/cocoon-master/webfonts/icomoon/style.css',
'./wp-includes/js/jquery/jquery.js',
'./wp-includes/js/jquery/jquery-migrate.min.js',
'./wp-content/themes/cocoon-master/webfonts/fontawesome/fonts/fontawesome-webfont.woff2',
'./wp-content/themes/cocoon-master/webfonts/icomoon/fonts/icomoon.ttf',
'./wp-content/themes/cocoon-master/plugins/highlight-js/highlight.min.js'
];

さらに、キャッシュ設定を見直し、一旦全てのファイルに対して行っていたキャッシュ設定をコメントアウトして無効化しました。

すると「ServiceWorker registration successful with scope: https://maruhoi.com/wordpress/ 」と、コンソールで表示されるようになりました。

しかし、このスコープで登録されると「 https://maruhoi.com/ 」ではSWが動作しないのではないか?と考えています。

参考: http://yasunari-fujieda.hatenablog.com/entry/2016/08/31/163800
参考: https://qiita.com/nhiroki/items/eb16b802101153352bba

「registration.scope= https://maruhoi.com/ 」になれば、SWが適切なスコープで登録されて動作するのではないかと考えております。

ご確認&ご検討いただけますと幸いです。
何とぞよろしくお願いいたします。

This post was modified 2年前 3回 by maruhoi1

わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

改善策ありがとうございます。

まず、urlsToCacheで一箇所「.」を追加しました(赤字箇所)。

とりあえずこちらは修正しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

さらに、キャッシュ設定を見直し、一旦全てのファイルに対して行っていたキャッシュ設定をコメントアウトして無効化しました。

こちらなんですが、よろしければコメントアウトした部分を教えていただいてよろしいでしょうか。
https://github.com/yhira/cocoon/blob/master/lib/page-settings/pwa-funcs.php
上記の何行目~何行目みたいな感じ同士でいただければと思います。
同じ環境でテストしてみようと思います。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。ご対応いただきありがとうございます。

キャッシュ設定を見直し、一旦全てのファイルに対して行っていたキャッシュ設定をコメントアウトして無効化しました。

こちらですが、.htaccessでおこなっていたキャッシュ設定の話でした。
例えば、「ExpiresDefault "access plus 1 seconds"」などを無効化しています。
pwa-func.phpについては編集しておりません。

よろしくお願いいたします。

 

This post was modified 2年前 by maruhoi1

わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

僕は、PWAを全て理解しているわけではないので前面詳しくはないのですが、
.htaccessのブラウザキャッシュと、Service Workerのキャッシュって関係あるのでしょうか?
PWAの実装で参考にしたサイトに、PWAと.htaccessに関する記述は見かけなかったので。あったとしても、http→httpsに使用みたいなリダイレクト設定で。

もしよろしければ、現在の最新版で、LighthouseのPWA結果のエラーメッセージを再度貼り付けでいただいてよろしいでしょうか。

可能であれば、.htaccessの記述ありなしの双方をアップしていただけると幸いです。
お手数をおかけして申しわけありません。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。PWAのエラーは3箇所で出たままです。3箇所のエラーは以下の通りです。

Fast and reliable
2. Current page does not respond with a 200 when offline

If you're building a Progressive Web App, consider using a service worker so that your app can work offline. Learn more.
3. start_url does not respond with a 200 when offline

Unable to fetch start URL via service worker.
Installable
5. Does not register a service worker that controls page and start_url

The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. Learn more.
画像:
 
.htaccessはGistで添付します。
 
 
上のコードがコメントアウトあり(現在の設定、コンソールで「ServiceWorker registration successful with scope: https://maruhoi.com/wordpress/ 」と表示)
下のコードがコメントアウトなし(最初にスレッドを立てた時の状態)です。
 
このキャッシュを無効化することを試した理由は、「『JavaScriptをキャッシュさせる設定』をhtaccessで行っていると、サービスワーカー用のJavaScriptファイルもキャッシュされてしまうから、上手く行っていないのでは?」と考えて、試しにJavaScriptに対するキャッシュを無効化したら上手く進んだ(?)という次第です
(関係ありそうなCSSファイルやフォントファイルも無効化していますが)。
 
PWAとキャッシュに関連性があるかどうかは自分でも説明できる知識を持ち合わせておりません。混乱を招いてしまっていたら申し訳ないです。
 
何とぞよろしくお願いいたします。
 

返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

うーん、こうなると同様の不具合環境を作ってみるしかないかもしれません。
以下のような、URL構造になった設定方法は、どのように設定されたのでしょうか?

サイトURL:  https://maruhoi.com/wordpress 
ホームURL: https://maruhoi.com

いろいろな設定方法があると思いますが、maruhoi1さんが行った設定に近い記事みたいなものがあれば、URLを貼っていただければと思います。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。ご迷惑おかけして申し訳ありません。

VPSにWordPress環境を構築しています。構築したのが数年前で記憶が曖昧ですが、公式ドキュメントの「WordPress を専用ディレクトリに配置する」内の「ルートディレクトリにインストール済みの場合」を参考に設定していたはずです。

/var/www/htmlの中にWordPressフォルダがあり、
/var/www/htmlにindex.phpと.htaccessを持ってきている形です。
(Gistで貼り付けたhtaccessの設定はWordPressフォルダ内に.htaccessを配置してやっています)

何とぞよろしくお願いいたします。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

その方法でいいんですね。
僕も同様のテスト環境を作成したり、同じようなエラーが出ました。
今後自分の環境で動作テストしたいと思います。

調べてみた結果、home_url()に対する、ローカルパスが取得できないのが原因のようでした。
get_home_path()があるけど常時取得はできないようなので。
この後、Cocoon独自のget_home_path()関数みたいなものを作成して、必要な部分をすべて書き換える必要があるようです。
ただ、結構様々な部分に影響がある変更になるので、動作確認をしっかり行う必要があるので、ちょっと時間はかかるかもしれません。

何か進展があれば、このトピックに書き込みます。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。ご確認いただきありがとうございます!

何とぞよろしくお願いいたします。

 

 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

とりあえず、最新版(1.7.6.3)にPWA対策処理を施したものをアップしておきます。
https://wp-cocoon.com/wp-content/uploads/2019/05/cocoon-master-pwafix.zip

よろしければ、サイトで試していただければ幸いです。
Cocoon設定画面や、サイト動作に影響がないか確認してみてください。
ちなみに僕の作成したテスト環境では、添付画像のように問題なくPWAテストがクリアされています。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

 お世話になっております。ダウンロードしたZIPファイルを解凍し、現在利用しているテーマに上書き処理して再度Lighthouseで確認しましたが、3つのエラーが出たままでした。

 またコンソールでは以下のようにエラーが表示されていました。

ServiceWorker registration successful with scope: https://maruhoi.com/wordpress/
(index):9 ServiceWorker update successful
cocoon-service-worker.js:21 PWA cache opened
エラー1:cocoon-service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch
エラー2:(index):1 Uncaught (in promise) TypeError: Failed to update a ServiceWorker: Not found

 気になっているのが、1行目のSWが登録されたスコープです。現在、SWの登録スコープが「 https://maruhoi.com/wordpress/ 」(サイトURL)になっていますが、ここはサイトのトップページではなく、カテゴリページです。

 Cocoon公式サイトのコンソールを確認すると、「ServiceWorker registration successful with scope」は「 https://wp-cocoon.com/ 」で、トップページが指定されています。このように、自分のサイトでも「registration.scope= https://maruhoi.com/ 」と、トップページが指定されれば、問題が解決するのではないかと考えています。

 わいひらさんが構築したテスト環境では問題が解決したということで、これ以上のサポートは難しいかもしれませんが、ご検討いただけますと幸いです。

何とぞよろしくお願いいたします。

This post was modified 2年前 2回 by maruhoi1

返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

書き忘れていましたが、一度Cocoon設定を保存した後、もしくは何か投稿をした後にチェックしてみられましたか?


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

ServiceWorker のキャッシュがまだ古いままのようです。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。Cocoonの設定でPWAを無効化にして有効化したのち確認してダメでした。いただいたアドバイスをもとに、先程、記事を1つ公開してから再度確認しましたが、Lighthouseのエラーは解消されず、コンソールでも同様のエラーが出続けています。

何とぞよろしくお願いいたします。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

そもそも、上で案内したこのファイルにFTP等でアップデートしましたか?
https://wp-cocoon.com/wp-content/uploads/2019/05/cocoon-master-pwafix.zip

このファイルでアップデートすれば、バージョンが1.7.6.3になるはずです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

であるにもかかわらず、サイトに適用されているバージョンは1.7.6.4になっています。
https://maruhoi.com/wordpress/wp-content/themes/cocoon-master/style.css

 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

最新版にアップデートするのではなく、上でも書いた「(当時の)最新版(1.7.6.3)にPWA対策処理を施したもの」にアップデートして試す必要があります。

できればFTPでzip解凍後の、cocoon-masterフォルダーをアップロードし、全てのファイルを上書きアップデートしてください。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。WordPressの管理画面で1.7.6.4にアップデート後、FTPでpwafix版に上書きしてしまったかもしれません。大変失礼いたしました。1.7.6.3にバージョンを下げて試してみます。

This post was modified 2年前 2回 by maruhoi1

返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

 お世話になっております。1.7.6.3をGitHubからダウンロードして適用し、バージョンが1.7.6.3になったことを確認した後、PWAFIX版を適用しました。それでもエラーは治りませんでした。

 Manifestファイルが読み込まれなくなってしまったようです。コンソールにもSW関連のconsole.logが一切表示されなくなりました。WordPressフォルダ内に「cocoon-manifest.json」と「cocoon-service-worker.js」はあります。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

PWAFIX版は、このファイル行ったということで間違いないですよね。
https://wp-cocoon.com/wp-content/uploads/2019/05/cocoon-master-pwafix.zip
特に事前にダウングレードする必要はありません。

動作確認手続き上、出来れば、もう一度自動更新から最新版(1.7.6.4)にアップデートした後、上記ファイルでFTPで上書きしてダウングレードしていただけないでしょうか。

あと説明に書かれてないですけど、Cocoon設定の保存はしたんですよね?

また、ソースコードを見るのに以下の設定にしていただければと思います。
https://wp-cocoon.com/theme-trouble/


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

この方法でしていただけた方が、第三者視点での確認上、助かります。

お世話になっております。WordPressの管理画面で1.7.6.4にアップデート後、FTPでpwafix版に上書きしてしまったかもしれません。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

 お世話になっております。

PWAFIX版は、このファイル行ったということで間違いないですよね。
https://wp-cocoon.com/wp-content/uploads/2019/05/cocoon-master-pwafix.zip

 はい、そうです。また、お送りいただいたリンクを参考に、縮小化の設定を無効化しました。

動作確認手続き上、出来れば、もう一度自動更新から最新版(1.7.6.4)にアップデートした後、上記ファイルでFTPで上書きしてダウングレードしていただけないでしょうか。

 自動更新で最新版にアップデートした後、FTPでPWAFIX版を上書きしました。記述してはいませんでしたが、動作を確認する際、「PWAを有効にする」のチェックボタンを外して保存、チェックを付けて再度保存してから動作を確認していました。

 今回もPWAFIX版を適用後、この設定の保存を繰り返してみましたが、Lighthouseでエラーが表示されました。

 もし「Cocoon設定の保存」の理解に間違いがあれば、ご教授いただけますと幸いです。何とぞよろしくお願いいたします。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

その手順で大丈夫だと思います。
第三者視点では、サーバー上の設定をうかがい知ることできないので、手順を明確にして出来る限り原因の切り分けをさせていただくのはご了承ください。

ここまでを踏まえた上で、子テーマのfunctions.phpに以下のコードを挿入するとサイト上部にどのようなテキストが表示されますてしょうか。

add_action('wp', function (){
  var_dump(get_theme_pwa_manifest_json_file());
  var_dump(get_theme_pwa_manifest_json_url());
  var_dump(get_theme_pwa_service_worker_js_file());
  var_dump(get_theme_pwa_service_worker_js_url());
}); 

表示したものを貼り付けていただければと思います。
※セキュリティー上を伏字にした方が良いものは、伏字にしてください。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。functions.phpに挿入して以下のコードが表示されました。

何とぞよろしくお願いいたします。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

よろしければテキストも貼っていただけますでしょうか。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

string(34) "/var/www/html/cocoon-manifest.json" string(40) "https://maruhoi.com/cocoon-manifest.json" string(38) "/var/www/html/cocoon-service-worker.js" string(44) "https://maruhoi.com/cocoon-service-worker.js"

何とぞよろしくお願いいたします。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

パスやURLを見る限り、正常にパスは取得できているようです。
サイトからサーバーを調べる限り、サーバー情報は取得できないようです(添付画像)。
自前のサーバーもしくは、VPSとかでしょうか。
マニフェストファイルのあるパスとかが書き込み不可とかにはなっていないんですよね?
パスは正しいのに、ファイルが存在しないことに原因があるようです。
https://maruhoi.com/cocoon-manifest.json
ちなみに当サイトだと問題なく表示されます。
https://wp-cocoon.com/cocoon-manifest.json


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

PWA用のタグが出力されないのも、ファイルが存在しないからなんですが、作成できないから存在してないんだと思います。

パスに問題があるのであれば、あとはファイルの作成のみなんですが、僕の同様ディレクトリ構造のテスト環境では、問題なく作成できています。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

/var/www/html/
こちらのディレクトリが以下のURLと同等になるということで大丈夫でしょうか。
https://maruhoi.com

違う場合は、パスの取得方法に何か問題がある可能性があります。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

 お世話になっております。ConoHa VPSで構築しています。

 「/var/www/html/wordpress」が https://maruhoi.com です。「/var/www/html」にWordPressフォルダがあり、その中にcocoon-manifest.jsonがあります。
https://maruhoi.com/wordpress/cocoon-manifest.json で表示されますね。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

冒頭の環境情報に、以下のようにあります。

サイトURL:  https://maruhoi.com/wordpress 
ホームURL: https://maruhoi.com

なので、ホームURLが、 https://maruhoi.com → /var/www/html/wordpress ならば、

サイトURL(WordPressインストール場所)は、 https://maruhoi.com/wordpress → /var/www/html/wordpress/wordpress になることになるんですが、こんな構造なんでしょうか??

https://maruhoi.com/wordpress/cocoon-manifest.json
これがあるのは、単に(以前のバージョンの)古いファイルが残っているだけだと思います。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。Apacheの設定を見直したのですが、DocumentRootは/var/www/htmlです。また、WordPressのインストール場所は/var/www/html/wordpressです。(一部ぼかしております)

何とぞよろしくお願いいたします。

This post was modified 2年前 by maruhoi1

返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

だとしたら以下のは、合っているということで問題ないようですね。

パスやURLを見る限り、正常にパスは取得できているようです。

僕は、サーバコマンドに関してはそこまで詳しいわけではないのですが、先日の以下の質問に関しての回答はどうでしょう。

マニフェストファイルのあるパスとかが書き込み不可とかにはなっていないんですよね?

ちなみにここでいう「マニフェストファイルのあるパス」は「/var/www/html」です。このディレクトリの書き込み権限的なものとか。

あと、「/var/www/html」でlsコマンドを実行すると、どういったリストが表示されますか?


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

「マニフェストファイルのあるパス」ですけど、『/var/www/html/wordpress』かも。

WordPress本体ファイルを入れるフォルダを作ってるだけなので。

ちなみに当サイトだと問題なく表示されます。
https://wp-cocoon.com/cocoon-manifest.json

わいひらさんのWordPress環境が現在以下だとして

  • wp-cocoon.com/public_html/wp-content

それをトピック主さんの環境に置き換えたら

  • wp-cocoon.com/public_html/wordpress/wp-content

でもトップページは https://wp-cocoon.com

みたいな感じのようですね。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。

まず、「/var/www/html」は「drwxr-xr-x」で書き込み権限がありました。
「var/www/html/wordpress」も「drwxr-xr-x」で書き込み権限がありました。

「var/www/html」でls -alコマンドを実行した結果は以下のとおりです(一部ボカシを入れております)。

またマニフェストファイルのパスについてはかうたっくさんのご指摘の通り、「/var/www/html/wordpress」にあります。2019年5月11日 16:01の投稿で記述したとおりです。/var/www/html/wordpressにある「cocoon-manifest.json」を編集すると、 https://maruhoi.com/wordpress/cocoon-manifest.json の内容が変更されます。

何とぞよろしくお願いいたします。


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 826
 

CocoonのPWA機能を使用したことがないので、具体的な挙動とかはよく分かりませんが、

string(34) "/var/www/html/cocoon-manifest.json"
string(40) "https://maruhoi.com/cocoon-manifest.json"
string(38) "/var/www/html/cocoon-service-worker.js"
string(44) "https://maruhoi.com/cocoon-service-worker.js"

で主要な関数の値が取得できていて、値に対するディレクトリにおいてファイルの生成ができていない。
かつ、該当ディレクトリのパーミッションに問題が見られないのであれば、SELinuxに問題がある可能性もひとつ考えられます。

SELinuxが有効になっている場合は一旦無効にして、ファイルが生成されるかどうかを確認してみた方がよいかもしれません。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

またマニフェストファイルのパスについてはかうたっくさんのご指摘の通り、「/var/www/html/wordpress」にあります。2019年5月11日 16:01の投稿で記述したとおりです。/var/www/html/wordpressにある「cocoon-manifest.json」を編集すると、 https://maruhoi.com/wordpress/cocoon-manifest.json の内容が変更されます。

https://maruhoi.com/wordpress/cocoon-manifest.json

これなんですが、Cocoon設定で「短いアプリ名」が現在「maruhoi.com」になっているんですが、試しに「maruhoi」に変更すると変わりますか?

書式を見る限り、どう見ても修正前のバージョンの書式なんですよね。

2019-05-17_06h24_46.png

 

なので、上でも書いたように修正前のバージョンで以前作成されたファイルが単に残っているだけではないかと思っています。

https://maruhoi.com/wordpress/cocoon-manifest.json
これがあるのは、単に(以前のバージョンの)古いファイルが残っているだけだと思います

全てのパスは、正しく意図通りの場所に取得できているので、本来ならここにPWAファイルが作成されるはずなのに、作成されていないというのが焦点だと思います。

string(34) "/var/www/html/cocoon-manifest.json"
string(40) "https://maruhoi.com/cocoon-manifest.json"
string(38) "/var/www/html/cocoon-service-worker.js"
string(44) "https://maruhoi.com/cocoon-service-worker.js"


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

もし修正版で、新しく作成されているのであればスタートURLが、/ではなくURL形式になっているはずなんですよね。

https://wpsubdir.im-cocoon.net/cocoon-manifest.json


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

また、サービスワーカー自体の書式も古いです。

修正版では削除したはずの、スクリプトの相対パスがまだ入ったままです。

https://maruhoi.com/wordpress/cocoon-service-worker.js


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

もし、修正版で更新したなら、サービスワーカーも相対パス部分が削除されているはずなんですよね。

こんな感じで。
https://wpsubdir.im-cocoon.net/cocoon-service-worker.js


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

https://wpsubdir.im-cocoon.net/

一応こちらのサイトなんですが、同様のディレクトリ構造にしてサイトを作ったテスト環境です。

サイトURL: https://wpsubdir.im-cocoon.net/wp 
ホームURL: https://wpsubdir.im-cocoon.net

インストールディレクトリの名前こそ違いますが、構造は同じだと思います。

このページでPWAをテストすると、PWA部分は問題なくクリアマークが出ます。


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 826
 

本トピックのやりとりをざっと確認した中で、現状は「/var/www/html/」ディレクトリ上にPWA用ファイルが生成できていないことが問題だという認識なのですが、間違いないでしょうか?

修正前は「/var/www/html/wordpress/」ディレクトリ上にファイル生成ができていて、当時の旧ファイルが残っているだけと。
修正後のvar_dumpで見た値からだと、通常なら「/var/www/html/wordpress/」ディレクトリ上にあるファイルを変更することはできず、「/var/www/html/」ディレクトリ上でファイルの作成・変更がなされるはずですよね。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

はい。
僕は現在そのような認識です。

前回の連続返信で書いた手順で、マニフェストファイル等を更新して「短いアプリ名」、もしくはサービスワーカーのパス情報等が「/var/www/html/wordpress/」内のファイルに対して反映されなければ、ロコさんの書かれた通りでおそらく間違いないのではないかなと考えています。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん ロコさん

 お世話になっております。/var/www/html直下に2つのファイルが生成されていなかったのはフォルダのオーナーがApacheのユーザ/グループになっていないことが原因でした。chownコマンドでhtmlフォルダの権限をApacheのユーザー/グループに変更し、WordPressの設定からアプリ名を変更した結果、2つのファイルが/var/www/html直下に生成されました。

https://maruhoi.com/cocoon-manifest.json

 とりあえず遠回りで申し訳ありませんでしたが、cocoon-manifest.jsonとcocoon-service-worker.jsを生成して土台に立つことができました(PWAの方はエラーが出たままでした)。

何とぞよろしくお願いいたします。

This post was modified 2年前 by maruhoi1

返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

やはり、ファイルが作成できる状態になっていなかったんですね。

https://maruhoi.com/wordpress/cocoon-manifest.json
https://maruhoi.com/wordpress/cocoon-service-worker.js

あと、上記のwordpress/ディレクトリのPWA関係ファイルの内容は変わっていないので、やはり古いファイルだったというのも間違いなさそうですね。
なので、パスの取得については問題ないと言っていいでしょう。

とりあえずは、一つ一つ問題を潰していくということで、一度サイトアイコンを512x512サイズのものに変更していただけますでしょうか。
https://wp-cocoon.com/site-icon/

これだけでエラーは改善されないかもしれませんが、とりあえず一つ一つということで。
※サイトアイコンを変更後は、Cocoonを保存ボタンを押してください。
※冒頭のリストにないので、使用されていないと思いますが、ページキャシュプラグインを利用している場合は、プラグインを無効にしておいてください。


返信引用
maruhoi1
(@maruhoi1)
Eminent Member
結合: 2年前
投稿: 20
Topic starter  

わいひらさん

お世話になっております。512x512のアイコンを仮で設定したところ、LighthouseでPWAにチェックが付きました!

ほとんどこちら側の設定に原因があったにも関わらず、約1カ月にわたりご対応いただき申し訳ございません&ありがとうございました。途中でコメントいただいたかうたっくさん、ロコさんもありがとうございました。

引き続き何とぞよろしくお願いいたします。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

おおっ!うまくいったんですね。
まさか、アイコン設定の不備だけであんなにいっぱいエラーが出るとは思いませんでした。
なので、他にも問題があるのかなと思っていましたが、改善されたようでよかったです。

これを踏まえた上で、再度動作確認後、次(1.7.8)か、次(1.7.9)のバージョンアップには反映させられればと思います。

その間、他には何か動作上の問題がないかの確認もしていただければ幸いです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12713
わいひら - Facebookわいひら - Twitter
 

とりあえずこのトピックは、PWAの仕様変更が本テーマに反映されるまでトップに固定しておこうと思います。


返信引用
固定ページ 1 / 2

返信する

投稿者名

投稿者メールアドレス

タイトル *

許可された最大ファイルサイズ 5MB

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年11ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon
タイトルとURLをコピーしました