Finish PWA article
This commit is contained in:
parent
2c8190f69a
commit
6c140e813e
3 changed files with 241 additions and 16 deletions
BIN
content/posts/creating-a-firefox-pwa-for-discord/cover.png
Normal file
BIN
content/posts/creating-a-firefox-pwa-for-discord/cover.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 88 KiB |
216
content/posts/creating-a-firefox-pwa-for-discord/cover.svg
Normal file
216
content/posts/creating-a-firefox-pwa-for-discord/cover.svg
Normal file
|
@ -0,0 +1,216 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
preserveAspectRatio="xMidYMid"
|
||||
width="1500"
|
||||
height="1000"
|
||||
version="1.1"
|
||||
id="svg120"
|
||||
sodipodi:docname="cover.svg"
|
||||
inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview122"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.53007813"
|
||||
inkscape:cx="728.19455"
|
||||
inkscape:cy="546.14591"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1048"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg120" />
|
||||
<defs
|
||||
id="defs98">
|
||||
<path
|
||||
d="M 0,0 H 1280 V 256 H 0 Z"
|
||||
id="A" />
|
||||
<linearGradient
|
||||
id="B"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="1280"
|
||||
y2="0">
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#ff3c61"
|
||||
id="stop89" />
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#fe7c38"
|
||||
id="stop91" />
|
||||
</linearGradient>
|
||||
<path
|
||||
id="C"
|
||||
d="m 148.918,482.362 c -4.645,0 -8.413,3.813 -8.413,8.518 0,4.705 3.768,8.518 8.413,8.518 4.639,0 8.407,-3.814 8.407,-8.518 0,-4.704 -3.768,-8.518 -8.407,-8.518 z" />
|
||||
<path
|
||||
id="D"
|
||||
d="m 600.661,485.693 h 38.152 l -18.127,-50.754 22.615,-57.487 65.083,172.634 h -47.992 l -11.049,-30.901 h -61.976 z" />
|
||||
<path
|
||||
id="E"
|
||||
d="M 614.472,377.452 H 568.379 L 520.732,488.973 486.896,377.452 h -35.39 l -36.426,111.521 -25.55,-50.754 -23.306,71.47 23.651,40.396 h 45.403 l 32.8,-100.128 31.247,100.128 H 544.9 Z" />
|
||||
<path
|
||||
id="F"
|
||||
d="m 320.649,490.872 c 8.632,0 16.228,-1.036 22.96,-2.935 l 7.423,-22.615 20.543,-63.357 c -1.554,-2.417 -3.453,-4.834 -5.352,-7.078 -10.703,-11.566 -26.068,-17.436 -46.438,-17.436 h -71.298 v 172.634 h 43.676 v -59.213 h 28.485 z m 15.364,-57.142 c 0,7.078 -1.899,12.602 -5.524,16.745 -3.971,4.488 -11.221,6.905 -21.924,6.905 h -16.4 v -46.438 h 16.573 c 10.013,0 16.918,2.072 21.061,6.215 4.143,4.143 6.215,9.667 6.215,16.573 z" />
|
||||
<clipPath
|
||||
id="clip0">
|
||||
<rect
|
||||
width="292"
|
||||
height="56.4706"
|
||||
fill="#ffffff"
|
||||
transform="translate(0,11.7646)"
|
||||
id="rect3729"
|
||||
x="0"
|
||||
y="0" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip1">
|
||||
<rect
|
||||
width="292"
|
||||
height="56.4706"
|
||||
fill="#ffffff"
|
||||
transform="translate(0,11.7646)"
|
||||
id="rect3732"
|
||||
x="0"
|
||||
y="0" />
|
||||
</clipPath>
|
||||
<filter
|
||||
style="color-interpolation-filters:sRGB;"
|
||||
inkscape:label="Drop Shadow"
|
||||
id="filter4915"
|
||||
x="-0.0384"
|
||||
y="-0.10861516"
|
||||
width="1.0768"
|
||||
height="1.2118533">
|
||||
<feFlood
|
||||
flood-opacity="0.498039"
|
||||
flood-color="rgb(255,255,255)"
|
||||
result="flood"
|
||||
id="feFlood4905" />
|
||||
<feComposite
|
||||
in="flood"
|
||||
in2="SourceGraphic"
|
||||
operator="in"
|
||||
result="composite1"
|
||||
id="feComposite4907" />
|
||||
<feGaussianBlur
|
||||
in="composite1"
|
||||
stdDeviation="24"
|
||||
result="blur"
|
||||
id="feGaussianBlur4909" />
|
||||
<feOffset
|
||||
dx="0"
|
||||
dy="-3"
|
||||
result="offset"
|
||||
id="feOffset4911" />
|
||||
<feComposite
|
||||
in="SourceGraphic"
|
||||
in2="offset"
|
||||
operator="over"
|
||||
result="composite2"
|
||||
id="feComposite4913" />
|
||||
</filter>
|
||||
</defs>
|
||||
<use
|
||||
xlink:href="#A"
|
||||
fill="url(#B)"
|
||||
id="use100"
|
||||
style="fill:url(#B)"
|
||||
transform="scale(1.171875,3.90625)" />
|
||||
<g
|
||||
transform="matrix(1.1184375,0,0,1.1184375,356.30167,-268.69749)"
|
||||
id="g118">
|
||||
<g
|
||||
stroke="#ffffff"
|
||||
fill="#ffffff"
|
||||
stroke-width="4.316"
|
||||
id="g108">
|
||||
<path
|
||||
d="M 213.511,473.437 C 202.888,466.445 195.662,454.581 188.01,442.02 l -2.71,-4.433 c 14.563,-41.133 -5.189,-74.203 -6.061,-75.629 l -5.263,-8.605 -34.144,39.685 c -12.309,-5.376 -26.556,-8.014 -43.062,-8.014 -16.506,0 -30.752,2.639 -43.062,8.014 L 19.563,353.353 14.3,361.958 c -0.872,1.426 -20.624,34.496 -6.061,75.629 l -2.71,4.433 c -7.651,12.561 -14.878,24.426 -25.501,31.417 l -9.171,6.037 9.077,6.179 c 0.624,0.425 62.537,42.619 76.659,56.741 4.467,4.468 8.024,9.103 11.464,13.586 7.773,10.131 15.115,19.701 28.714,19.701 13.599,0 20.941,-9.57 28.714,-19.701 3.439,-4.483 6.996,-9.118 11.464,-13.586 14.121,-14.121 76.035,-56.316 76.659,-56.741 l 9.077,-6.179 z m -42.458,-94.148 c 3.349,9.256 6.867,24.41 3.448,42.134 -4.756,-6.316 -10.185,-12.334 -16.87,-17.668 -1.515,-1.209 -3.07,-2.358 -4.662,-3.448 z m -151.479,10.05 a 81.78,81.78 0 0 1 2.923,-10.04 l 18.075,21.008 a 79.59,79.59 0 0 0 -4.662,3.448 c -6.694,5.34 -12.129,11.368 -16.89,17.694 -2.047,-10.502 -1.866,-21.252 0.554,-32.11 z M 74.075,539.86 c -2.129,-2.584 -4.461,-5.236 -7.088,-7.863 -11.205,-11.204 -47.764,-37.04 -66.917,-50.33 11.053,-3.335 28.253,-7.256 48.023,-7.256 5.836,0 10.462,1.858 14.141,5.68 11.506,11.954 12.317,39.672 11.842,59.769 z m 22.695,21.119 c -3.187,0 -5.791,-1.322 -8.564,-3.904 l 0.22,-6.4 0.065,-1.705 h 16.557 l 0.065,1.705 0.22,6.4 c -2.773,2.582 -5.377,3.904 -8.564,3.904 z m 7.891,-26.709 H 88.88 C 89.079,511.985 87.02,484.646 72.825,469.897 66.319,463.138 57.999,459.71 48.093,459.71 c -14.863,0 -28.323,2.001 -39.22,4.443 3.255,-4.715 6.253,-9.629 9.212,-14.487 7.507,-12.324 15.269,-25.067 26.993,-34.421 13.093,-10.445 30.002,-15.523 51.693,-15.523 21.691,0 38.6,5.077 51.693,15.523 11.724,9.354 19.487,22.097 26.993,34.421 2.958,4.857 5.957,9.772 9.212,14.487 -10.897,-2.442 -24.357,-4.443 -39.22,-4.443 -9.905,0 -18.226,3.427 -24.732,10.187 -14.197,14.749 -16.255,42.087 -16.056,64.373 z m 21.893,-2.272 c -2.627,2.627 -4.959,5.279 -7.089,7.863 -0.476,-20.097 0.336,-47.815 11.842,-59.769 3.679,-3.823 8.304,-5.68 14.141,-5.68 19.69,0 36.922,3.93 48.006,7.268 -19.157,13.294 -55.698,39.118 -66.9,50.319 z"
|
||||
id="path102" />
|
||||
<use
|
||||
xlink:href="#C"
|
||||
id="use104" />
|
||||
<use
|
||||
xlink:href="#C"
|
||||
x="-104.29"
|
||||
id="use106" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(28.653)"
|
||||
fill="#ffffff"
|
||||
id="g116">
|
||||
<use
|
||||
xlink:href="#E"
|
||||
id="use110" />
|
||||
<use
|
||||
xlink:href="#F"
|
||||
id="use112" />
|
||||
<use
|
||||
xlink:href="#D"
|
||||
id="use114" />
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
id="rect457"
|
||||
style="fill:#5865f2;filter:url(#filter4915)"
|
||||
d="M 2.4414061e-7,450 C 288.55392,407.94099 546.40848,545.8824 711.33692,565.37376 1020.6362,601.92697 1158.8644,434.15854 1500,550 v 450 H 2.4414061e-7 Z"
|
||||
sodipodi:nodetypes="cscccc" />
|
||||
<g
|
||||
clip-path="url(#clip0)"
|
||||
id="g3727"
|
||||
transform="matrix(2.9509052,0,0,2.9509052,319.3685,631.95978)">
|
||||
<g
|
||||
clip-path="url(#clip1)"
|
||||
id="g3725">
|
||||
<path
|
||||
d="m 61.7958,16.494 c -4.7222,-2.2094 -9.7714,-3.8151 -15.0502,-4.7294 -0.6483,1.1721 -1.4057,2.7486 -1.9279,4.0027 -5.6115,-0.8439 -11.1714,-0.8439 -16.6797,0 -0.5221,-1.2541 -1.2967,-2.8306 -1.9508,-4.0027 -5.2845,0.9143 -10.3395,2.5259 -15.0617,4.7411 C 1.60078,30.8988 -0.981215,44.9344 0.309785,58.7707 6.62708,63.4883 12.7493,66.3541 18.7682,68.2294 c 1.4861,-2.0453 2.8115,-4.2195 3.9533,-6.5109 -2.1746,-0.8263 -4.2574,-1.846 -6.2254,-3.0298 0.5221,-0.3868 1.0328,-0.7912 1.5262,-1.2073 12.0034,5.6143 25.0454,5.6143 36.9054,0 0.4992,0.4161 1.0098,0.8205 1.5262,1.2073 -1.9738,1.1896 -4.0623,2.2093 -6.2369,3.0357 1.1418,2.2855 2.4615,4.4656 3.9533,6.5108 6.0247,-1.8753 12.1526,-4.741 18.4699,-9.4645 C 74.155,42.7309 70.0525,28.8242 61.7958,16.494 Z m -37.439,33.7675 c -3.6033,0 -6.5583,-3.3639 -6.5583,-7.4603 0,-4.0964 2.8919,-7.4661 6.5583,-7.4661 3.6665,0 6.6214,3.3638 6.5583,7.4661 0.0057,4.0964 -2.8918,7.4603 -6.5583,7.4603 z m 24.2364,0 c -3.6033,0 -6.5583,-3.3639 -6.5583,-7.4603 0,-4.0964 2.8918,-7.4661 6.5583,-7.4661 3.6664,0 6.6214,3.3638 6.5583,7.4661 0,4.0964 -2.8919,7.4603 -6.5583,7.4603 z"
|
||||
fill="#ffffff"
|
||||
id="path3707" />
|
||||
<path
|
||||
d="m 98.0293,26.1707 h 15.6637 c 3.776,0 6.966,0.6036 9.583,1.805 2.61,1.2013 4.567,2.8774 5.864,5.0223 1.296,2.1449 1.95,4.6004 1.95,7.3665 0,2.7075 -0.677,5.163 -2.031,7.3606 -1.354,2.2035 -3.414,3.9441 -6.185,5.2275 -2.771,1.2834 -6.203,1.928 -10.305,1.928 H 98.0293 Z m 14.3787,21.4138 c 2.542,0 4.499,-0.6505 5.864,-1.9457 1.366,-1.301 2.049,-3.0708 2.049,-5.3153 0,-2.0805 -0.609,-3.739 -1.825,-4.9814 -1.216,-1.2424 -3.058,-1.8694 -5.52,-1.8694 h -4.9 v 14.1118 z"
|
||||
fill="#ffffff"
|
||||
id="path3709" />
|
||||
<path
|
||||
d="m 154.541,54.8456 c -2.169,-0.5743 -4.126,-1.4065 -5.864,-2.5024 v -6.8097 c 1.314,1.0372 3.075,1.8929 5.284,2.5668 2.209,0.6681 4.344,1.0021 6.409,1.0021 0.964,0 1.693,-0.1289 2.186,-0.3868 0.494,-0.2578 0.741,-0.5684 0.741,-0.9259 0,-0.4102 -0.132,-0.7501 -0.402,-1.0256 -0.27,-0.2754 -0.792,-0.504 -1.566,-0.6974 l -4.82,-1.1076 c -2.76,-0.6563 -4.717,-1.5647 -5.881,-2.7309 -1.165,-1.1604 -1.745,-2.6841 -1.745,-4.5711 0,-1.5882 0.505,-2.9653 1.527,-4.1433 1.015,-1.1779 2.461,-2.0863 4.337,-2.7251 1.877,-0.6446 4.068,-0.9669 6.587,-0.9669 2.249,0 4.309,0.2461 6.186,0.7384 1.876,0.4923 3.425,1.1193 4.659,1.887 v 6.4406 c -1.263,-0.7677 -2.709,-1.3713 -4.361,-1.8285 -1.647,-0.4512 -3.339,-0.6739 -5.084,-0.6739 -2.519,0 -3.775,0.4395 -3.775,1.3127 0,0.4103 0.195,0.715 0.585,0.9201 0.39,0.2051 1.107,0.4161 2.146,0.6388 l 4.016,0.7384 c 2.623,0.463 4.579,1.2776 5.864,2.4379 1.286,1.1604 1.928,2.8775 1.928,5.1513 0,2.4906 -1.061,4.4656 -3.19,5.9307 -2.129,1.4651 -5.147,2.1976 -9.06,2.1976 -2.301,-0.0058 -4.538,-0.293 -6.707,-0.8673 z"
|
||||
fill="#ffffff"
|
||||
id="path3711" />
|
||||
<path
|
||||
d="m 182.978,53.9839 c -2.3,-1.1487 -4.039,-2.7075 -5.198,-4.6766 -1.159,-1.9691 -1.744,-4.1843 -1.744,-6.6457 0,-2.4613 0.602,-4.6648 1.807,-6.6046 1.205,-1.9398 2.972,-3.4635 5.302,-4.5711 2.329,-1.1076 5.112,-1.6585 8.354,-1.6585 4.016,0 7.35,0.8615 10.001,2.5844 v 7.5072 c -0.935,-0.6564 -2.026,-1.1897 -3.271,-1.5999 -1.245,-0.4102 -2.576,-0.6154 -3.999,-0.6154 -2.49,0 -4.435,0.463 -5.841,1.3948 -1.406,0.9318 -2.111,2.1449 -2.111,3.651 0,1.4768 0.682,2.6841 2.048,3.6335 1.366,0.9435 3.345,1.4182 5.944,1.4182 1.337,0 2.657,-0.1993 3.959,-0.5919 1.297,-0.3985 2.416,-0.8849 3.351,-1.4593 v 7.261 c -2.943,1.805 -6.357,2.7075 -10.242,2.7075 -3.27,-0.0117 -6.059,-0.586 -8.36,-1.7346 z"
|
||||
fill="#ffffff"
|
||||
id="path3713" />
|
||||
<path
|
||||
d="m 211.518,53.9841 c -2.318,-1.1486 -4.085,-2.7192 -5.302,-4.7176 -1.216,-1.9984 -1.83,-4.2253 -1.83,-6.6867 0,-2.4613 0.608,-4.659 1.83,-6.587 1.222,-1.9281 2.978,-3.4401 5.285,-4.536 2.3,-1.0959 5.049,-1.6409 8.233,-1.6409 3.185,0 5.933,0.545 8.234,1.6409 2.301,1.0959 4.057,2.5962 5.262,4.5125 1.205,1.9164 1.807,4.114 1.807,6.6047 0,2.4613 -0.602,4.6883 -1.807,6.6866 -1.205,1.9984 -2.967,3.569 -5.285,4.7176 -2.318,1.1487 -5.055,1.723 -8.216,1.723 -3.162,0 -5.899,-0.5685 -8.211,-1.7171 z m 12.204,-7.2786 c 0.976,-0.9962 1.469,-2.3148 1.469,-3.9557 0,-1.6409 -0.488,-2.9478 -1.469,-3.9148 -0.975,-0.9728 -2.307,-1.4592 -3.993,-1.4592 -1.716,0 -3.059,0.4864 -4.04,1.4592 -0.975,0.9729 -1.463,2.2739 -1.463,3.9148 0,1.6409 0.488,2.9595 1.463,3.9557 0.976,0.9963 2.324,1.5003 4.04,1.5003 1.686,-0.0059 3.018,-0.504 3.993,-1.5003 z"
|
||||
fill="#ffffff"
|
||||
id="path3715" />
|
||||
<path
|
||||
d="m 259.17,31.3395 v 8.8609 c -1.021,-0.6857 -2.341,-1.0256 -3.976,-1.0256 -2.141,0 -3.793,0.6623 -4.941,1.9867 -1.153,1.3245 -1.727,3.3873 -1.727,6.1768 v 7.5482 h -9.84 V 30.8883 h 9.64 v 7.6302 c 0.533,-2.7896 1.4,-4.8465 2.593,-6.1769 1.188,-1.3244 2.725,-1.9866 4.596,-1.9866 1.417,0 2.634,0.3282 3.655,0.9845 z"
|
||||
fill="#ffffff"
|
||||
id="path3717" />
|
||||
<path
|
||||
d="m 291.864,25.3503 v 29.5363 h -9.841 v -5.3739 c -0.832,2.0218 -2.094,3.5631 -3.792,4.6179 -1.699,1.0491 -3.799,1.5765 -6.289,1.5765 -2.226,0 -4.165,-0.5509 -5.824,-1.6585 -1.658,-1.1076 -2.937,-2.6254 -3.838,-4.5535 -0.895,-1.9281 -1.349,-4.1081 -1.349,-6.546 -0.028,-2.5141 0.448,-4.7704 1.429,-6.7688 0.976,-1.9984 2.358,-3.5572 4.137,-4.6766 1.779,-1.1193 3.81,-1.6819 6.088,-1.6819 4.688,0 7.832,2.0804 9.438,6.2354 V 25.3503 Z m -11.309,21.1912 c 1.004,-0.9963 1.503,-2.2914 1.503,-3.8737 0,-1.5296 -0.488,-2.7779 -1.463,-3.7331 -0.976,-0.9552 -2.313,-1.4358 -3.994,-1.4358 -1.658,0 -2.983,0.4864 -3.976,1.4592 -0.993,0.9729 -1.486,2.2328 -1.486,3.7917 0,1.5589 0.493,2.8306 1.486,3.8151 0.993,0.9845 2.301,1.4768 3.936,1.4768 1.658,-0.0058 2.989,-0.504 3.994,-1.5002 z"
|
||||
fill="#ffffff"
|
||||
id="path3719" />
|
||||
<path
|
||||
d="m 139.382,33.4432 c 2.709,0 4.906,-2.0151 4.906,-4.5008 0,-2.4857 -2.197,-4.5007 -4.906,-4.5007 -2.71,0 -4.906,2.015 -4.906,4.5007 0,2.4857 2.196,4.5008 4.906,4.5008 z"
|
||||
fill="#ffffff"
|
||||
id="path3721" />
|
||||
<path
|
||||
d="m 134.472,36.5435 c 3.006,1.3244 6.736,1.383 9.811,0 v 18.4719 h -9.811 z"
|
||||
fill="#ffffff"
|
||||
id="path3723" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 13 KiB |
|
@ -1,10 +1,9 @@
|
|||
---
|
||||
title: "Creating a Firefox PWA for Discord"
|
||||
title: "Creating a Firefox PWA for Discord on Linux"
|
||||
date: 2022-07-01T18:17:51-07:00
|
||||
draft: true
|
||||
---
|
||||
|
||||
In this tutorial, I’ll explain how to set up, install, and configure a Firefox [PWA](https://en.wikipedia.org/wiki/Progressive_web_application) (Progressive Web Application) for Discord that integrates into your system, and some background on why you’d want to do so over the regular desktop version.
|
||||
In this tutorial, I’ll explain how to set up, install, and configure a Firefox [PWA](https://en.wikipedia.org/wiki/Progressive_web_application) (Progressive Web Application) for Discord that integrates into your system, and some background on why you’d want to do so over the regular desktop version. I’ve tested these steps on Arch Linux and Xubuntu 20.04.
|
||||
|
||||
## Background
|
||||
|
||||
|
@ -34,32 +33,32 @@ First, install the [PWAs for Firefox extension from the Firefox add-ons store](h
|
|||
|
||||
## Create the Discord PWA
|
||||
|
||||
Navigate to Discord [https://discord.com](https://discord.com/channels/@me) (**not the app**, we need the root of the PWA to be the index page so all pages under the Discord domain are considered part of the PWA) and click on *Install current site* in the extension. Change the *Start URL* to [https://discord.com/app](https://discord.com/app) so the PWA opens to the app page, not the landing page. And... you’re done! You’ve created a PWA for Firefox, it’s as simple as that. You can now open it from within the extension by clicking on the external link button.
|
||||
Navigate to Discord [https://discord.com](https://discord.com/channels/@me) (**not the app**, we need the root of the PWA to be the index page so all pages under the Discord domain are considered part of the PWA) and click on *Install current site* in the extension. Change the *Name* field of the PWA to just “Discord”, the default will include the tagline and be a bit overly long. Change the *Start URL* to [https://discord.com/app](https://discord.com/app) so the PWA opens to the app page, not the landing page. And... you’re done! You can leave all the other fields as-is and press *Install web app*. You’ve created a PWA for Firefox, it’s as simple as that. You can now open it from within the extension by clicking on the external link button.
|
||||
|
||||
However, there’s more configuration to be done. `firefox-pwa` creates a Firefox profile for the PWAs that’s completely separate from your main profile, so we’re going to have to do some configuration there. (By default, all of your PWAs share a single *Default* profile under the *Profiles* tab of the extension, but if you want to have different PWAs have different profiles you can configure it there.)
|
||||
However, there’s more configuration to be done. Firefox PWA creates a Firefox profile for the PWAs that’s completely separate from your main profile, so we’re going to have to do some configuration there. (By default, all of your PWAs share a single *Default* profile under the *Profiles* tab of the extension, but if you want to have different PWAs have different profiles you can configure it there.)
|
||||
|
||||
## Configure the PWA Firefox profile
|
||||
|
||||
It’s up to you how want to configure the profile, but here’s what I did and recommend.
|
||||
|
||||
- In the :gear: *General* portion, there’s a new settings section, *Progressive Web Apps*.
|
||||
- For me I checked *Open out of scope URLs in a default browser,* which makes it so non-Discord links you visit within the PWA profile are opened in your main Firefox profile instead of within the PWA. This is also important considering any external sites you visit within the PWA aren’t otherwise going to be added to your main profile’s history.
|
||||
- In addition, I also set *Display the address bar* to *Never,* as this is not necessary and adds to the clutter of the window.
|
||||
- !!! force links into new window?
|
||||
- In the :gear: *General* portion, there’s a new settings section, *Progressive Web Apps*. For me I checked *Open out of scope URLs in a default browser,* which makes it so non-Discord links you visit within the PWA profile are opened in your main Firefox profile instead of within the PWA. This is also important considering any external sites you visit within the PWA aren’t otherwise going to be added to your main profile’s history.
|
||||
- Under :jigsaw: *Extensions & Themes*, you You might also want to [choose a theme that matches Discord’s theming](https://addons.mozilla.org/en-US/firefox/addon/discord-dark-rebrand/).
|
||||
- Under :lock: *Privacy & Security* / *History*, set that history to *Use custom settings* for history and uncheck all the boxes. This will make it so the profile won’t keep any history (which is unnecessary in a PWA), but still will remember cookies so you don’t have to log in again each time you reopen it.
|
||||
- If you shut down your computer with the PWA open, Firefox will think that your previous session didn’t close properly and will prompt your previous session. Since we’re only going to be the PWA profile for single websites (i.e. Discord), this is unnecessary. To disable this behavior, we’re going to need to change a couple options under the advanced configuration preferences. Within the PWA, we don’t have access to the URL bar, so to enter the preferences, press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> to enter the developer tools. Enter the console and type in the following:
|
||||
|
||||
If you shut down your computer with the PWA open, Firefox will think that your previous session didn’t close properly and will reopen your old windows. I haven’t figured out a way to prevent this, but if you want to mess with advanced configuration, here’s how.
|
||||
|
||||
Within the PWA, we don’t have access to the URL bar, so to enter the preferences, press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> to enter the developer tools. Enter the console and type in the following:
|
||||
|
||||
```JS
|
||||
document.location.href = "about:config"
|
||||
```
|
||||
|
||||
Firefox may make you type `allow pasting` beforehand.
|
||||
|
||||
After this, you will enter the advanced settings page. Press *Accept the Risk and Continue*, search up `browser.sessionstore.max_tabs_undo` and `browser.sessionstore.max_windows_undo` and set both to 0.
|
||||
Firefox will make you type `allow pasting` beforehand.
|
||||
|
||||
## Launching the PWA from the command line
|
||||
|
||||
**If you are using a distro with a desktop environment,** Discord should already be in your applications drawer, so unless you want to be able to launch Discord from the command line, you can skip this step.
|
||||
|
||||
I have uninstalled the desktop Discord application `discord`, and I want to replace it with a shell script that launches the PWA. This will enable you to launch the PWA from the command line simply by typing `discord`, and also from an application launcher like [rofi](https://github.com/davatorium/rofi). This way, we don’t have to rely on launching Discord from the PWAsForFirefox extension.
|
||||
|
||||
Luckily, PWAs for Firefox provides a CLI. First, we need to find the ID of the Discord PWA:
|
||||
|
@ -99,3 +98,13 @@ sudo chmod +x /usr/bin/discord
|
|||
```
|
||||
|
||||
You’re done! You’ve created a PWA for Discord that looks and behaves like a desktop application, but without a lot of the hassle involved with the actual desktop app.
|
||||
|
||||
Note that if you decide to reinstall the normal Electron-based desktop Discord application, you’ll have to move/delete `/usr/bin/discord` first, as desktop Discord needs to put its executable there.
|
||||
|
||||
## Conclusion
|
||||
|
||||
Of course, this isn’t a perfect solution. Dragging and dropping files into the PWA doesn’t work for uploading, there might be some improved voice chat performance in the normal desktop version not available in the browser/PWA version, push-to-talk doesn’t work, and streaming still has no audio.
|
||||
|
||||
However, if you’ve already been using primarily the browser version of Discord, creating a PWA is a nice upgrade until Discord finally makes a good client. Here’s to hoping that day actually comes.
|
||||
|
||||
Anyhow, I hope this was helpful!
|
Loading…
Add table
Reference in a new issue