DEV Community: Bayu Angora

[HELP] Can't Launch Website Apps

Bayu Angora — Wed, 03 Apr 2024 05:00:47 +0000

Dear All

I build PWA and it's detected with good score ->
https://www.pwabuilder.com/reportcard?site=https://angora.id

But after I installed it on Mobile Chrome (Android) it can't be launched and getting error like this ->

java.lang.RuntimeException: Unable to get provider org.chromium.webapk.shell_apk.h2o.SplashContentProvider: java.lang.ClassNotFoundException: Didn't find class "org.chromium.webapk.shell_apk.h2o.SplashContentProvider" on path: DexPathList[[zip file "/data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/base.apk"],nativeLibraryDirectories=[/data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/lib/arm, /data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/base.apk!/lib/armeabi-v7a, /system/lib, /vendor/lib]]
    at android.app.ActivityThread.installProvider(ActivityThread.java:6105)
    at android.app.ActivityThread.installContentProviders(ActivityThread.java:5572)
    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5511)
    at android.app.ActivityThread.-wrap2(ActivityThread.java)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1611)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:165)
    at android.app.ActivityThread.main(ActivityThread.java:6375)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:912)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:802)
Caused by: java.lang.ClassNotFoundException: Didn't find class "org.chromium.webapk.shell_apk.h2o.SplashContentProvider" on path: DexPathList[[zip file "/data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/base.apk"],nativeLibraryDirectories=[/data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/lib/arm, /data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/base.apk!/lib/armeabi-v7a, /system/lib, /vendor/lib]]
    at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:74)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:380)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:312)
    at android.app.ActivityThread.installProvider(ActivityThread.java:6081)
    ... 10 more
    Suppressed: java.io.IOException: Failed to open dex files from /data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/base.apk because: Failed to open dex file '/data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/base.apk' from memory: Unrecognized version number in /data/app/org.chromium.webapk.aed72650bb8b07d40_v2-1/base.apk: 0 3 8 
        at dalvik.system.DexFile.openDexFileNative(Native Method)
        at dalvik.system.DexFile.openDexFile(DexFile.java:373)
        at dalvik.system.DexFile.<init>(DexFile.java:113)
        at dalvik.system.DexFile.<init>(DexFile.java:78)
        at dalvik.system.DexPathList.loadDexFile(DexPathList.java:366)
        at dalvik.system.DexPathList.makeElements(DexPathList.java:327)
        at dalvik.system.DexPathList.makeDexElements(DexPathList.java:263)
        at dalvik.system.DexPathList.<init>(DexPathList.java:126)
        at dalvik.system.BaseDexClassLoader.<init>(BaseDexClassLoader.java:62)
        at dalvik.system.PathClassLoader.<init>(PathClassLoader.java:64)
        at com.android.internal.os.PathClassLoaderFactory.createClassLoader(PathClassLoaderFactory.java:43)
        at android.app.ApplicationLoaders.getClassLoader(ApplicationLoaders.java:58)
        at android.app.LoadedApk.createOrUpdateClassLoaderLocked(LoadedApk.java:522)
        at android.app.LoadedApk.getClassLoader(LoadedApk.java:555)
        at android.app.ActivityThread.getTopLevelResources(ActivityThread.java:1942)
        at android.app.LoadedApk.getResources(LoadedApk.java:773)
        at android.app.ContextImpl.<init>(ContextImpl.java:2078)
        at android.app.ContextImpl.createAppContext(ContextImpl.java:2023)
        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5410)
        ... 8 more

How to fix this problem?

Source:
https://angora.id/script.js
https://angora.id/service.js
https://angora.id/manifest.json

Thanks

How I Got Web Design Awards In Early 2020

Bayu Angora — Sat, 04 Jan 2020 12:33:58 +0000

In the middle 2019, I submitted my website to Web Design Awards. Few days ago, I got an email from Web Design Team. The message is about announcement that in early 2020, my website will be displayed as a winner.

I know there are so many great websites submitted every years. But I feel optimist that my website is qualified enough to displayed on Web Design Awards, at least as a nominee. Because Web Design Awards is not only about aesthetic, but also about speed and user friendliness too.

My website is very fast and simple. Load page is about your blink eyes. Very secure and responsive. No bloated script, no animation, no heavy images. I only use simple CSS with minimal JS for darkmode button. I got perfect score on Lighthouse and Validator. Also I got A+ grade on Security and Observatory.

My principal for my website is keep it simple. User friendly on every devices is a must. Avoid every bloated things that you don't need. And prioritize function rather than redundant decoration.

What Is Your Favorite Mobile Browser?

Bayu Angora — Fri, 25 Oct 2019 19:29:22 +0000

What's your favorite mobile browser?
I like Opera Mini, but now I use Via Browser because it more lighter and faster with full of cool feature such view source, user agent, desktop mode, etc. What about you?

Need Help About JavaScript Error Log

Bayu Angora — Sat, 28 Sep 2019 10:47:19 +0000

Dear All

I have this code ->

if("serviceWorker" in navigator){
navigator.serviceWorker.register("/service.js");}

if(localStorage.getItem("preferredTheme")==="dark"){setDarkMode(true);}
function setDarkMode(isDark){var darkBtn=document.getElementById("darkBtn");
var lightBtn=document.getElementById("lightBtn");
if(isDark){lightBtn.style.display="block";
darkBtn.style.display="none";
localStorage.setItem("preferredTheme","dark");}else{lightBtn.style.display="none";
darkBtn.style.display="block";
localStorage.removeItem("preferredTheme");}
document.body.classList.toggle("darkmode");}
document.getElementById("darkBtn").addEventListener("click", function(){setDarkMode(true);});
document.getElementById("lightBtn").addEventListener("click", function(){setDarkMode(false);});

And I got this warning from LightHouse ->

TypeError: Cannot read property 'addEventListener' of null at https://angora.me/script.js :13:35

Any suggestion how to fix it?

Regards

How To Change Preload From Default Hover To Page Display Instantly?

Bayu Angora — Fri, 27 Sep 2019 08:20:33 +0000

Dear All

I use instant page script for https://angora.me with default code like this ->

let urlToPreload;
let mouseoverTimer;
let lastTouchTimestamp;
const prefetcher=document.createElement("link");
const isSupported=prefetcher.relList&&prefetcher.relList.supports&&prefetcher.relList.supports("prefetch");
const isDataSaverEnabled=navigator.connection&&navigator.connection.saveData;
const allowQueryString="instantAllowQueryString" in document.body.dataset;
const allowExternalLinks="instantAllowExternalLinks" in document.body.dataset;
const useWhitelist="instantWhitelist" in document.body.dataset;
let delayOnHover=60;
let useMousedown=!1;
let useMousedownOnly=!1;
if("instantIntensity" in document.body.dataset){if(document.body.dataset.instantIntensity.substr(0,"mousedown".length)==="mousedown"){useMousedown=!0;
if(document.body.dataset.instantIntensity==="mousedown-only"){useMousedownOnly=!0;}}
else{const milliseconds=parseInt(document.body.dataset.instantIntensity);
if(milliseconds!==isNaN){delayOnHover=milliseconds;}}}
if(isSupported&&!isDataSaverEnabled){prefetcher.rel="prefetch";
document.head.appendChild(prefetcher);
const eventListenersOptions={capture:!0,passive:!0,};
if(!useMousedownOnly){document.addEventListener("touchstart",touchstartListener,eventListenersOptions);}
if(!useMousedown){document.addEventListener("mouseover",mouseoverListener,eventListenersOptions);}
else{document.addEventListener("mousedown",mousedownListener,eventListenersOptions);}}
function touchstartListener(event){lastTouchTimestamp=performance.now();
const linkElement=event.target.closest("a");
if(!isPreloadable(linkElement)){return;}
linkElement.addEventListener("touchcancel",touchendAndTouchcancelListener,{passive:!0});
linkElement.addEventListener("touchend",touchendAndTouchcancelListener,{passive:!0});
urlToPreload=linkElement.href;
preload(linkElement.href);}
function touchendAndTouchcancelListener(){urlToPreload=undefined;
stopPreloading();}
function mouseoverListener(event){if(performance.now()-lastTouchTimestamp<1100){return;}
const linkElement=event.target.closest("a");
if(!isPreloadable(linkElement)){return;}
linkElement.addEventListener("mouseout",mouseoutListener,{passive:!0});
urlToPreload=linkElement.href;
mouseoverTimer=setTimeout(() => {preload(linkElement.href);
mouseoverTimer=undefined;},delayOnHover);}
function mousedownListener(event){const linkElement=event.target.closest("a");
if(!isPreloadable(linkElement)){return;}
linkElement.addEventListener("mouseout",mouseoutListener,{passive:!0});
urlToPreload=linkElement.href;
preload(linkElement.href);}
function mouseoutListener(event){if(event.relatedTarget&&event.target.closest("a")===event.relatedTarget.closest("a")){return;}
if(mouseoverTimer){clearTimeout(mouseoverTimer);
mouseoverTimer=undefined;}
urlToPreload=undefined;
stopPreloading();}
function isPreloadable(linkElement){if(!linkElement||!linkElement.href){return;}
if(urlToPreload===linkElement.href){return;}
if(useWhitelist&&!("instant" in linkElement.dataset)){return;}
if(!allowExternalLinks&&linkElement.origin!==location.origin&&!("instant" in linkElement.dataset)){return;}
if(!["http:","https:"].includes(linkElement.protocol)){return;}
if(linkElement.protocol==="http:"&&location.protocol==="https:"){return;}
if(!allowQueryString&&linkElement.search&&!("instant" in linkElement.dataset)){return;}
if(linkElement.hash&&linkElement.pathname+linkElement.search===location.pathname+location.search){return;}
if("noInstant" in linkElement.dataset){return;}
return!0;}
function preload(url){prefetcher.href=url;}
function stopPreloading(){prefetcher.removeAttribute("href");}

The default code above is preload everytime user hover to url. I want to change it to preload everytime the page is displayed. So, every url on that page is always preloaded instantly. How to do that?

Regards

Downgrade About Dark Mode And Content Security Policy

Bayu Angora — Sun, 22 Sep 2019 01:56:04 +0000

https://observatory.mozilla.org/

Observatory (grade checker by Mozilla) will downgrade score if website still use inline style or script.

https://infosec.mozilla.org/guidelines/web_security#content-security-policy

How to fix this issue while dark mode toggle needs "onclick" to trigger and switch the light / dark mode?

Need Help About Cross Browser Compatibility

Bayu Angora — Sat, 21 Sep 2019 14:46:57 +0000

Dear All

I need some help about cross browser compatibility for my website -> https://angora.me/blog/

And here is my CSS code ->
https://angora.me/style.css

On modern browser, my website looks fine like this ->

But on some old browser, my website looks ugly like this ->

Even failed connection like this ->

I use Hugo with Netlify and Let's Encrypt SSL. I don't know if this compatibility issue is from my code side, SSL side, server side, browser side, etc? Any idea how to fix this issue?

Regards

Why Paying For Something You Can Get For Free?

Bayu Angora — Mon, 16 Sep 2019 04:23:28 +0000

Dear All

I use Netlify for my website because Netlify provide complete feature (SSL, hosting, deployment, etc) for free.

Another service such AWS, Azure, Firebase, etc, there are good. But the feature isn't as complete as Netlify. You need to integrate with external deployment to make it works. Or you have to subscribe monthly payment to upgrade the limitation.

I don't affiliated with Netlify or another service above. But I just curious, why so many people out there choose another service with limited feature and monthly payment?

Cheers!

Devblog Is The Fastest Blogging Platform With User Friendly Feature Like Social Media

Bayu Angora — Tue, 30 Jul 2019 00:59:23 +0000

So many people out there uses social media to share their idea. But the most problem about social media is we don't have a full of freedom there, because of social media censorship and restriction. Even we can loss it all if our accounts got suspended.

To avoid censorship and restriction, we can build personal website as primary platform. We can post whatever we want without worry about censorship and account suspended, as long as we don't abuse the hosting terms of service. But, there's an extra effort to build personal website.

Beside a cost for domain and hosting, we have to learn about basic blogging and development. Not every people will confident with this. Finally, they will back to choose mainstream social media as their primary platform. Unfortunately, they can't use social media with their own domain for branding.

Finally, I found Devblog from Hashnode to cover it all. Devblog is user friendly blogging platform that load faster and rich feature. We can use Devblog subdomain for free or we can connect our own domain for personal branding. Just post whatever you want and let's celebrate our freedom of speech.

Bayu Angora