Chrome以外で、Vivliostyle-Pubの起動に失敗する #56
Comments
|
@ogwata これって現状も確認できるバグでしょうか？ |
|
現時点のバージョンで再現しました。 2021-08-26.23.02.44.mov
|
|
なるほどです。 |
|
21時に投稿したコメントは、以前のURL https://vivliostyle-pub-develop-proto.vercel.app/ へのアクセス結果でした。失礼しました。お詫びして削除します。 あらためて3種のブラウザで https://vivliostyle-pub-develop.vercel.app/ にアクセスした動画を投稿します。ただ、状況は悪くなっているように見えます。
404エラーは3つあるファイルのどれでも発生し、リロードしても、スタイルを変更しても治りません。 Safariでは2回ログインしようとしていますが、ログイン画面に戻ってしまうのは、いずれもログインボタン押下後30秒のようです。 2021-09-02.23.23.32.movなお、ChromeでGitHubのセッティングからGitHub Appsや認証情報の削除をしてからログインし直した動画が以下になります。ただ、やはり404エラーは治りませんでした。 2021-09-02.23.31.43.mov |
|
私も試してみました。
以上テストした範囲では、正常に動くのはMac上の現行バージョンのChromeだけでした。同じChrome 93でもWindowsではプレビューが404エラーになりました。MacのChromeでもCanary版(Chrome 95)では同じくプレビューが404エラーになりました。 |
|
現在、プレビューが404エラーになる件を調査中です。 簡単なプログラムを作成して検証したところ、 vivliostyle/viewerのnet.tsのajax関数でXMLHttpRequestを使ってソースになるHTMLファイルを読んでいるようですので、 ajax関数を改造して先にキャッシュを探す処理を入れてみてはどうでしょうか。 まだ検証が足りていませんが、net.tsのajax関数を以下のように変更したら404エラーは解消されました。 export function ajax(
url: string,
opt_type?: XMLHttpRequestResponseType,
opt_method?: string,
opt_data?: string,
opt_contentType?: string,
): Task.Result<Response> {
const frame: Task.Frame<Response> = Task.newFrame("ajax");
const request = new XMLHttpRequest();
const continuation = frame.suspend(request);
const response: Response = {
status: 0,
statusText: "",
url,
contentType: null,
responseText: null,
responseXML: null,
responseBlob: null,
};
caches
.match(url)
.then((res) => {
if (res) {
res.text().then((txt) => {
Logging.logger.warn("caches match", txt);
response.status = res.status;
response.statusText = res.statusText;
response.contentType = res.headers.get("Content-Type");
response.responseText = txt;
continuation.schedule(response);
});
} else {
Logging.logger.debug("caches no match");
request.open(opt_method || "GET", url, true);
if (opt_type) {
request.responseType = opt_type;
}
request.onreadystatechange = () => {
if (request.readyState === 4) {
response.status = request.status;
response.statusText =
request.statusText || (request.status == 404 && "Not Found") || "";
if (response.status == 200 || response.status == 0) {
if (
(!opt_type || opt_type === XMLHttpRequestResponseType.DOCUMENT) &&
request.responseXML &&
request.responseXML.documentElement.localName != "parsererror"
) {
response.responseXML = request.responseXML;
response.contentType = (request.responseXML as any).contentType;
} else if (
(!opt_type || opt_type === XMLHttpRequestResponseType.DOCUMENT) &&
request.response instanceof HTMLDocument
) {
response.responseXML = request.response;
response.contentType = (request.response as any).contentType;
} else {
const text = request.response;
if (
(!opt_type || opt_type === XMLHttpRequestResponseType.TEXT) &&
typeof text == "string"
) {
response.responseText = text;
} else if (!text) {
Logging.logger.warn("Unexpected empty success response for", url);
} else {
if (typeof text == "string") {
response.responseBlob = makeBlob([text]);
} else {
response.responseBlob = text as Blob;
}
}
const contentTypeHeader = request.getResponseHeader("Content-Type");
if (contentTypeHeader) {
response.contentType = contentTypeHeader.replace(/(.*);.*$/, "$1");
}
}
}
continuation.schedule(response);
}
};
try {
if (opt_data) {
request.setRequestHeader(
"Content-Type",
opt_contentType || "text/plain; charset=UTF-8",
);
request.send(opt_data);
} else {
if (
/^file:|^https?:\/\/[^/]+\.githubusercontent\.com|\.(xhtml|xht|opf)$/i.test(
url,
)
) {
// File or GitHub raw URL or .xht(ml) or .opf
if (
/\/aozorabunko\/[^/]+\/cards\/[^/]+\/files\/[^/.]+\.html$/.test(url)
) {
// Aozorabunko's (X)HTML support
request.overrideMimeType("text/html; charset=Shift_JIS");
} else if (/\.(html|htm)$/i.test(url)) {
request.overrideMimeType("text/html; charset=UTF-8");
} else if (/\.(xhtml|xht|xml|opf)$/i.test(url)) {
request.overrideMimeType("application/xml; charset=UTF-8");
} else if (/\.(txt|css)$/i.test(url)) {
request.overrideMimeType("text/plain; charset=UTF-8");
} else {
// fallback to HTML
request.overrideMimeType("text/html; charset=UTF-8");
}
} else if (/^data:,(<|%3c)/i.test(url)) {
request.overrideMimeType("text/html; charset=UTF-8");
} else if (/^data:,/i.test(url)) {
request.overrideMimeType("text/plain; charset=UTF-8");
}
request.send(null);
}
} catch (e) {
Logging.logger.warn(e, `Error fetching ${url}`);
continuation.schedule(response);
}
}
})
.catch((err)=>{ Logging.logger.error('caches error', err); });
return frame.result();
} |
|
ブラウザ側でのXMLHttpRequestの実装がfetchイベントを発火させるように変わらない限り、とり急ぎ問題を解決するにはvivliostyle.jsに手を入れるしかないのでは。 方法としては以下の3つがあると思います。
|
|
この修正で、 Vivliostyle Pub 以外での Vivliostyle.js の利用で問題が起きることがないのであれば、この修正を入れた Vivliostyle.js をリリースしようと思います。 |
|
vivliostyle.js のほうに pull req しませんか。 |
|
画像をリポジトリに追加してVFMで表示させる記述をしたところviewer内で404エラーになってしまうため、原因を調べています。 このエラーを修正できたらプルリクを投げます。 |
|
キャッシュに保存されているHTMLや画像が404になる原因がService Workerのスコープの問題であることがわかりました。 vivliostyle.jsへの変更は不要で、Pub側での修正だけで済みそうです。#110 お騒がせ致しました。 |
今気付いたのですが、レビュアーに@spring-rainingさんも加えてもらえませんか。 |
|
Safari (WebKit) で動かない問題は次のissue: |
Safari (WebKit)での #138 の問題が解決したあと、Safari および Firefox でログインに失敗するのは以下の問題のためでした：
この "This is already required on Firefox 109+ and Safari 16.1+" のとおり、FirefoxとSafariでは動きません。そして、Chromeでも対応しないでいると6月24日からは動かなくなるということです。 そこで次のPRでこの対応をしました： これによって、Chrome以外でもログインできるようになるはずです。 |
The text was updated successfully, but these errors were encountered: